A Study On Usability Problems For Flat Design Based On Interactive Elements

Flat design has been a popular UI design style from 2011,and its` core significance is to highlight the core information and remove the redundant and complex decorative effect.The feature reflects in simplifying the superfluous 3D-effect including shadow,texture,gradient and so on.Flat design is superior to other designs in concise interface,high efficiency,fast update,good adaptability and low development costs.However,its long-term overuse also causes a lot of problems in usability,especially under the circumstance of skeuomorphism design has been abandoned completely.Interactive elements define the way and behavior of human-computer interface interaction.The website that overuses flat design makes interactive elements not prominent and lack findability.The logic that defines the elements` function makes users confused,and the interface lacks of hierarchy and depth.Users can`t distinguish the primary and secondary information if all of elements is used flat design.Those usability problems make users have to understand and distinguish the interface by relying on unscrambling semantic cue,hovering the mouse and waiting the operation feedback,which increases the costs of human-computer interaction.In order to decrease the interaction cost,make the interactive elements outstanding,improve the efficiency of user cognition and operation,and build the hierarchy of information and the depth of web page,the study divides the interaction costs into perception costs,cognition costs and operation costs,and then finds out the reason that increases the interaction costs.The main reasons lie on giving up more distinguishable visual features and lacking of clear clickable clues and perception.Lacking of metaphor weakens affordance and increase the load of cognition,which also causes perception and cognition be difficult,wastes clicks,and increases error rates.There are some ways to change this phenomenon: filter out the overused and most basic interactive elements,such as button,icon and text link,and adding some subtle visible effects,such as shadow,gradient,and new shape design in order to enrich the visual appearance of interactive elements.which can bring clear clickable signal and strengthen the metaphor.By virtue of quantitative research of eye movement test,the optimized interactive element design based on eye movement data has more advantages in visual search and the effectiveness of recognition and accuracy than overused flat design.The results combined the eye movement test data and subjective evaluation after eye movement testing show that: adding some subtle visual effects in interactive elements that overuses flattening design can improve the efficiency of cognition and visual search to users,decrease interaction cost,and optimize the usability of interface.In those subtle visual effects,some visual effects such as the shadow of button,circle design effects,the color of text link,underline and underline with color have obvious advantages,but button with gradient and prioritization scheme of icons have not.The study provides reliable design reference to the development of post-flat design era.