Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Mobile UI / UX Trends

•
•
Evgeny Tsarkov
Evgeny Tsarkov

Content © Onur Oral (https://medium.com/@oralonur) Whether on an app screen, a web browser, or a wearable watch face, design is one of the most important drivers of consumer engagement. From flat design to Material design, I analysed what trends have evolved, and share a few of my insights with you — what are these trends? Why are they beneficial to the user? And how are they created? Let’s look at how flat design and Material design came into play and evolved to the trends we see today.

1 of 29
Mobile 2015 UI/UX trends
Whether on an app screen, a web browser, or a wearable watch face, design is one of the most important drivers of consumer engagement. From flat design to Material design, I analysed what trends have evolved, and share a few of my insights with you—what are these trends? Why are they beneficial to the user? And how are they created? Let’s look at how flat design and Material design came into play and evolved to the trends we see today. Content © Onur Oral (https://medium.com/@oralonur)
Lighter Design
What Instead of incorporating a wide array of gradients and shadows, shifting to a ‘flat design’ creates a lighter aesthetic in the app. This means using negative space — instead of gradients, shadows, etc.— can create a simpler interface, focusing only on having core information and removing design elements that are not productive as itself and to the user flow. Why Lighter design removes distraction to help guide the user’s eye to meaningful content on the screen, enabling easier navigation while also providing a sleek, modern aesthetic to the brand itself.
One Typeface To Rule Them All
What Reducing the number of fonts on a screen can reveal the power of typography. Instead of using different typeface and leveraging different characteristics —e.g. italics, bold, semi-bold— and different font sizes can better differentiate discrete areas of content. Why Embracing a singular typeface across an entire app drives consistency not only for branding, but also across channels —e.g. app, mobile site, website— thus optimising the mobile elements across the omnichannel experience. Also, users prefer the simplicity of having one typeface to scroll through in identifying relevant content.
Spaces & Blocks - No More Lines
What While previously lines and dividers were used to clearly delineate specific sections or categories within a screen, adding these elements can result in dense, crowded interfaces. Straying away from lines, interfaces which leverage clustered blocks of content separated by spaces have the advantage of freeing up that space and establishing a clean look. Why The removal of explicit lines and dividers provides a modern look that focuses on functionality; for example, images and/or fonts can be bigger, providing visual clarity and improved ease of use. Leveraging space instead of drawing lines helps to define different sections in a non-obtrusive manner.
Spotlighted Data
What As users’ preferences shift toward a simpler interface, usage of big fonts and striking colors get more common to make a certain data the center of focus. Highlighted data can vary according to target customers. Why Leveraging increased font size and/or a pop of color draws the users’ attention to a particular area of the screen — without an obtrusive, heavy-handed push or command to do so. As a result, users can access information more quickly, providing an easier navigation and information-gathering experience.
Micro-interaction
What Micro-interactions are small visual enhancements (for example — an animation, a sound etc.) that occur around a use case. These scenarios may include completing a transaction, favoriting an item, or prompting a pop-up message. These interactions are subtle, but they differentiate the product by pointing to the attention the right element. Why These micro-interactions can be leveraged as a signal to prompt the user while accomplishing a task — e.g. adjusting a setting— creating a small piece of content like a pop-up message. Apps which have well-done micro-interactions considered easier, more fun, and more engaging by their users.
Smaller Color Palette
What The usage of simpler color schemes became a trend after the introduction of flat design in 2013, which embraces clarity and simplicity. As a result, designers and users alike prefer the usage of smaller number of colors, aiming for a clean look. Why Usage of color is essential in creating a certain mood, guiding the user’s area of focus, and communicating a brand. By using fewer colors, the brand identity can be reflected more clearly. In addition, users may prefer this aesthetic as it removes the distraction that too many colors can cause, and it better highlights key features, improving navigation through the app’s flow.
Layered Interface
What Previously, interfaces were centered around the principle of skeumorphism, a design principle that takes cues from original structures or objects (for example, digital calendar resembling a paper desk calendar, 3D ‘depth’ on app icons, the shutter click sound of a mobile phone). Now that flat design has shifted away from this principle, it opens up the opportunity to create depth in new ways. Primarily, using layers helps create this feeling of depth and dimension, creating a more ‘tangible’ experience. Why An implication of flat design was the risk of being ‘too flat’ — with so much subtlety, how can the user navigate and engage, given their conditioning to a 3D physical (and previously digital) world? Layers provide the ability to show one item is on top of another by taking full advantage of the z-axis. Layering and increasing depth helps identify the relationship between different items, and draws attention to certain items.
Ghost Buttons
What Ghost buttons are transparent buttons, having no color fill. Their borders are very thin-lined, and the shape itself is basic — such as a rectangular or squared, with right angle or softened edges. Text in these buttons are simple and minimal. Why These subtle buttons can grab the user’s attention while still seeming clean, trendy, and unobtrusive. It also allows for there to be a hierarchy of buttons on the screen —if there are different buttons on the screen— if there are different buttons in the same page, they may be designed and placed with prioritisation (e.g. ghost buttons for optional or intermediate steps). In some cases for material design, subtle shadows are used to help users perceive that hierarchy.
Gestures
What With integration of gyroscopes and motion sensors, consumer devices are able to detect movement. With this, interaction between user and the device moves beyond the click and extends real life gestures to the screen. Why Users are intuitive about gestures. When asked how to delete an item, users tried to move the item out of the screen regardless of age, sex and gender. Enhances user experience with less taps and more scrolling, applications become more interactive by positioning the screen more than just a touch target.
Motion
What Through software innovation, designers now have the ability to take advantage of controlling movement with their style sheets. Motion-based design elements can be seen in a variety of forms, including transitions, animations and even on texture to mimic 3D depth. The use of motions within the design helps users to engage with and internalise content, differentiating that element or data/object from others to highlight its importance. Why Motions can draw user’s attention to a specific area — or help to distract from it. By showing a visual response, it can increase engagement, delighting the user with a ‘wow’ factor.
Shorter User Flows
What Instead of navigating through multiple pages to complete a single transaction, a single screen can include those intermediate steps and reduce the time and effort spent in app. For example, a form can automatically open or highlight the subsequent input area when the user completes the previous field. Why Mobile users prefer to complete their transactions in an app easily and quickly while they are on-the-go. Designing the experience of the applications according to this insight minimizes the effort for the user and can increase the rate of conversion and/or frequency of app opens.
Design Standards—as Best Practice
What Design standards is the process of setting the visual language at the beginning of the project by determining standards such as colors, icons and global padding. Why Setting the standards of the design helps to create consistency within the application and between different platforms. It minimizes possible errors while bringing the project into life and makes it easier to make modifications in the future.
Prototyping—as Best Practice
What A prototype is a preliminary or early working version of a product. The usage of prototypes can provide valuable insights into the functionality of design, highlighting potential changes needed in order to enhance the user experience without costing a major loss in designer time and effort. Why By creating these low-cost ‘experiments’, prototyping can clarify the key components of the project, including the feature scope and requirements. It leaves essential time and resources to learn from the experiment and iterate on the product in an insight-driven process.
etsarkov@gmail.com +7 916 9505029 skype: etsarkov fb.com/etsarkov linkedin.com/in/etsarkov Evgeny Tsarkov

More Related Content

Mobile UI / UX Trends

  • 2. Whether on an app screen, a web browser, or a wearable watch face, design is one of the most important drivers of consumer engagement. From flat design to Material design, I analysed what trends have evolved, and share a few of my insights with you—what are these trends? Why are they beneficial to the user? And how are they created? Let’s look at how flat design and Material design came into play and evolved to the trends we see today. Content © Onur Oral (https://medium.com/@oralonur)
  • 4. What Instead of incorporating a wide array of gradients and shadows, shifting to a ‘flat design’ creates a lighter aesthetic in the app. This means using negative space — instead of gradients, shadows, etc.— can create a simpler interface, focusing only on having core information and removing design elements that are not productive as itself and to the user flow. Why Lighter design removes distraction to help guide the user’s eye to meaningful content on the screen, enabling easier navigation while also providing a sleek, modern aesthetic to the brand itself.
  • 5. One Typeface To Rule Them All
  • 6. What Reducing the number of fonts on a screen can reveal the power of typography. Instead of using different typeface and leveraging different characteristics —e.g. italics, bold, semi-bold— and different font sizes can better differentiate discrete areas of content. Why Embracing a singular typeface across an entire app drives consistency not only for branding, but also across channels —e.g. app, mobile site, website— thus optimising the mobile elements across the omnichannel experience. Also, users prefer the simplicity of having one typeface to scroll through in identifying relevant content.
  • 7. Spaces & Blocks - No More Lines
  • 8. What While previously lines and dividers were used to clearly delineate specific sections or categories within a screen, adding these elements can result in dense, crowded interfaces. Straying away from lines, interfaces which leverage clustered blocks of content separated by spaces have the advantage of freeing up that space and establishing a clean look. Why The removal of explicit lines and dividers provides a modern look that focuses on functionality; for example, images and/or fonts can be bigger, providing visual clarity and improved ease of use. Leveraging space instead of drawing lines helps to define different sections in a non-obtrusive manner.
  • 10. What As users’ preferences shift toward a simpler interface, usage of big fonts and striking colors get more common to make a certain data the center of focus. Highlighted data can vary according to target customers. Why Leveraging increased font size and/or a pop of color draws the users’ attention to a particular area of the screen — without an obtrusive, heavy-handed push or command to do so. As a result, users can access information more quickly, providing an easier navigation and information-gathering experience.
  • 12. What Micro-interactions are small visual enhancements (for example — an animation, a sound etc.) that occur around a use case. These scenarios may include completing a transaction, favoriting an item, or prompting a pop-up message. These interactions are subtle, but they differentiate the product by pointing to the attention the right element. Why These micro-interactions can be leveraged as a signal to prompt the user while accomplishing a task — e.g. adjusting a setting— creating a small piece of content like a pop-up message. Apps which have well-done micro-interactions considered easier, more fun, and more engaging by their users.
  • 14. What The usage of simpler color schemes became a trend after the introduction of flat design in 2013, which embraces clarity and simplicity. As a result, designers and users alike prefer the usage of smaller number of colors, aiming for a clean look. Why Usage of color is essential in creating a certain mood, guiding the user’s area of focus, and communicating a brand. By using fewer colors, the brand identity can be reflected more clearly. In addition, users may prefer this aesthetic as it removes the distraction that too many colors can cause, and it better highlights key features, improving navigation through the app’s flow.
  • 16. What Previously, interfaces were centered around the principle of skeumorphism, a design principle that takes cues from original structures or objects (for example, digital calendar resembling a paper desk calendar, 3D ‘depth’ on app icons, the shutter click sound of a mobile phone). Now that flat design has shifted away from this principle, it opens up the opportunity to create depth in new ways. Primarily, using layers helps create this feeling of depth and dimension, creating a more ‘tangible’ experience. Why An implication of flat design was the risk of being ‘too flat’ — with so much subtlety, how can the user navigate and engage, given their conditioning to a 3D physical (and previously digital) world? Layers provide the ability to show one item is on top of another by taking full advantage of the z-axis. Layering and increasing depth helps identify the relationship between different items, and draws attention to certain items.
  • 18. What Ghost buttons are transparent buttons, having no color fill. Their borders are very thin-lined, and the shape itself is basic — such as a rectangular or squared, with right angle or softened edges. Text in these buttons are simple and minimal. Why These subtle buttons can grab the user’s attention while still seeming clean, trendy, and unobtrusive. It also allows for there to be a hierarchy of buttons on the screen —if there are different buttons on the screen— if there are different buttons in the same page, they may be designed and placed with prioritisation (e.g. ghost buttons for optional or intermediate steps). In some cases for material design, subtle shadows are used to help users perceive that hierarchy.
  • 20. What With integration of gyroscopes and motion sensors, consumer devices are able to detect movement. With this, interaction between user and the device moves beyond the click and extends real life gestures to the screen. Why Users are intuitive about gestures. When asked how to delete an item, users tried to move the item out of the screen regardless of age, sex and gender. Enhances user experience with less taps and more scrolling, applications become more interactive by positioning the screen more than just a touch target.
  • 22. What Through software innovation, designers now have the ability to take advantage of controlling movement with their style sheets. Motion-based design elements can be seen in a variety of forms, including transitions, animations and even on texture to mimic 3D depth. The use of motions within the design helps users to engage with and internalise content, differentiating that element or data/object from others to highlight its importance. Why Motions can draw user’s attention to a specific area — or help to distract from it. By showing a visual response, it can increase engagement, delighting the user with a ‘wow’ factor.
  • 24. What Instead of navigating through multiple pages to complete a single transaction, a single screen can include those intermediate steps and reduce the time and effort spent in app. For example, a form can automatically open or highlight the subsequent input area when the user completes the previous field. Why Mobile users prefer to complete their transactions in an app easily and quickly while they are on-the-go. Designing the experience of the applications according to this insight minimizes the effort for the user and can increase the rate of conversion and/or frequency of app opens.
  • 26. What Design standards is the process of setting the visual language at the beginning of the project by determining standards such as colors, icons and global padding. Why Setting the standards of the design helps to create consistency within the application and between different platforms. It minimizes possible errors while bringing the project into life and makes it easier to make modifications in the future.
  • 28. What A prototype is a preliminary or early working version of a product. The usage of prototypes can provide valuable insights into the functionality of design, highlighting potential changes needed in order to enhance the user experience without costing a major loss in designer time and effort. Why By creating these low-cost ‘experiments’, prototyping can clarify the key components of the project, including the feature scope and requirements. It leaves essential time and resources to learn from the experiment and iterate on the product in an insight-driven process.
  • 29. etsarkov@gmail.com +7 916 9505029 skype: etsarkov fb.com/etsarkov linkedin.com/in/etsarkov Evgeny Tsarkov