{"id":517,"date":"2022-02-02T14:01:38","date_gmt":"2022-02-02T07:01:38","guid":{"rendered":"https:\/\/bnsd.binus.ac.id\/graphic-design\/?p=517"},"modified":"2022-02-02T14:01:38","modified_gmt":"2022-02-02T07:01:38","slug":"mobile-ux-design-key-principles","status":"publish","type":"post","link":"https:\/\/international.binus.ac.id\/graphic-design\/2022\/02\/02\/mobile-ux-design-key-principles\/","title":{"rendered":"Mobile UX Design: Key Principles"},"content":{"rendered":"<p id=\"6ecf\" class=\"pw-post-body-paragraph ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk do bh\" data-selectable-paragraph=\"\">The most important thing to keep in mind when designing a mobile app is to make sure it is both\u00a0<em class=\"jl\">useful\u00a0<\/em>and\u00a0<em class=\"jl\">intuitive<\/em>. If the app is not useful, it has no real value for user and no one has any reason to use it. If app is useful but requires a lot of time and effort, people won\u2019t bother learning how to use it.<\/p>\n<blockquote class=\"jm\">\n<p id=\"6ce5\" class=\"jn jo eo ep b jp jq jr js jt ju jk bz\" data-selectable-paragraph=\"\">Good UI design is\u00a0<strong class=\"ci\">user-centric<\/strong>. Users install your app because they need to solve a problem. Designers should think about the problem their users will try to accomplish using the app,\u00a0<em class=\"jv\">focus on their key goals and remove all obstacles from their way<\/em>.<\/p>\n<\/blockquote>\n<p id=\"c555\" class=\"pw-post-body-paragraph ip iq eo ir b fm jw it iu fp jx iw ix iy jy ja jb jc jz je jf jg ka ji jj jk do bh\" data-selectable-paragraph=\"\">Here are 10 UX design principles that I think are key for creating really great mobile user experiences.<\/p>\n<h1 id=\"ff55\" class=\"kb kc eo av aw kd ke it kf kg kh iw ki kj kk kl km kn ko kp kq kr ks kt ku kv bh\" data-selectable-paragraph=\"\">1. Cut Out The Clutter<\/h1>\n<p id=\"153d\" class=\"pw-post-body-paragraph ip iq eo ir b fm kw it iu fp kx iw ix iy ky ja jb jc kz je jf jg la ji jj jk do bh\" data-selectable-paragraph=\"\">User attention is a precious resource, and should be allocated accordingly. Cluttering your interface overloads your user with too much information: every added button, image, and line of text make the screen more complicated.<\/p>\n<figure class=\"lc ld le lf lg ea da db paragraph-image\">\n<div class=\"eb ec ed ee aj ef\" role=\"button\">\n<div class=\"da db lb\">\n<div class=\"lm s ed ln\">\n<div class=\"lo lp s\">\n<div class=\"lh li t u v lj aj at lk ll\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pk ud t u v lj aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*7NJ2JZDHzm98aZ6emaenFg.png\" alt=\"\" width=\"700\" height=\"447\" \/><\/div>\n<\/div>\n<\/div>\n<\/div><figcaption class=\"ei ej dc da db ek el av b em by bz\" data-selectable-paragraph=\"\">Clutter is bad on a desktop app or website, but on a mobile one it\u2019s a hundred times worse. Image credit:\u00a0<a class=\"cc gc\" href=\"https:\/\/twitter.com\/ftrain\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"><em class=\"jv\">ftrain<\/em><\/a><\/figcaption><\/figure>\n<p id=\"e944\" class=\"pw-post-body-paragraph ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk do bh\" data-selectable-paragraph=\"\">There\u2019s a famous quote by Antoine de Saint-Exup\u00e9ry that says<\/p>\n<blockquote class=\"jm\">\n<p id=\"bb56\" class=\"jn jo eo ep b jp jq jr js jt ju jk bz\" data-selectable-paragraph=\"\">\u201cPerfection is achieved when there is nothing left to take away.\u201d<\/p>\n<\/blockquote>\n<p id=\"7d9c\" class=\"pw-post-body-paragraph ip iq eo ir b fm jw it iu fp jx iw ix iy jy ja jb jc jz je jf jg ka ji jj jk do bh\" data-selectable-paragraph=\"\">It\u2019s important to\u00a0<em class=\"jl\">get rid of anything on a mobile design that isn\u2019t absolutely necessary,\u00a0<\/em>because reducing the clutter will improve comprehension.<\/p>\n<p id=\"6033\" class=\"pw-post-body-paragraph ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk do bh\" data-selectable-paragraph=\"\">A simple rule of thumb:\u00a0<strong class=\"ir lt\">one primary action per screen<\/strong>. Every screen you design for the app should support a\u00a0<em class=\"jl\">single action of real value<\/em>\u00a0to the person using it.<\/p>\n<p id=\"ee5f\" class=\"pw-post-body-paragraph ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk do bh\" data-selectable-paragraph=\"\">Take Uber, for instance. Uber knows that the goal of the user who uses the app is to take a cab. The app does not overwhelm the user with other information: it automatically detects users location based on GEO data and the only thing users have to do is to select a pickup location.<\/p>\n<figure class=\"lc ld le lf lg ea da db paragraph-image\">\n<div class=\"da db lu\">\n<div class=\"lm s ed ln\">\n<div class=\"lv lp s\">\n<div class=\"lh li t u v lj aj at lk ll\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pk ud t u v lj aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/281\/1*f3-vBzep22A6rAgl_RvIDA.png\" alt=\"\" width=\"281\" height=\"500\" \/><\/div>\n<\/div>\n<\/div><figcaption class=\"ei ej dc da db ek el av b em by bz\" data-selectable-paragraph=\"\">One of the basic rules of good UX is to reduce the effort users have to put in to get what the want.<\/figcaption><\/figure>\n<h1 id=\"6e1d\" class=\"kb kc eo av aw kd ke it kf kg kh iw ki kj kk kl km kn ko kp kq kr ks kt ku kv bh\" data-selectable-paragraph=\"\">2. Make Navigation Self-Evident<\/h1>\n<p id=\"f599\" class=\"pw-post-body-paragraph ip iq eo ir b fm kw it iu fp kx iw ix iy ky ja jb jc kz je jf jg la ji jj jk do bh\" data-selectable-paragraph=\"\">Helping users navigate should be a high priority for every app. Good navigation should feel like an invisible hand that guides the user along their journey. The principles of good mobile navigation are:<\/p>\n<ul class=\"\">\n<li id=\"0ddb\" class=\"ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk lw lx ly bh\" data-selectable-paragraph=\"\"><strong class=\"ir lt\">Clarity<\/strong>. App uses familiar navigation patterns and each navigation element (such as icon) lead to the proper destination.<\/li>\n<\/ul>\n<figure class=\"lc ld le lf lg ea da db paragraph-image\">\n<div class=\"da db lz\">\n<div class=\"lm s ed ln\">\n<div class=\"ma lp s\">\n<div class=\"lh li t u v lj aj at lk ll\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pk ud t u v lj aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/313\/1*JgedY6HwyBy9OhJeAwf3sg.gif\" alt=\"\" width=\"313\" height=\"481\" \/><\/div>\n<\/div>\n<\/div>\n<\/figure>\n<ul class=\"\">\n<li id=\"5cf3\" class=\"ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk lw lx ly bh\" data-selectable-paragraph=\"\"><strong class=\"ir lt\">Consistency.<\/strong>\u00a0Global navigation controls always located in the same area, no matter what part of the app.<\/li>\n<li id=\"7302\" class=\"ip iq eo ir b fm mb it iu fp mc iw ix iy md ja jb jc me je jf jg mf ji jj jk lw lx ly bh\" data-selectable-paragraph=\"\"><strong class=\"ir lt\">Visible<\/strong>. Failing to indicate the current location is probably the single most common problem for many apps. To navigate successfully, the user should always be able to answer the question \u201cWhere am I?\u201d<\/li>\n<\/ul>\n<h1 id=\"9595\" class=\"kb kc eo av aw kd ke it kf kg kh iw ki kj kk kl km kn ko kp kq kr ks kt ku kv bh\" data-selectable-paragraph=\"\">3. Create a Seamless Experience<\/h1>\n<p id=\"caf9\" class=\"pw-post-body-paragraph ip iq eo ir b fm kw it iu fp kx iw ix iy ky ja jb jc kz je jf jg la ji jj jk do bh\" data-selectable-paragraph=\"\">Modern users have a rage of digital devices that they can use to experience your product. Desktop computer, mobile device, tablet, just to name few. As a designer, you shouldn\u2019t think of a mobile design in isolation. Creating a seamless experience across mobile, desktop and tablet is very important for your users.<\/p>\n<figure class=\"lc ld le lf lg ea da db paragraph-image\">\n<div class=\"eb ec ed ee aj ef\" role=\"button\">\n<div class=\"da db mg\">\n<div class=\"lm s ed ln\">\n<div class=\"mh lp s\">\n<div class=\"lh li t u v lj aj at lk ll\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pk ud t u v lj aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*mGJVg4teRfzvnmyQA2rFMA.jpeg\" alt=\"\" width=\"700\" height=\"369\" \/><\/div>\n<\/div>\n<\/div>\n<\/div><figcaption class=\"ei ej dc da db ek el av b em by bz\" data-selectable-paragraph=\"\">Apple Music<\/figcaption><\/figure>\n<p id=\"824e\" class=\"pw-post-body-paragraph ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk do bh\" data-selectable-paragraph=\"\">Take\u00a0<a class=\"cc gc\" href=\"http:\/\/www.apple.com\/music\/\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">Apple Music<\/a>\u00a0for example. You can set-up a playlist on your Mac and it will instantly be available on your iPhone. Apple recognizes that whilst the design of the mobile app is very important, creating a seamless experience across iPhone, desktop and iPad is just as important for users.<\/p>\n<h1 id=\"447d\" class=\"kb kc eo av aw kd ke it kf kg kh iw ki kj kk kl km kn ko kp kq kr ks kt ku kv bh\" data-selectable-paragraph=\"\">4. Design Finger-friendly Tap-targets<\/h1>\n<p id=\"6f79\" class=\"pw-post-body-paragraph ip iq eo ir b fm kw it iu fp kx iw ix iy ky ja jb jc kz je jf jg la ji jj jk do bh\" data-selectable-paragraph=\"\">Smaller touch targets are harder for users to hit than larger ones. When you\u2019re designing mobile interfaces, it\u2019s best to make your targets big enough so that they\u2019re easy for users to tap.<\/p>\n<p id=\"c7e4\" class=\"pw-post-body-paragraph ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk do bh\" data-selectable-paragraph=\"\">Create controls that measure have a size 7\u201310 mm so they can be accurately tapped with a finger. Such target allows the user\u2019s finger to fit nicely inside the touch target \u2014 users will see the borders of UI controls and will know that they\u2019re hitting the target accurately.<\/p>\n<figure class=\"lc ld le lf lg ea da db paragraph-image\">\n<div class=\"eb ec ed ee aj ef\" role=\"button\">\n<div class=\"da db mi\">\n<div class=\"lm s ed ln\">\n<div class=\"mj lp s\">\n<div class=\"lh li t u v lj aj at lk ll\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pk ud t u v lj aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*o_F6med_aCMNQ9zx3Y3tBg.png\" alt=\"\" width=\"700\" height=\"450\" \/><\/div>\n<\/div>\n<\/div>\n<\/div><figcaption class=\"ei ej dc da db ek el av b em by bz\" data-selectable-paragraph=\"\">User interface controls have to be big enough to capture fingertip actions without frustrating users with erroneous actions and tiny targets. Image credit: Apple<\/figcaption><\/figure>\n<p id=\"a1c7\" class=\"pw-post-body-paragraph ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk do bh\" data-selectable-paragraph=\"\">Also ensure that there is good amount of spacing between tap targets.<\/p>\n<h1 id=\"edef\" class=\"kb kc eo av aw kd ke it kf kg kh iw ki kj kk kl km kn ko kp kq kr ks kt ku kv bh\" data-selectable-paragraph=\"\">5. Text Content Should Be Legible<\/h1>\n<p id=\"a9be\" class=\"pw-post-body-paragraph ip iq eo ir b fm kw it iu fp kx iw ix iy ky ja jb jc kz je jf jg la ji jj jk do bh\" data-selectable-paragraph=\"\">When compared with desktops, smartphones have relatively small screens, which means that one of the challenges of mobile design is to fit a lot of information on a small UI. It\u2019s tempting to squish everything down for a mobile design in attempt to provide as much information as possible. But you should resist the temptation.<\/p>\n<p id=\"538e\" class=\"pw-post-body-paragraph ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk do bh\" data-selectable-paragraph=\"\">A rule of thumb for mobile:<\/p>\n<blockquote class=\"jm\">\n<p id=\"3813\" class=\"jn jo eo ep b jp jq jr js jt ju jk bz\" data-selectable-paragraph=\"\">Text should be at least 11 points so it\u2019s legible at a typical viewing distance without zooming.<\/p>\n<\/blockquote>\n<figure class=\"mk ml mm mn mo ea da db paragraph-image\">\n<div class=\"eb ec ed ee aj ef\" role=\"button\">\n<div class=\"da db mi\">\n<div class=\"lm s ed ln\">\n<div class=\"mp lp s\">\n<div class=\"lh li t u v lj aj at lk ll\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pk ud t u v lj aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*pPAaXsDJ0ry28_TKtQ5hCg.png\" alt=\"\" width=\"700\" height=\"409\" \/><\/div>\n<\/div>\n<\/div>\n<\/div><figcaption class=\"ei ej dc da db ek el av b em by bz\" data-selectable-paragraph=\"\">Image credit: Apple<\/figcaption><\/figure>\n<p id=\"2402\" class=\"pw-post-body-paragraph ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk do bh\" data-selectable-paragraph=\"\">You can also improve legibility by increasing line height or letter spacing. Generous whitespace not only make your text more readable but will make your interface more inviting.<\/p>\n<figure class=\"lc ld le lf lg ea da db paragraph-image\">\n<div class=\"eb ec ed ee aj ef\" role=\"button\">\n<div class=\"da db mi\">\n<div class=\"lm s ed ln\">\n<div class=\"mq lp s\">\n<div class=\"lh li t u v lj aj at lk ll\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pk ud t u v lj aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*GA1A-uNbkgVFHptbew64Hw.png\" alt=\"\" width=\"700\" height=\"462\" \/><\/div>\n<\/div>\n<\/div>\n<\/div><figcaption class=\"ei ej dc da db ek el av b em by bz\" data-selectable-paragraph=\"\"><em class=\"jv\">Good UI has a lot of breathing room.\u00a0<\/em>Image credit: Apple<\/figcaption><\/figure>\n<h1 id=\"4ed3\" class=\"kb kc eo av aw kd ke it kf kg kh iw ki kj kk kl km kn ko kp kq kr ks kt ku kv bh\" data-selectable-paragraph=\"\">6. Make Interface Elements Clearly Visible<\/h1>\n<p id=\"d42f\" class=\"pw-post-body-paragraph ip iq eo ir b fm kw it iu fp kx iw ix iy ky ja jb jc kz je jf jg la ji jj jk do bh\" data-selectable-paragraph=\"\">Users typically use mobile devices outdoor in poorly lighted placed or in sunglare. It\u2019s vital to create sufficient color contrast between elements so that users can see and use your app.<\/p>\n<figure class=\"lc ld le lf lg ea da db paragraph-image\">\n<div class=\"n bp p ar\"><img decoding=\"async\" class=\"eg\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/proxy\/1*Gbt_qjL268fxFDu7g97GMw.png\" alt=\"\" \/><\/div><figcaption class=\"ei ej dc da db ek el av b em by bz\" data-selectable-paragraph=\"\">The neutral grey of this page is pleasant to look indoors, but outdoors it looks not so good. Image credit: usertesting<\/figcaption><\/figure>\n<p id=\"2851\" class=\"pw-post-body-paragraph ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk do bh\" data-selectable-paragraph=\"\">It\u2019s especially true for elements like text\u2014make sure there is ample contrast between the font color and the background so text are legible. The W3C recommends the following contrast ratios for body text and image text:<\/p>\n<ul class=\"\">\n<li id=\"5aaf\" class=\"ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk lw lx ly bh\" data-selectable-paragraph=\"\">Small text should have a contrast ratio of at least 4.5:1 against its background.<\/li>\n<li id=\"f54d\" class=\"ip iq eo ir b fm mb it iu fp mc iw ix iy md ja jb jc me je jf jg mf ji jj jk lw lx ly bh\" data-selectable-paragraph=\"\">Large text (at 14 pt bold\/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.<\/li>\n<\/ul>\n<figure class=\"lc ld le lf lg ea da db paragraph-image\">\n<div class=\"eb ec ed ee aj ef\" role=\"button\">\n<div class=\"da db mi\">\n<div class=\"lm s ed ln\">\n<div class=\"mr lp s\">\n<div class=\"lh li t u v lj aj at lk ll\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pk ud t u v lj aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*wrJYzOH4VT3hWjLLBxk6WA.png\" alt=\"\" width=\"700\" height=\"425\" \/><\/div>\n<\/div>\n<\/div>\n<\/div><figcaption class=\"ei ej dc da db ek el av b em by bz\" data-selectable-paragraph=\"\">Text that don\u2019t meet the color contrast ratio recommendations is difficult to read against it\u2019s background. Image credit: Apple<\/figcaption><\/figure>\n<p id=\"68f7\" class=\"pw-post-body-paragraph ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk do bh\" data-selectable-paragraph=\"\">Icons or other critical elements should also use the above recommended contrast ratios.<\/p>\n<figure class=\"lc ld le lf lg ea da db paragraph-image\">\n<div class=\"eb ec ed ee aj ef\" role=\"button\">\n<div class=\"da db ms\">\n<div class=\"lm s ed ln\">\n<div class=\"mt lp s\">\n<div class=\"lh li t u v lj aj at lk ll\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pk ud t u v lj aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*YQUUqBSl1I_v4Lz6I4AqXw.png\" alt=\"\" width=\"700\" height=\"227\" \/><\/div>\n<\/div>\n<\/div>\n<\/div><figcaption class=\"ei ej dc da db ek el av b em by bz\" data-selectable-paragraph=\"\">Icons that don\u2019t follow the color contrast ratio recommendations are difficult to discern against their backgrounds. Image credit: Material Design<\/figcaption><\/figure>\n<h1 id=\"162f\" class=\"kb kc eo av aw kd ke it kf kg kh iw ki kj kk kl km kn ko kp kq kr ks kt ku kv bh\" data-selectable-paragraph=\"\">7. Design Controls Based on Hand Position<\/h1>\n<p id=\"2632\" class=\"pw-post-body-paragraph ip iq eo ir b fm kw it iu fp kx iw ix iy ky ja jb jc kz je jf jg la ji jj jk do bh\" data-selectable-paragraph=\"\">Steven Hoober in\u00a0<a class=\"cc gc\" href=\"http:\/\/www.uxmatters.com\/mt\/archives\/2013\/02\/how-do-users-really-hold-mobile-devices.php\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">his research<\/a>\u00a0on mobile devices usage, found that 49% of people rely\u00a0<em class=\"jl\">on a one thumb\u00a0<\/em>to get things done on their phones. In figure below, the diagram that appears on the mobile phones\u2019 screens are approximate reach charts, in which the colors indicate what areas a user can reach with the thumb to interact with the screen.<\/p>\n<figure class=\"lc ld le lf lg ea da db paragraph-image\">\n<div class=\"da db mu\">\n<div class=\"lm s ed ln\">\n<div class=\"mv lp s\">\n<div class=\"lh li t u v lj aj at lk ll\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pk ud t u v lj aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/474\/1*0WzaG6f9H4_OM06b7mqnPQ.png\" alt=\"\" width=\"474\" height=\"314\" \/><\/div>\n<\/div>\n<\/div><figcaption class=\"ei ej dc da db ek el av b em by bz\" data-selectable-paragraph=\"\">Comfort zones for a person\u2019s one-handed reach on a smartphone. Image Source:<a class=\"cc gc\" href=\"http:\/\/www.uxmatters.com\/mt\/archives\/2013\/02\/how-do-users-really-hold-mobile-devices.php\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">\u00a0uxmatters<\/a><\/figcaption><\/figure>\n<p id=\"9fa7\" class=\"pw-post-body-paragraph ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk do bh\" data-selectable-paragraph=\"\">Green indicates the area a user can reach easily; yellow, an area that requires a stretch; and red, an area that requires users to shift the way in which they\u2019re holding a device. Hand positions and grip should influence the placement of controls on a mobile design:<\/p>\n<ul class=\"\">\n<li id=\"71b2\" class=\"ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk lw lx ly bh\" data-selectable-paragraph=\"\">Place top-level menu, frequently-used controls and common actions to the green zone of the screen<strong class=\"ir lt\">,<\/strong><em class=\"jl\">\u00a0<\/em>because they are comfortably reached with one-thumb interactions.<\/li>\n<li id=\"7617\" class=\"ip iq eo ir b fm mb it iu fp mc iw ix iy md ja jb jc me je jf jg mf ji jj jk lw lx ly bh\" data-selectable-paragraph=\"\">Place negative actions (such as delete or erase) in the hard to reach red zone, because you don\u2019t want users to accidentally tap them.<\/li>\n<\/ul>\n<h1 id=\"4bb2\" class=\"kb kc eo av aw kd ke it kf kg kh iw ki kj kk kl km kn ko kp kq kr ks kt ku kv bh\" data-selectable-paragraph=\"\">8. Minimize Need For Typing<\/h1>\n<p id=\"58ac\" class=\"pw-post-body-paragraph ip iq eo ir b fm kw it iu fp kx iw ix iy ky ja jb jc kz je jf jg la ji jj jk do bh\" data-selectable-paragraph=\"\">Typing on a mobile is a slow and error-prone process. It\u2019s therefore best to always try to minimize the amount of typing required to use a mobile app:<\/p>\n<ul class=\"\">\n<li id=\"f967\" class=\"ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk lw lx ly bh\" data-selectable-paragraph=\"\">Keep forms as short and simple as possible by removing any unnecessary fields.<\/li>\n<\/ul>\n<figure class=\"lc ld le lf lg ea da db paragraph-image\">\n<div class=\"eb ec ed ee aj ef\" role=\"button\">\n<div class=\"da db mw\">\n<div class=\"lm s ed ln\">\n<div class=\"mx lp s\">\n<div class=\"lh li t u v lj aj at lk ll\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pk ud t u v lj aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/0*eZC07mqLMebe9XXy.png\" alt=\"\" width=\"700\" height=\"374\" \/><\/div>\n<\/div>\n<\/div>\n<\/div><figcaption class=\"ei ej dc da db ek el av b em by bz\" data-selectable-paragraph=\"\">No one likes filling in forms. And the longer or more complicated a form seems, the less likely users going to jump in and start filling in the blanks. Image credit:\u00a0<a class=\"cc gc\" href=\"http:\/\/lukew.com\/\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">Lukew<\/a><\/figcaption><\/figure>\n<ul class=\"\">\n<li id=\"2b40\" class=\"ip iq eo ir b fm is it iu fp iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk lw lx ly bh\" data-selectable-paragraph=\"\">Use auto-complete and personalized data where appropriate so that users only have to enter the bare minimum of information.<\/li>\n<\/ul>\n<figure class=\"lc ld le lf lg ea da db paragraph-image\">\n<div class=\"da db my\">\n<div class=\"lm s ed ln\">\n<div class=\"mz lp s\">\n<div class=\"lh li t u v lj aj at lk ll\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"pk ud t u v lj aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/267\/1*p-TDb7u3CTZzs5zyi4XoBA.png\" alt=\"\" width=\"267\" height=\"400\" \/><\/div>\n<\/div>\n<\/div><figcaption class=\"ei ej dc da db ek el av b em by bz\" data-selectable-paragraph=\"\">Auto-complete field for country<\/figcaption><\/figure>\n<h1 id=\"319e\" class=\"kb kc eo av aw kd ke it kf kg kh iw ki kj kk kl km kn ko kp kq kr ks kt ku kv bh\" data-selectable-paragraph=\"\">9. Optimize experience for quick sessions<\/h1>\n<p id=\"2e41\" class=\"pw-post-body-paragraph ip iq eo ir b fm kw it iu fp kx iw ix iy ky ja jb jc kz je jf jg la ji jj jk do bh\" data-selectable-paragraph=\"\">When people use mobile devices they expect to complete their tasks in the least possible amount of time. Users like quick session with minimal interaction that helps them achieve their goals\u2014set alarm, check email, reply to message shouldn\u2019t take more than a few seconds.<\/p>\n<h1 id=\"515c\" class=\"kb kc eo av aw kd ke it kf kg kh iw ki kj kk kl km kn ko kp kq kr ks kt ku kv bh\" data-selectable-paragraph=\"\">10. Test Your Design<\/h1>\n<p id=\"f9f8\" class=\"pw-post-body-paragraph ip iq eo ir b fm kw it iu fp kx iw ix iy ky ja jb jc kz je jf jg la ji jj jk do bh\" data-selectable-paragraph=\"\">All too often a mobile design looks great when viewed on a large screen of your designer but as soon as you start viewing it and interacting with the app on mobile it becomes much less satisfying. That\u2019s why it\u2019s so important to test your app with\u00a0<em class=\"jl\">real users<\/em>\u00a0on a\u00a0<em class=\"jl\">variety of mobile devices<\/em>. You should ask real users to complete regular tasks and only after that you\u2019ll see how well the design really performs.<\/p>\n<h1 id=\"1848\" class=\"kb kc eo av aw kd ke it kf kg kh iw ki kj kk kl km kn ko kp kq kr ks kt ku kv bh\" data-selectable-paragraph=\"\">Conclusion<\/h1>\n<p id=\"b60d\" class=\"pw-post-body-paragraph ip iq eo ir b fm kw it iu fp kx iw ix iy ky ja jb jc kz je jf jg la ji jj jk do bh\" data-selectable-paragraph=\"\">Just like with any other design elements, tips specified above are just a place to get started. Make sure to mix and match these ideas with your own for the best results. Just remember that\u00a0<em class=\"jl\">design isn\u2019t just for designers \u2014 it\u2019s for users.<\/em><\/p>\n<p data-selectable-paragraph=\"\">\n<p data-selectable-paragraph=\"\">Sources: <a href=\"https:\/\/uxplanet.org\/mobile-ux-design-key-principles-dee1a632f9e6\">Mobile UX Design: Key Principles. by Nick Babich | by Nick Babich | UX Planet<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The most important thing to keep in mind when designing a mobile app is to make sure it is both\u00a0useful\u00a0and\u00a0intuitive. If the app is not useful, it has no real value for user and no one has any reason to use it. If app is useful but requires a lot of time and effort, people [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":518,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/517"}],"collection":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/comments?post=517"}],"version-history":[{"count":0,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/517\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media\/518"}],"wp:attachment":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media?parent=517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/categories?post=517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/tags?post=517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}