{"id":1990,"date":"2016-06-01T17:04:07","date_gmt":"2016-06-01T17:04:07","guid":{"rendered":"https:\/\/www.searchenginewatch.com\/2016\/06\/01\/the-three-us-of-mobile-design-ux-v-usability-v-ui\/"},"modified":"2019-10-15T07:10:57","modified_gmt":"2019-10-15T07:10:57","slug":"the-three-us-of-mobile-design-ux-v-usability-v-ui","status":"publish","type":"post","link":"https:\/\/searchenginewatch.com\/2016\/06\/01\/the-three-us-of-mobile-design-ux-v-usability-v-ui\/","title":{"rendered":"The three Us of mobile design: UX v usability v UI"},"content":{"rendered":"<p><strong>Mobile design focuses, or should focus, on the user. This so-called user-centric design has generated a healthy obsession with the three Us: user experience (UX), usability and user interface (UI).<\/strong><\/p>\n<p>These terms, and the roles associated with them, are commonly mistaken and\/or used interchangeably. This is not entirely unsurprising as there are no ubiquitous definitions and some overlap.<\/p>\n<p>A useful way to approach this is to identify your typical mobile user and <u><a href=\"https:\/\/www.clickz.com\/clickz\/column\/2438404\/how-to-identify-your-mobile-audience-and-their-needs\">what they want to achieve<\/a><\/u>\u00a0from your service, then ask:<\/p>\n<ol>\n<li>Did they achieve this goal? How easily\/quickly? = <strong>Usability<\/strong>.<\/li>\n<li>Did they find using the service rewarding? = <strong>UX<\/strong>.<\/li>\n<li>How do they physically interact with the device? = <strong>UI<\/strong>.<\/li>\n<\/ol>\n<p><a href=\"http:\/\/www.rgaineswebdevelopment.com\/\">Robert Gaines<\/a>,\u00a0a Kansas, US-based web and app developer suggests adding a fourth element visual design, which is a good idea, but it would throw an unhelpful V in with the Us.<\/p>\n<blockquote><p>I would also include visual design, which ensures that static visual components, including graphics and typography, are attractive. The four are distinguished as follows:<\/p>\n<ul>\n<li>UX is about a user\u2019s overarching experience. It involves the analysis of how the user feels about both interfaces and processes, including sales funnels [the progression from prospect to customer].<\/li>\n<li>Usability is about how easy it is to complete a task.<\/li>\n<li>UI is about how a user interacts with a website.<\/li>\n<li>Visual design is about the appearance of static visual elements, including graphics and typography.<\/li>\n<\/ul>\n<p>The four fields overlap, but in summary: <a href=\"https:\/\/searchenginewatch.com\/2019\/10\/08\/how-to-fix-the-top-most-painful-ux-mistakes-examples\/\">UX<\/a> is about emotional response, usability is about ease of use, UI is about interaction, and visual design is about appearance.<\/p><\/blockquote>\n<p><strong><em>Are there examples that combine great usability with user experience?<\/em><\/strong><\/p>\n<blockquote><p>A website I recently took note of was <a href=\"https:\/\/www.amctheatres.com\/\">AMC Theatres<\/a>.\u00a0Not only is this website attractive and easy to use, it exhibits a unique form of on-boarding that is unobtrusive yet ubiquitous.<\/p>\n<p>The &#8220;My Movie&#8221; feature makes <a href=\"https:\/\/searchenginewatch.com\/2018\/12\/21\/guide-google-analytics-confusing-terms\/\">users<\/a> feel engaged while also encouraging them to sign-up for an account and share their activities on social media. This pattern takes the on-boarding funnel, often detrimental to the user experience, and turns it on its head by converting it in to an experience that customers actually enjoy using.<br \/>\n<em><br \/>\n<\/em><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.clickz.com\/wp-content\/uploads\/sites\/2\/2016\/06\/amc_mymovie_cz21.jpg\" rel=\"attachment wp-att-100972\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-100972 alignnone\" src=\"https:\/\/www.clickz.com\/wp-content\/uploads\/sites\/2\/2016\/06\/amc_mymovie_cz21.jpg\" alt=\"amc_mymovie_cz21\" width=\"550\" height=\"550\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>There are lots of different analogies for UI\/UX\/usability\/visual design, but none beats the car and driving analogy (<a href=\"http:\/\/www.baekdal.com\/insights\/usabilty-vs-user-experience-battle\">adapted from <\/a><u><a href=\"http:\/\/www.baekdal.com\/insights\/usabilty-vs-user-experience-battle\">Thomas Baekdal<\/a>).<\/u><\/p>\n<p>A Ford Focus or a Ferrari Testarossa will get you from A to B. So the usability is the similar. But the driving experience \u2013 UX \u2013 will be (you would hope) more thrilling in the Ferrari. The UI is the steering wheel, pedals, gear level etc. Visual design is the lines, dashboard, color (any color as long as it is Ferrari red).<\/p>\n<p>Depending on the size of the project, these requirements could be serviced by a team of specialists, with variety of job titles, or they could be merged into one all-encompassing role. See this <u><a href=\"http:\/\/jobs.verizon.com\/jobs\/5389493-mobile-ui-ux-designer?tm_job=425959-1A&amp;tm_event=view&amp;tm_company=781&amp;bid=0&amp;bid=326&amp;aasi=2&amp;CID=pst\">job spec<\/a><\/u>\u00a0for a superhero in charge of mobile UX and UI design and strategy for web and app at Verizon marketing.<\/p>\n<p><a href=\"https:\/\/www.clickz.com\/wp-content\/uploads\/sites\/2\/2016\/06\/ui_ux_designer_job_ad_cz21.jpg\" rel=\"attachment wp-att-100973\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-100973\" src=\"https:\/\/www.clickz.com\/wp-content\/uploads\/sites\/2\/2016\/06\/ui_ux_designer_job_ad_cz21.jpg\" alt=\"ui_ux_designer_job_ad_cz21\" width=\"650\" height=\"659\" \/><\/a><\/p>\n<h3><strong>User Interface <\/strong><\/h3>\n<p>The UI, or graphical user interface (GUI) or human computer interface (HCI), as it is sometimes known, governs how the user interacts with the device and the website or application displayed thereon. This includes layout and horizontal or vertical orientation; menus, including the main navigational menu \u2013 often represented by the three line \u201chamburger\u201d icon; navigational, link and action buttons; text fields and forms; radio buttons and checkboxes; touch and gestures.<\/p>\n<p>For deeper insight into the layouts, input controls, menus and other aspects of UI, see the <u><a href=\"https:\/\/developer.android.com\/guide\/topics\/ui\/controls.html\">Android Developer Guidelines<\/a><\/u> \u00a0and the <a href=\"https:\/\/developer.apple.com\/library\/ios\/documentation\/UserExperience\/Conceptual\/MobileHIG\">iOS Human Interface Guidelines<\/a>.<\/p>\n<p>N.B. these guides are for native app developers, but there\u2019s plenty of cross over with web.<\/p>\n<p>The UI designer will usually mockup the user interface for a mobile site or app using <u><a href=\"https:\/\/www.clickz.com\/2016\/05\/18\/the-essential-role-of-wireframes-and-flow-diagrams-in-mobile-design\">hand-drawn and digital wireframes<\/a><\/u>.<\/p>\n<p>Few designers or developers will use design mobile UI from scratch. Designers will use UX kits, see <a href=\"https:\/\/speckyboy.com\/2014\/12\/15\/top-50-web-mobile-gui-templates-2014\/\">this <u>collection<\/u>\u00a0from Speckyboy<\/a>. Similarly, developers will use frameworks such as jQuery Mobile and Sencha Touch, which allows them to reuse tried and tested UI elements and layouts.<\/p>\n<p>The art of the UI designer is to strike a balance between creating an experience that differentiates itself from the competition and creating a UI that is intuitive i.e. you don\u2019t have to think about how to use it.<\/p>\n<p>There is a UI saying goes: A user interface is like a joke\u2026 If you have to explain it, it\u2019s not that good. It\u2019s unclear who said this first, but the design below is from London-based digital designer <u><a href=\"https:\/\/www.behance.net\/gallery\/23236961\/Typographic-Prints\">Kyle Robertson<\/a>.<\/u><\/p>\n<p><a href=\"https:\/\/www.clickz.com\/wp-content\/uploads\/sites\/2\/2016\/06\/user_interface_joke_robertson_cz21.jpg\" rel=\"attachment wp-att-100974\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-100974\" src=\"https:\/\/www.clickz.com\/wp-content\/uploads\/sites\/2\/2016\/06\/user_interface_joke_robertson_cz21.jpg\" alt=\"user_interface_joke_robertson_cz21\" width=\"650\" height=\"758\" \/><\/a><\/p>\n<p><a href=\"https:\/\/www.linkedin.com\/in\/ginnykeegan\">Ginny Keegan<\/a>,\u00a0senior business analyst for a large US retailer:<\/p>\n<blockquote><p>The UI is a critical component. It\u2019s like the foundation of a house. You must have a solid and strong foundation that will support the beams, flooring, walls and roof, without it your house will collapse.<\/p>\n<p>It\u2019s the same thing in mobile <a href=\"https:\/\/searchenginewatch.com\/2019\/02\/06\/using-python-to-recover-seo-site-traffic-part-one\/\">development<\/a>. You have to start with a solid foundation architecture, database structure, security, etc. that will support the overall user experience of the site. You cannot have one without the other.<\/p><\/blockquote>\n<h3><strong>Usability <\/strong><\/h3>\n<p>Usability builds on the UI. It measures how well the interface works in practice \u2013 i.e. is it clear which buttons need to be tapped to proceed to the next screen? Is it easy to tap the appropriate button without unintentionally tapping the display ad next to it?<\/p>\n<p>But usability is much more than this. It also considers how easy it is for the user to complete their goal. To evaluate this, it is essential to identify the actual goals of the users. This is why good mobile designers obsess about <u><a href=\"https:\/\/www.clickz.com\/2016\/05\/05\/journey-into-the-unknown-with-the-mobile-customer-journey\">use cases, user stories, customer journeys and user journeys<\/a>,<\/u>\u00a0and so should you.<\/p>\n<p>Compared with UX, usability is more easily quantifiable.<\/p>\n<p>Usability is affected by:<\/p>\n<ul>\n<li>Fast v. slow page load times.<\/li>\n<li>Intuitive v. confusing navigation.<\/li>\n<li>Obvious, well-placed buttons v. unintuitive, ill-placed or non-working buttons.<\/li>\n<li>Large well-spaced buttons or links that are easy to tap v. buttons are too small or close together to tap accurately.<\/li>\n<li>Page fits screen, all important information and buttons are in view v. off screen to right or below fold.<\/li>\n<li>Easy to read v. illegible text<\/li>\n<li>Well-chosen and appropriately sized images v. irrelevant and oversized.<\/li>\n<li>Tap-to-call\/email\/map v. static contact details.<\/li>\n<li>Relevant, appropriately sized ads v. large, intrusive and\/or irrelevant ads.<\/li>\n<\/ul>\n<p>In the next blog we will consider how to conduct a usability test of your website. But as a taster\u2026<\/p>\n<p>The following example was highlighted at the <a href=\"http:\/\/digitalshiftevents.com\/\">Digital Shift conference<\/a> in London, last month. One presenter complained that they started to view the <a href=\"http:\/\/startups.co.uk\/startups-100\/2016\/\">UK\u2019s 100 winning startups<\/a> on a mobile device, but received full-screen pop-up ads for each (he gave up after two pages).<\/p>\n<p>The interesting thing when comparing the experience on tablet and smartphone, the 100 Startups using <a href=\"https:\/\/mobile1st.com\/\">Mobilizer<\/a>\u00a0is that full screen ads only appear to be served to mobile devices \u2013 ads on the tablet are less intrusive.<\/p>\n<p><a href=\"https:\/\/www.clickz.com\/wp-content\/uploads\/sites\/2\/2016\/06\/100_startups_cz21.jpg\" rel=\"attachment wp-att-100975\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-100975\" src=\"https:\/\/www.clickz.com\/wp-content\/uploads\/sites\/2\/2016\/06\/100_startups_cz21.jpg\" alt=\"100_startups_cz21\" width=\"650\" height=\"713\" \/><\/a><\/p>\n<h3><strong>Must it be function v beauty?<\/strong><\/h3>\n<p>Focusing on usability can encourage utilitarian design, i.e. minimalist, simplicity, functional and stripping out features that are simply there to enhance visual appeal and wow the audience. Though it has to be said that the best utilitarian mobile web or apps, like Scandinavian furniture, can be a thing of beauty and enjoyment.<\/p>\n<p><a href=\"http:\/\/www.targetinternet.com\/daniel-rowles-biography\/\">Daniel Rowles<\/a>, managing director, TargetInternet.com:<\/p>\n<blockquote><p>Usability is about task-based interactions and making those tasks easy to complete and intuitive. The User Experience is something broader and is the emotional connection that we have to carrying out those tasks. Was it meaningful and valuable, and was it a pleasurable experience?<\/p><\/blockquote>\n<p><strong><em>Are there examples that combine great usability with user experience?<\/em><\/strong><\/p>\n<blockquote><p>Uber is a good example due to the simplicity and effectiveness of the app design. It has a wow factor in its simplicity and it\u2019s very intuitive.<\/p><\/blockquote>\n<p>It should be noted, however, that taxi app Uber has not yet chosen to extend the great experience of its native app to the mobile web, where the web site is no more than an advertisement for its download app.<\/p>\n<h3><strong>User experience<\/strong><\/h3>\n<p>UX is the over-arching feeling that the user gains from interacting with the mobile site (or app). It is less tangible, more individual and therefore harder to design for and to test than usability.<\/p>\n<p>Commonly, usability is considered to be a sub-category of UX.<\/p>\n<p>One of the best visual representations of UX is the <a href=\"http:\/\/semanticstudios.com\/user_experience_design\/\">user experience honeycomb<\/a>,\u00a0created by Peter Morville, president, Semantic Studios. This was originally created for web product, but each of these criteria is equally or more applicable to mobile.<\/p>\n<p>Consider how your website resonates with the users for each of the following:<\/p>\n<ul>\n<li>Useful \u2013 will it become an essential utility that users can live without?<\/li>\n<li>Usable \u2013 is it intuitive to use? Is it easy for user to complete their goals?<\/li>\n<li>Desirable \u2013 when they hear about it from a friend, do they think: \u201cI need that!\u201d?<\/li>\n<li>Findable \u2013 is it easy to find when conducting a web search for relevant terms (or app store search)? Is it easy to navigate, find what you need on the site?<\/li>\n<li>Credible \u2013 is the <a href=\"https:\/\/searchenginewatch.com\/2019\/05\/22\/nine-types-of-meta-descriptions-that-win-more-clicks\/\">call-to-action<\/a> compelling? Will users trust the content onsite?<\/li>\n<li>Accessible \u2013 is the site easy to use by people with disabilities; such as visually impaired person using a screen reader.<\/li>\n<li>Valuable \u2013 will users pay, trade personal data, accept advertising in return for use?<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.clickz.com\/wp-content\/uploads\/sites\/2\/2016\/06\/honeycomb_morville_cz21.jpg\" rel=\"attachment wp-att-100976\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-100976\" src=\"https:\/\/www.clickz.com\/wp-content\/uploads\/sites\/2\/2016\/06\/honeycomb_morville_cz21.jpg\" alt=\"honeycomb_morville_cz21\" width=\"650\" height=\"500\" \/><\/a><\/p>\n<p>Ginny Keegan:<\/p>\n<blockquote><p>The user experience is important to define in your strategy because it is what the user will remember the most when they use your mobile site or app. The UX is more about the emotion and psychology of the user; it\u2019s about the feeling they get when they are browsing though and swiping from page to page.<\/p>\n<p>In mobile development it is important that the user has a positive, easy and enjoyable feeling when using your product. You want them to feel a joyful emotion or happy experience and a stress free and no struggle experience.<\/p><\/blockquote>\n<p><strong>Useful resources:<\/strong><\/p>\n<ul>\n<li>DigitalGov\u00a0<u><a href=\"http:\/\/www.digitalgov.gov\/resources\/mobile-user-experience-guidelines-and-recommendations\/\">42 mobile user experience recommendations<\/a><\/u>\u00a0\u2013 these are digital guidelines for US government departments. Treat them as law.<\/li>\n<li><u><a href=\"http:\/\/www.usability.gov\">Usability.gov Basics of user experience<\/a><\/u> \u00a0\u2013 these guidelines from the U.S. Health Department are not mobile specific, but very useful.<\/li>\n<\/ul>\n<p><strong>This is Part 21 of the\u00a0ClickZ\u00a0\u2018DNA of mobile-friendly web\u2019 series.<\/strong><\/p>\n<p>Here are the recent ones:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.clickz.com\/2016\/05\/25\/mobile-design-and-the-art-of-doing-one-thing-wel\">Mobile design and the art of doing one thing well<\/a><\/li>\n<li><a href=\"https:\/\/www.clickz.com\/2016\/05\/18\/the-essential-role-of-wireframes-and-flow-diagrams-in-mobile-design\">The essential role of wireframes and flow diagrams in mobile design<\/a><\/li>\n<li><a href=\"https:\/\/www.clickz.com\/2016\/05\/05\/journey-into-the-unknown-with-the-mobile-customer-journey\">Understanding the mobile customer journey and user journey; use cases and user stories<\/a><\/li>\n<li><a href=\"https:\/\/www.clickz.com\/2016\/04\/21\/getting-to-grips-with-mobile-design-methods-and-lingo-empathy-maps-and-storybo\">Getting to grips with mobile design methods and lingo: empathy maps and storyboards<\/a><\/li>\n<li><a href=\"https:\/\/www.clickz.com\/2016\/04\/14\/the-key-ingredients-of-mobile-design-and-ux-methodology\">The key ingredients of mobile design and UX methodology<\/a><\/li>\n<li><a href=\"https:\/\/www.clickz.com\/2016\/04\/07\/why-user-testing-should-be-at-the-forefront-of-mobile-development\">Why user testing should be at the forefront of mobile development<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Mobile design focuses, or should focus, on the user. This so-called user-centric design has generated a healthy obsession with the three Us: user experience (UX), usability and user interface (UI). These terms, and the roles associated with them, are commonly mistaken and\/or used interchangeably. This is not entirely unsurprising as there are no ubiquitous definitions [&hellip;]<\/p>\n","protected":false},"author":1092,"featured_media":1991,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[275,1545,800,183],"content_type":[27095],"class_list":["post-1990","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","tag-mobile-design","tag-ui","tag-usability","tag-ux","content_type-news"],"acf":{"tad_independentcommercial":false,"tad_content_format":false},"post_info":{"name":"idris.nagri@blenheimchalcot.com idris.nagri@blenheimchalcot.com","title":"","thumbnail_url":"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2018\/10\/honeycomb_morville_cz21-120x90.jpg","category":"Mobile","timeago":"10y"},"_links":{"self":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts\/1990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/users\/1092"}],"replies":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/comments?post=1990"}],"version-history":[{"count":0,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts\/1990\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/media\/1991"}],"wp:attachment":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/media?parent=1990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/categories?post=1990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/tags?post=1990"},{"taxonomy":"content_type","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/content_type?post=1990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}