User Interface

From BC$ MobileTV Wiki
Jump to: navigation, search

A User Interface (commonly abbreviated as UI) is a visual or textual tool for interacting with a device through its hardware or software.


UIs

Desktop

The Desktop is the traditional computer screen powered by a laptop or tower/monitor combination, designed for screens that are typically 14" and up.

Web

As a subset of the Desktop experience, Web UIs are typically accessed on the Desktop, albeit via a Browser application which takes over the user experience and provides instant access to virtually any WebApp, Web Service or website. Web UIs have all the same properties as Desktop UIs

Mobile

The so-called "2nd screen" has quickly become the "1st screen" in terms of popularity and widespread usage worldwide. The mobile device has overtaken Desktop computers and TVs in the number of devices in use. Furthermore, the growth rate of sales of internet-connected Mobile Phones (or "Smartphones") is now outpacing regular Mobile Phones which provide just basic voice services for making calls[1] and in some countries, web access by Mobile Phone is even beginning to surpass the Desktop[2].

Tablets

As a subset of Mobile Devices, Tablets are slightly larger than traditional Mobile Phones (aka cellphones) however of late, the line between Mobile and Tablet has become increasingly blurred as Mobile Phones now support almost all (if not in some cases more) functionality that Tablets support. In any case, the fundamental quality that designates a device as a Tablet is a larger viewing/reading display screen, typically with higher resolution, more optimized flicker & refresh rate for long periods of viewing/reading and possibly further retina display or DPI optimizations for optimal viewing without tiring its users' eyes; a secondary feature is more storage and faster (and therefore more expensive) graphics processors and memory for handling more intensive applications than most other Mobile Devices.

TV

The emerging "3rd screen" is the one which is already most well-established within households and living rooms all over the world, the Television. This screen's viewing and interaction experience is typically characterized as "lean-back" and sometimes referred to as the 10-foot experience, as in the user/viewer is typically at least 10 feet away from the screen (making touch-screen interfaces impractical unless there is a touch-screen remote control or an integration between existing devices such as Mobiles and Tablets). Another nalogy for the 10-foot UI is that it should look good from 21" (the average laptop/desktop monitor size) up to 120" (or 10'). This UI is typically characterized by its simplistic interface with much larger font sizes, fewer images/icons and trimmed down menu options (leading to simpler controls and overall HCI).


UX

User eXperience (commonly abbreviated as UX) is an important measurement and design criteria for any modern UI, and defines the overall quality of the interactions between the human user and a particular system's UI including their ease of retrieving information, navigation between different screens or modes, ability to quickly setup, configure and adjust settings, an overall satisfaction with the use of a piece of technology demonstrating or requiring a layer of human interaction for its use.

[3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26] [27] [28] [29] [30]

Laws of UX

[31] [32] [33] [34] [35]

10ft UX

The 10 foot User Experience (i.e. Home Theatre & Living Roomm, Business projection situations, etc).


Navigation

Cite error: Closing </ref> missing for <ref> tag [36] [37] [38] [39]


Customer Journey mapping

Registration flows

Ease of joining.

Login flow

Ease of securely accessing private, protected, privileged, personalized and/or metered content or data.

[40] [41] [42] [43] [44] [45] [46] [47] [48] [49]

Payment flows
Funding flow

Money IN.

Withdrawal flow

Money OUT.


Account Termination flows

Ease of leaving.

Account Suspension flow

Investigations/suspensions (ToS breach, abuse, hacked, suspicious activities, bots, invalid/incomplete account, lapsed account, etc).

Account Export flow

In-line with Data Portability and/or local Security & Privacy laws.

Account Pause flow

Pausing payments, account archival, or "soft delete".

Account Delete flow

Request and process to completely delete an account from cloud servers per customer data privacy/security laws.


UCD

UED

UXA

User experience assessment (UXA, also referred to as User experience evaluation).

Tools

Desktop

Glade

GWT

[50]

Sketching


Resources


Tutorials


External Links


