跳至主要内容

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

Have you meet some problems on user interface design for the mobile device? 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 (UI design).

1. UI design principle

Don’t think the practical UI design principle does not apply to small mobile screens.


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 & 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 & 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.



Three basic UX design 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 Mockplus. 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.


4. Convenient interaction

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.
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.
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 mobile guidelines 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.


Lots of tips on how to learn UI/UX design are available on the Internet, learning to absorb skills and experiences from books, magazines & blogs is also a good method for you to improve yourself.


I hope this article could help you to get some idea of how to go about getting some practical experience in UI/UX design.



评论

此博客中的热门博文

10 Great Interactive Design Examples for Designers’ Reference

Interactive design has been widely used in website design and mobile app design. There is no lack of such articles about  what is interaction design and how it works , as well as the great  interaction design examples . You can easily find one or two on the internet. Every great designer knows that the design has never been empty talk, you have to combine the theoretical with a series of  UI/UX design books and resources  with the practical examples. So that you will get more inspiration to be an advanced designer. Here are 10 great interactive design examples about mobile app design and website design. Interactive Design Examples for  Mobile App 1. 3D Stereoscopic Picture List The picture content shows in a stereoscopic way. Sliding the time axis on the left side, it will show the corresponding picture according to the shooting time. The selected picture will be displayed in the middle of the mobile interface. 2. Picture shows by stack cards ...

What You Should Know About the Perpetual License of the Prototyping Tools

With the fierce competition and the growing demand in the design market, the prototype software developers have resorted to their effort to meet the different user requirement. They launched a series of product service versions, such as free version, professional version, and the perpetual license version. Most of the UI/UX designers may have been familiar with the free version and pro version, but know little about the perpetual license. This article will introduce you about the perpetual license about four prototyping tools. 1.  Axure RP Axure has launched three versions: Pro, Team, and  Enterprise . But the support for the perpetual license, that is limited to users who have already purchased the Professional or Team Edition. In the Axure RP 8.0 version, users can purchase license key at the price of $ 495 and $ 895. Moreover, once you purchased the perpetual license, you can have the software update for free in your lifetime. (Get the license here:  https://www...

Tips on How to Learn UI/UX Design for Beginners

The first thing to understand about  UX  is that it is not simply an exercise in creating a prototype. Many people approach UX entirely focused on prototype creation, but creating a prototype is only a narrow subset of what the discipline of UX has to offer. In this article, I’ll be covering the three cornerstones of becoming and being a UX professional: learning UX, practicing UX design , and cultivating your own UX connection. Part I. Tips on Learning UX 1. A list of classic books and resources for beginners:  Read my list of UX resources for beginners 2. The latest books for designers:  Great books for designers to read in 2016 Free UX & UI Books That Worth Your Reading 3. Listen to useful podcasts:  my blog post about my favorite UX podcasts 4. A list of  UX Design Blogs And Resources You Should Follow , some collections such as  UX — UI Readings  on Medium, and  Inspiration and helpful links for User Experien...