Published on <a href="https://blog.prototypr.io/need-to-know-skills-of-ui-design-for-mobile-devices-ae9b88379bad?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Amy Smith 
Have you meet some problems on the UI design for mobile devices? For example, small mobile screens? Bad user experience? In this article, I will cover some things you can do to learn practical user interface design (<a href="https://blog.prototypr.io/how-to-learn-ui-design-from-zero-basis-e29fe4f2bd17">UI design</a>).
1. UI design principle
Don’t think the practical UI design principle does not apply to small mobile screens.
<img alt="" src="https://cdn-images-1.medium.com/max/466/0*jl1er7PF4niPwrhB.png">
Five elements of UI design you should take into consideration:
1). Goal-driven Design. This allows you to customize the app working process and meet requirements for target users.
2). Usability. It may look empty, but you have to guarantee your application is usable. Users don’t like to download a complex app from App Store. Usability makes your product useful and hopeful.
3). Affordance &amp; Signifiers. The signifier is an implication of affordance.For example, underlined blue text reminds you it’s a hyperlink, and it can link to other pages when you click it. With correct signifier, users can easily understand UI element.
4). Learn-ability. You want users to instinctively know the function of your interface.Familiar pattern can let users easily adapt to the new app.
5). Feedback &amp; Response Time. Feedback could help users to know whether the task has been completed or not.It can be a very simple hum, or complex modal window that keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions. Please make sure your prompt be friendly, humane, and can be responded within the stipulated time.
2.User Objectives
Screen size is not the only constraint on mobile UI design, but also users themselves and their habits. Thus, the first step is to study the user habits when you decide to create an app for a target group.
<a href="https://www.mockplus.com/resource/post/100-retro-icon-templates-6-fonts-of-adventure-collection">Best UI/UX Design Materials for Free</a>
<a href="https://www.mockplus.com/resource/post/100-retro-icon-templates-6-fonts-of-adventure-collection/?r=cherry">DOWNLOAD</a>
<img alt="" src="https://cdn-images-1.medium.com/max/474/0*koKXje10gEqgLLKm.png">
Three basic <a href="https://www.mockplus.com/blog/post/tips-on-how-to-learn-uiux-design-for-beginners/?r=cherry">UX design</a> strategies:
1). Character. The fiction character based on your target user group could help you to understand how to run your app well.
2). User scenario can help to stimulate the user behavior. That could inspire you to understand how the final effect will look like as their expectation to achieve. Ultimately, you can design the most suitable UI for them.
3). Experience the design progress. You may see all the conditions on a single interaction that will happen in each step. Particularly user emotion and surrounding environment could be captured carefully on this progress.
3. Prototyping is necessary
Design and research can be progressed simultaneously. For example, you can quickly draw out the UI design outline based on what you have learned. Then create a simple prototype before finalized, by paper and pen or by professional rapid prototyping tools such as <a href="http://www.mockplus.com/?r=cherry">Mockplus</a>. So that we could begin to understand users engage content and behavior during this process. With a detailed outline, the detailed information about layout and structure will be integrated into the design progress. At last, rapid prototyping could help on testing your apps and also user thinking.
<img alt="" src="https://cdn-images-1.medium.com/max/800/0*1feOOOFCvRIFT09T.png">
4. <a href="https://www.mockplus.com/blog/post/what-is-interaction-design-and-how-it-works/?r=cherry">Convenient interaction</a>
There are two common interaction design patterns:
1). Touch gesture. The definition of touch device is determined by the gestures like touch, slide, double-click, pinch and zoom. These gestures are becoming the second natural response of users, a kind of subconscious action .
2). Animation. Users will be more concentrated on user interfaces when you add animations to your design.There is an obvious visual discrepancy between the disappear and slide-out of elements. The combination of touch gesture and animation could provide users a deeper and more authentic experience about the mobile apps.
<img alt="" src="https://cdn-images-1.medium.com/max/638/0*Ujul2JUF9BaLSNdy.png">
5. Fat thumb interaction
“A new study published by Saul Greenberg’s lab at the University of Calgary proposes that the fatness of your thumb can be used for new user interaction possibilities on your smart phone and other touch devices like the Kindle Fire.”
Comparing with the mouse, your finger pixel width is much wider. So, you should pay attention to finger-friendly design. In particular, you have to leave enough space for the user fingertip. If your buttons are too small or too tight, the user can not operate accurately. Then they will be frustrated and give up your apps.
<img alt="" src="https://cdn-images-1.medium.com/max/538/0*B4N9CE3PKDeqqaHg.png">
A tip for thumb interaction design. What you should take into the consideration is that the pixel width of your finger. Let us suppose that we all have fat fingers. Okay, that’s not true. But you should know that a touch target that’s 45–57 pixels wide allows the user’s finger to fit snugly inside the target. This converts to 45–57 pixels, which is wider than what most <a href="https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/">mobile guidelines</a> suggest. Apple has suggested a touch target size of 44×44 pixels. But that’s does not always apply to your design, what you should keep in mind is how to give consideration to finger-friendly design and finger interactions.
6. <a href="https://goo.gl/oKZgbg">Read books, magazines &amp; blogs</a>
Lots of <a href="https://www.mockplus.com/blog/post/tips-on-how-to-learn-uiux-design-for-beginners/?r=cherry">tips on how to learn UI/UX design</a> are available on the Internet, learning to absorb skills and experiences from books, magazines &amp; blogs is also a good method for you to improve yourself.
<img alt="" src="https://cdn-images-1.medium.com/max/600/0*y-TjYjA70ewkrDuD.png">
I hope this article could help you to get some idea of how to go about getting some practical experience in UI/UX design.
More Article You May Like:
<a href="http://www.mockplus.com/blog/post/149-the-7-best-prototyping-tools-for-ui-and-ux-designers-in-2016/?r=cherry">The 7 Best Prototyping Tools for UI and UX Designers in 2016</a>
<a href="http://www.mockplus.com/blog/post/153-tips-on-how-to-learn-uiux-design-for-beginners/?r=cherry">Tips on How to Learn UI/UX Design for Beginners</a>
<a href="http://www.mockplus.com/blog/post/155-ux-vs-ui-vs-ia-vs-ixd-4-confusing-digital-design-terms-defined/?r=cherry">UX vs UI vs IA vs IxD : 4 Confusing Digital Design Terms Defined</a>
<h3><a href="https://goo.gl/md91Uk">9 Best Websites to Get UI Inspiration</a></h3>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=ae9b88379bad" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/need-to-know-skills-of-ui-design-for-mobile-devices-ae9b88379bad">Need-to-Know Skills of UI Design for Mobile Devices</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Need-to-Know Skills of UI Design for Mobile Devices

Top Stories