References

  1. ↑ Worldwide Mobile Phone Market Grew Nearly 20% in the First Quarter; Smartphones and Vendors Outside the Top 5 Keys to Growth, According to IDC: http://www.businesswire.com/news/home/20110428007553/en/Worldwide-Mobile-Phone-Market-Grew-20-Quarter
  2. ↑ Web access via mobile phone trumps PC in China: report: http://www.reuters.com/article/2012/07/19/us-china-internet-idUSBRE86I0FC20120719
  3. ↑ Four Things Working at Facebook Has Taught Me About Design Critique: https://medium.com/facebook-design/critique-is-an-important-part-of-any-design-process-whether-you-work-as-part-of-a-team-or-solo-ef3dcb299ce3
  4. ↑ The Product Guy’s Great in ‘08: http://tpgblog.com/2008/12/31/2008-top-5/
  5. ↑ How To Source, Vet, Hire, and Work With UX Designers: https://hackernoon.com/how-to-source-vet-hire-and-work-with-ux-designers-a3ec8506cab9
  6. ↑ Creating Usability with Motion - The UX in Motion Manifesto: https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
  7. ↑ 10 must have skills for UX designers: https://medium.com/@justinmind/10-must-have-skills-for-ux-designers-eb963cbf0f90
  8. ↑ The Ultimate Collection of Prototyping Tools for UX/UI Designers: https://hackernoon.com/the-ultimate-collection-of-prototyping-tools-for-ux-ui-designers-3029faf047f4
  9. ↑ Good to great UI/UX animation tips: https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
  10. ↑ What is Interaction Design And How it Works?: https://hackernoon.com/what-is-interaction-design-and-how-it-works-c4ef0510d0d6
  11. ↑ 7 Rules for Creating Gorgeous UI (Part 1) -- A non-artsy primer in digital aesthetics: https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
  12. ↑ 7 Rules for Creating Gorgeous UI (Part 2) -- A guide to visual aesthetics, written by a nerd: https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96
  13. ↑ Is UX Becoming an Industry Buzzword?: https://www.mockplus.com/blog/post/is-ux-becoming-an-industry-buzzword/
  14. ↑ Gestalt Theory for Efficient UX - Principle of Similarity: https://tubikstudio.com/gestalt-theory-for-efficient-ux-principle-of-similarity/
  15. ↑ Seeing the road ahead — Catseyes and iterative design: https://blog.scottlogic.com/2020/09/25/Iterative-design-catseyes.html
  16. ↑ UX writing -- a comprehensive guide for designing text in mobile apps: www.mobilespoon.net/2018/11/ux-writing-comprehensive-guide-for.html
  17. ↑ How to handle the on-screen keyboard without messing up your app usability: https://www.mobilespoon.net/2018/12/10-usability-rules-keyboard-mobile-app.html
  18. ↑ The Slippery Slope of In-Product Messaging: https://matthewstrom.com/writing/wayfinding.html
  19. ↑ If It Needs a Sign, It’s Probably Bad Design: https://www.propublica.org/article/if-it-needs-a-sign-its-probably-bad-design
  20. ↑ Why Product Thinking is the next big thing in UX Design: https://medium.com/@jaf_designer/why-product-thinking-is-the-next-big-thing-in-ux-design-ee7de959f3fe#.h67x8cgcc
  21. ↑ What, exactly, is a Product Manager?: https://www.mindtheproduct.com/what-exactly-is-a-product-manager/
  22. ↑ Changing the Conversation about Product Management vs. UX: https://medium.com/@melissaperri/labeling-ourselves-17218fd4456f
  23. ↑ MVPM -- Minimum Viable Product Manager: https://blackboxofpm.com/mvpm-minimum-viable-product-manager-e1aeb8dd421
  24. ↑ Four Skills a Business Designer Needs to Master: https://medium.muz.li/four-skills-a-business-designer-needs-to-master-2a03569f7e43
  25. ↑ So you want to be a UX designer…A guide on how to get started: https://medium.com/@suelynyu/so-you-want-to-be-a-ux-designer-c3370d8ea14e#.ucoiqfdk2
  26. ↑ UX Design Interview Questions -- How to Prepare: https://insights.dice.com/2019/12/31/ux-design-interview-questions-prepare/
  27. ↑ Usability -- A part of the User Experience: https://www.interaction-design.org/literature/article/usability-a-part-of-the-user-experience
  28. ↑ What is User Experience (UX) design?: https://www.interaction-design.org/literature/topics/ux-design
  29. ↑ Why logout pages matter: https://bootcamp.uxdesign.cc/why-logout-pages-matter-b812a77f23a0
  30. ↑ The UX Logout Lapse: https://usabilitygeek.com/ux-logout-lapse/
  31. ↑ The Most Important Rule in UX Design that Everyone Breaks: https://blog.prototypr.io/the-most-important-rule-in-ux-design-that-everyone-breaks-1c1cb188931
  32. ↑ The Tried and True Laws of UX (with Infographic): https://www.toptal.com/designers/ux/laws-of-ux-infographic
  33. ↑ User Interface Principles Every Designer Must Know: https://www.nngroup.com/courses/hci/
  34. ↑ UX Laws with practical examples: https://medium.com/swlh/ux-laws-with-practical-examples-c418b4738d20
  35. ↑ How to use design psychology for compelling UX: https://www.usertesting.com/blog/design-psychology-ux
  36. ↑ UI/UX Principle #23 -- Flatter Navigation is Better Than Deeper Navigation: https://www.freshconsulting.com/insights/blog/uiux-principle-23-flatter-navigation-is-better-than-deeper-navigation/
  37. ↑ UI Patterns for good "Navigation" UX: https://usabilitygeek.com/ui-patterns-for-navigation-good-ux/ (animated GIFs of common navigation modalities)
  38. ↑ 5 examples of common UI Patterns - to achieve Navigation That Makes Good UX Sense: https://uxplanet.org/5-ui-patterns-navigation-that-makes-good-ux-sense-92a65df7485d
  39. ↑ 3 modern alternatives to tree navigation: https://www.justinmind.com/blog/3-modern-alternatives-to-tree-navigation/
  40. ↑ Login/sign-up in modal dialogs: https://ux.stackexchange.com/questions/10869/login-sign-up-in-modal-dialogs (in a 2011 study, only ~7% of top 100 high profile E-Commerce websites had sign up forms in a modal dialog, majority of the rest ~79% use a dedicated Login/Sign-up page, other ~16% use different mechanisms like hiding in slide-out/slide-down menu, hamburger menus, "always-visible in header/menu" like Facebook, etc)
  41. ↑ Is it reasonable to use popups for Single Sign On?: https://ux.stackexchange.com/questions/126886/is-it-reasonable-if-we-use-popup-mode-for-single-sign-on
  42. ↑ Login Walls Stop Users in Their Tracks: https://www.nngroup.com/articles/login-walls/
  43. ↑ Login Page Design: Do’s and Don’ts: https://wpamelia.com/login-page-design/
  44. ↑ Modal & Nonmodal Dialogs: When (& When Not) to Use Them: https://www.nngroup.com/articles/modal-nonmodal-dialog/
  45. ↑ 16 Simplistic "Mobile-first" Signup/Login Best Practices Every App Developer Need to Know: https://www.mockplus.com/blog/post/sign-up-login-design-practices
  46. ↑ Innovative Techniques To Simplify Sign-Ups And Log-Ins: https://www.smashingmagazine.com/2011/05/innovative-techniques-to-simplify-signups-and-logins/
  47. ↑ 20 Great Sign Up Form Examples to Learn From: https://designshack.net/articles/inspiration/20-great-sign-up-form-examples-to-learn-from/
  48. ↑ Centralized Universal Login vs. Embedded Login : https://auth0.com/docs/universal-login/universal-vs-embedded-login
  49. ↑ Interstitial vs Popup vs Modal: https://digitalstride.net/2015/07/02/interstitial-vs-popup-vs-modal/
  50. ↑ wikipedia: Google Web Toolkit
  51. ↑ Weather app: http://code.google.com/p/gtvdemos/source/browse/trunk/static/css/weather.css?r=5

See Also

GUI | HCI | A11Y | VR | Design | Testing | Taxonomy

Retrieved from "http://wiki.bcmoney-mobiletv.com/index.php?title=User_Interface&oldid=60448"