UX/UI design and trends to consider
As a digital designer and a person who enjoys visual communication and design, I am already aware of some existing conventions used in UX/UI (User Experience/Interface) design, however, I want to grow my knowledge by investigating trending UX/UI design material and techniques from other sources to have a better understanding of the field I am designing in, and introduce these techniques into my practice and the QlovaSeed design guidelines.Â
Using white space
Every year mobile UX/UI design develops and changes, and one aspect that is slowly becoming consumed is screen space. The placement and layout of the design is important, where things are placed and where things arent are critical as it restricts where the user interacts with the app. Including more white space is a simple and fresh technique that is being more embraced compared to over-crowded and cluttered design. It allows the user to only see what is important, and other conventions can be used in place of the lack of icons and containers such as with gestures.Â
(Image sourced from Pradita, G. (June, 2015).)
Gestures
Gestures allow users to navigate through the app/device, perform actions and transform objects. âHiddenâ gestures are a great way to simplify the UI and keep it minimal, and allows the users to interact with the space when theyâre ready. For example, instead of having a persistent arrow icon in the top left hand corner of an interface to allow the user to go back a page, the user can use a swipe gesture instead to move in the direction they please. The removal of the button allows more room for white space and a less cluttered interface.
Navigation gestures show how to move through the product, such as: swiping, tapping, dragging, pinching and scrolling.
Action gestures indicate how to perform actions such as: Tapping an icon, long pressing/long hold, and swiping.
Transformation gestures allow the user to manipulate elements and control their size, position, and rotation. This is done with a double tap, pinching, compound gestures and pickup/move.
However it is important to understand that users may not have prior knowledge of all or any gestures. The users will only try to use gestures if they have used the techniques before. A good tip is to use animated hints which give an example of the gestures available and show what is possible, or by using intuitive design techniques.
(Image sourced from Babich, N. (March, 2016).)
Dark mode/theme
Every software, platform and company at the moment has jumped on the dark mode bandwagon, which allows the UI to be low-lit and inverted to arguably be easier on the users eyes. It is said that long periods of screen time encourages eye fatigue, and that it is easier on the eyes to look at lighter text on a dark background, which is why applications are offering the option of dark mode for their users. Personally I use dark mode on my mobile, and on websites/apps that offer it such as YouTube and Twitter. I have discovered that after long periods of screen time I get headaches and bloodshot/tired eyes, which is why I have also invested in a blue light tint for my prescription glasses for when Iâm working at home.
However, not everyone can enjoy dark mode. For some users with visual eye impairments (such as astigmatisms - Â a common condition that most people are born with)Â dark mode can make things worse (Cole, S. June, 2019.). So it is important to be aware that forcing people into a dark mode/theme may not always be best, and having options available for the user is far more accommodating and enables positive UX.Â
(Image sourced from adddictedtomacintosh,(June, 2018).)
Colour
From darkness there is light; from the dark inverted trend there is also a dominant usage of colour. Colour can be used in meaningful ways to indicate information to users. It helps to create a distinction between elements (such as containers and iconography), and visualises where relationships and hierarchy are within the UI such as in the use of tabs. It can also be used to identify the layout of the UI, and indicate where the top and bottom of the page start and end.
When creating a colour story or palette for any UI you need to consider a balance between neutral and bright colours. Having primary and complementary/secondary colours that work well together all of the time, not just in specific situations. A common trend is using variations of one tone to distinguish UI elements rather then introducing secondary colours from a different hue.Â
Apple. (n.d). Human Interface Design Guidelines. Dark Mode. Â Retrieved August, 2019, from https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/
Babich, N. (March, 2016). In-app Gestures and Mobile App Usability. UX Planet. Retrieved August, 2019, from https://uxplanet.org/in-app-gestures-and-mobile-app-usability-d2e737bd5250
Cole. S. (June, 2019). Dark Mode Isnât âEasier on the Eyesâ for Everybody. Tech by Vice. Retrieved August, 2019, from https://www.vice.com/en_us/article/ywyqxw/apple-dark-mode-eye-strain-battery-life
Dagar, S. (December, 2018). Mobile App Design In 2019. UX Collective. Retrieved August, 2019, from https://uxdesign.cc/ux-trends-2019-3ddadf853ca
Fireart. (May, 2019). How to Design Gesture-Driven UI. Retrieved August, 2019, from https://fireart.studio/how-to-design-gesture-driven-ui/Â
Google Material Design. (n.d). Material Foundation. Interaction Gestures. Retrieved August, 2019, from https://material.io/design/interaction/gestures.html#types-of-gestures
Google Material Design. (n.d). Material Foundation. Dark theme. Retrieved August, 2019, from https://material.io/design/color/dark-theme.html#
Pradita, G. (June, 2015). Mondo Inbox and Conversation Interface. Retrieved August, 2019, from https://dribbble.com/shots/2340112-Mondo-Inbox-and-Conversation-Interface
Tubik Studio. (January, 2019). Big Review of UI Design Trends We Start 2019 With. UX Planet. Retrieved August, 2019, from https://uxplanet.org/review-of-ui-design-trends-we-start-2019-with-68f128151215
Wiesemborski, M. (May, 2019). State of mobile app design 2019. UX Collective. Retrieved August, 2019, from https://uxdesign.cc/state-of-mobile-app-design-2019-48bb843890f7