UX Usability Heuristics

  • View
    47

  • Download
    0

Embed Size (px)

Transcript

  • LA WORDPRESS

    UX SESSIONS

    1. USABILITY

    TIAGO GONCALVES, 2017

    A.

    B.

    C.

    D.

    E.

    IMPORTANCE OF USABILITY

    LAWS OF USABILITy

    10 USABILITY HEURISTICS

    UI TERMINOLOGY

    CONCLUSION

  • A. IMPORTANCE OF USABILITY

    USER-

    CENTERED

    APPROACH This is how the user sees it

    USER

    EXPERIENCE

    IS ABOUT

    HAVING

    EMPATHY FOR

    THE USER

    A. IMPORTANCE OF USABILITY

  • Common usability user concerns

    o Where do I start? o Why did they do that? Why did they call it that? o Can I click on that? o Those two links seem like theyre the same thing. Are they really? o Why did they put that there? o Words Im looking for are not there o Theres too much going on. What are the most important things on

    this page? o Is that an ad or part of the site?

  • Common usability user challenges

  • If you include many choices on said

    pages, youll make it harder for your site visitors and leads to make a

    decision, which can cause lost

    conversions and unhappy clients!

  • Satisficing-Muddling through

    What really happens?

    Users dont read, they SCAN

    Dont really need to read everything Read in a hurry

    Users often dont take the time to figure out how things work and make the optimal choices - often choose the first reasonable option satisfice

    Wed like to think

    users will read our

    site from top to

    bottom, then make

    choices.

  • Satisficing-Muddling through

  • Satisficing-Muddling through

    Context

    Users Content

    On the internet, the competition is

    always just one click away, so if you frustrate users

    theyll head somewhere else.

  • USABILITY

    USER EXPERIENCE

    Usability means making sure something works well, and that a person of average ability or experience can use it for its intended purpose without getting hopelessly frustrated

    Steve Krug

    USABILITY

    IS CORE TO

    USER

    EXPERIENC

    E

    B. LAWS OF USABILITY

  • Purpose and Strategy: What is the purpose of the webpage? Pages should have a clear visual

    hierarchy: Elements should display a logical order, and have relationships to one another

    A Web page it should be self-evident. Obvious. Self-explanatory. Content, Navigation, Interaction: Relevant pages should never be more than two clicks away, if really

    essential to have more, each click should be is a mindless, unambiguous choice until the goal.

    Dont lose search: search-dominant users will almost always look for a search box as they enter a site or breadcrumb navigation path

    Steve Krugs Laws of Usability

  • Steve Krugs Laws of Usability

    Presentation/User Interface Design: Tweak, dont redesign: Innovate only when you

    really have a better idea

    Making everything easier to use for user

    Best solution is removing something, not adding something

    Focusing on can this be used when its done? rather than just making it look good.

    Ideally strategize page based on consumers insights throughout the development cycle

  • Steve Krugs Laws of Usability Accessibility #1. Fix the usability problems that confuse users: broken links, errors in forms, inadequate on page search results #2. Apply Image Alt Tags : good for visually impaired users and SEO (increasing changes coming from Google Images Organic Traffic

    #3 Use CSS when appropriate: Infinitely greater control of formatting. A single change in a style sheet can change the appearance of an entire site Consistent among browsers. Allow to put content in sequential order in the source file. CSS makes it easy to make your text resizable, which is enormously helpful for

    low-vision users

  • Steve Krugs Laws of Usability

    Accessibility #4. Dont use JavaScript without a good reason. Not SEO friendly language

    JavaScript loaded parts of a website might not be indexed by Search Engines. Making sure that search engine bots can see your content, and making sure they can see and follow your navigation is crucial. Viewing a site as text-only (lynx or elinks) can also help you identify other content which may be hard for Googlebot to see

    Hurts webpage loading time/ performance: Webmasters who use AJAX to load multiple parts of their website in separate requests so that the web browser is tricked into thinking that the website is loaded after the first request of HTML ,but this will slow down the actual loading of the website.

  • USABILITY IS

    ABOUT THE USER

    GETTING THE

    TASK DONE

    On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave.

    -Jakob Nielsen

    SIMPLE & INTUITIVE

  • TURN

    LEFT TURN LEFT

    Jakob Nielsens

    THE 10 UX

    PRINCIPLES FOR

    USABILITY

    C. 10 USABILITY HEURISTICS

    Visitors to a webpage tend to interact with it based on

    recognized design principles/heuristics

  • Jakob Nielsen THE Usabilty Guru

    Jakob Nielsens

    THE 10 UX

    PRINCIPLES FOR

    USABILITY

    Published by Jakob Nielsen in 1995 Widely accepted and still holds true today. Other variation models exist

  • 1 SHOW SYSTEM STATUS

    EXAMPLES: Active Menu item, Step wizards, Loading animations, Progress bars, Cart indicator, Password strength (dynamic validation) Confirmation messages Pagination Document opened by same person.

    Post locking

    Dynamic breadcrumbs

    Second states for

    immediate user

    feedback (Active or

    On Press/hover)

  • 2 MATCH BETWEEN

    SYSTEM AND REAL

    WORLD

    Icons, Folder, tabs, radio,Mail badge/ notification, Pagination, Save icon, Gauge meter, Switch toggle Cropping tool behaviour, Trash Text> human language Categories naming WYSIWYG

    Tab behavior

    Save icon

    Icons in general

    Human Computer Interaction (HCI)

  • 3 CONTROL AND FREEDOM

    Emergency exit!

    CRUD (Create, Read, Update, Delete) Quit, cancel, remove, go back Skip intro, Read later, update later Explore and advanced filters Edit plugin/theme Search!

  • the menu burger icon (use with caution)

    Consistent layout positioning

    UI kit as tool box

    Do not override established standards (Radio vs. Checkbox functionality, * required field)

    4 CONSISTENCY AND STANDARDS

    Hyperlink underline Hierarchy Interactive elements buttons Navigation standards TRUST: branding and photos Layout positioning Consistent choices and language

  • wordpress.org/plugins/ecwid-shopping-cart/

    If returning to a cart later help user products added and also promotes trust.

    Date pickers Maps with lists

    5 RECOGNITION OVER RECALL

    TURN

    LEFT TURN LEFT

    Avoid extra hurdles Legend vs. Visual both Font drop list preview Hybrid bread crumbs

    SHOW and tell

  • 6 ERROR PREVENTION

    Eliminate error prone conditions

    https://github.com/kbwood/datepick

    Reduce bad input Confimation validation Dynamic form validation constrained options where relevant Auto-fill, auto-complete, auto-suggest Paste from Word (format stripping) Previews

  • 7 FLEXIBILITY AND EFFICIENCY

    http://theme.wordpress.com/themes/illustratr/

    Offer accelerators customize experience for efficiency

    EXAMPLES:

    Keyboard to nav (accesibility) Shotcut keys One click buy Screen options Wordpress 5 minute install

    http://theme.wordpress.com/themes/illustratr/

  • 8 AESTHETIC AND MINIMALIST DESIGN

    Reduce unessesary elements.

    The more elements are competing with relevant information.

  • Help users recognize, diagnose and recover from errors.

    Notification wells Error tips 404 offer solutions Mature and empathetic error

    messages

    9 HELP USERS WITH ERRORS

  • 10 HELP AND DOCUMENTATION and make it easy

    CODEX, Code Poet Community answers, BuddyPress Online resources Google your issue FAQ, Knowledge base Customer service, Twitter Hyperlinks in contents to references Guided tours, First time hints

  • Visibility of

    system status

    1

    Error prevention

    6

    Flexibility and

    efficiency of use

    7

    Aesthetic and

    minimalist design

    8

    Help users with

    errors.

    9

    Help and

    documentation

    10

    Match between

    system + real world

    2

    User control

    and freedom

    3

    Consistency

    and standards

    4

    Recognition

    rather than recall

    TURN

    LEFT TURN LEFT

    5

  • http://www.website.com

    ABOVE THE FOLD VIEW PORT

    Visible screen area size without browser elements

    (Header, sides and bottom)---

    Visible area before scrollling cut-off line.

    D. UI TERMINOLOGY

    http://www.website.com/

  • http://www.website.com http://www.website.com

    CAKE LAYERS

    TIP:

    To avoid false

    floor factor:

    Have content

    or decorative

    elements

    bleed into

    next cake

    layer

    Simple layout that works well with responsive web.

    CONTENT

    MISSED CONTENT

    MISSED CONTENT

    MISSED CONTENT

    MISSED CONTENT

    MISSED CONTENT

    Bleed Device

    FALSE FLOOR When there is a lack of visual

    cues to