Mobile UX and Mobile UI guidelines: The 2023 Collection
As we promised in our first blogpost, we have researched the official mobile UX and mobile UI guidelines from the most important platforms for you. As you may know mobile UX and mobile UI are trendy, specially with the exponential growth of mobile devices and mobile app usage in our lives.This mobile UX and mobile UI guidelines from manufacturers will help you to create better mobile apps depending on the device and the platform you want to focus.
But, before starting with the list I would like to ask you something:
Do you know the difference between UX and UI?
From my point of view, User Experience (UX) is about feelings (dear designers, please don´t hate me now, just read a bit more :-D). For example: If you like this post, the idea behind it, the way I wrote it, the information you got, how the blog is structured, the website design… you will share it. Why? Because you as user had a great experience (“subliminal” message).
For a better explanation, check out this cool video from UX Mastery.
The User Interface (UI) is where people interact with devices. In our case, the smartphone or tablet but also what we see on the device. That means design. So the purpose of an UI expert is to create a great and technically attractive design, depending on the device.
So, I see User Interface like an important part of User Experience, because User Experience wouldn´t exist without a User Interface. Could you play chess without a chess set? I guess, this guide starts making sense, doesn´t it?
As I told you before, this is my brief point of view of what UX and UI mean. If you want to go further, I suggest you this article from Webdesigner Depot, written by Dain Miller.
Mobile UX and Mobile UI guidelines: The 2023 list
General Guidelines
Containers and packaged content
The concept of containers is certainly not new to UI design, but as we can see more and more mobile and web applications are completely packaged in containers. Containers help to organize user interface elements into blocks so that the user is not distracted by unnecessary visual elements.
When developing containers, a designer starts with the mobile version first and then moves on to the desktop and tablet. For example, you can keep the same design line across desktop, mobile, and apps. Many websites and apps use this minimalist, mobile-first style, such as Revolut, which has taken this trend to the next level. Don't forget about the grid.
Scrollytelling
Scrollytelling is a visual narrative that gradually evolves with the scroll of the feed. It is used because it creates a strong connection with the user and evokes emotions. As the page scrolls, more and more pages are opened, new elements appear, making the web page interactive. During the parallax transition, information moves from one side to the other, replaced by images and videos.
Emotional design and personalization
Emotional design is a concept that anticipates and takes into account the needs of each user. The system provides feedback, understands basic desires, and makes them feel like they are interacting with people, not a machine or a company. These are all signs of personalization. All these small features make the user feel that you care about them, which in turn creates commitment and, of course, builds customer loyalty.
Most designers tend to relate to Don Norman's three distinct but interrelated levels of emotional design: visceral, behavioral, and reflective. Norman is the director of the Design Lab at the University of California, San Diego, and most of his work is related to the defense of "user-centered design," even stating that aesthetics is a secondary need.
Android UX and UI guidelines
- Design Android developers: You can find al resources on this link. But if you want to save a bit of time, you can click directly in the following links.
- New features for Android Kit Kat: New patterns and styles you can use to build Android apps running Android 4.4 Kitkat
- Android UI guidelines
BONUS: In this video Nick butcher and Roman Nurik provide some tips and tricks for building the UI patterns & visual styling detailed in the Android Design guidelines.
Windows Phone UX and UI guidelines
- Design guidelines: You can find all information related with Windows Phone UX and UI guidelines. On this link you can also find:
- Windows Phone Design principals
- Index of UX guidelines for Windows Runtime apps
- Design library
- Design process: Concept, structure, interaction, visuals and prototype.
If you want to create a Windows Phone Silverlight 8 or Windows Phone Silverlight 8.1 app, you will find the resources related on Design Library for Windows phone 8.
Apple iOS 7 Design Resources
- iOS Human Interface Guidelines
- UIKit User Interface Catalog
- iOS 7 UI Transition Guide
HP WebOS UI guidelines
- Enyo Design Guide
- Mojo Design Guide
Ubuntu App design guides
- App design guides
- Ubuntu User interface toolkit
That´s all for today. I hope this collection would be useful for you in order to stay up to date with the latest trends and best practices of mobile UI and UX and why not, get some inspiration. If you are starting in the mobile app world, I recommend you also the following blogpost about The Elements Of The Mobile User Experience by Lyndon Cerejo on Smashing Magazine.
If you know any other mobile UI Guidelines, just let us know!
The Mobile App Europe Team
