Design For The Act Of Communication

The usability and user experience are both identical aspects. Simple usability improvements can greatly increase your website's chances of success. As a designer, it is therefore vital to consider usability as an obvious process and include it in your workflow as soon as possible.
Through the talk, we will see how you can implement smart design decisions which will significantly improve the usability of your website, while at the same time will make the user experience more enjoyable.

Transcript

1. VASILIS BAIMAS
   1
   WORDCAMP GREECE 2021
   Design ∩ Research ∩ Product
   “Design For
   Th
   e Act Of Communication”
   

   View Slide

2. 2
   Vasilis Baimas
   Web Designer
   Visual Designer
   UX Designer
   

   View Slide

3. View Slide

4. View Slide

5. 5
   User Experience Design
   Is Everywhere.
   

   View Slide

6. 6
   De
   fi
   nition of User Experience
   
   
   User experience refers to a person's
   subjective feelings and attitudes when
   using or interacting with a particular
   product, such as an app or site.
   

   View Slide

7. 7
   Good Example of User
   Experience
   
   
   Parking Lots.
   Copyright : Yael Ben-David
   

   View Slide

8. 8
   Bad Example of User
   Experience
   
   
   Bike Road and Sign.
   Copyright : Vasilis Baimas
   

   View Slide

9. 9
   Th
   e Basic Aspect of UX
   
   
   Usability
   It is useful
   
   
   to me. It meets my
   
   
   needs.
   Desirability
   Utility
   Brand Experience
   I am able to use the
   product easily.
   I like the way the
   product looks and feel.
   My overall feeling about the
   brand/product (in the
   abstract) is good.
   (Source: user experience, 2008 mGroup Conference Amsterdam)
   

   View Slide

10. 10
    De
    fi
    nition of Usability
    
    
    Usability is a quality attribute that assesses how
    easy user interfaces are to use.
    FFFEFC
    

    View Slide

11. 11
    Good Examples of Usability
    
    
    FFFEFC
    Carelman Pot.
    Google Search Engine.
    

    View Slide

12. 12
    Bad Example of Usability
    
    
    Touchpad on Laptop.
    Copyright : Doug Collins
    

    View Slide

13. 13
    Th
    e Outcome
    
    
    Usability comes to one question :
    Does your site provide an e
    ff i
    cient and enjoyable user experience?
    FFFEFC
    

    View Slide

14. 14
    Learnability
    #1
    How easy is it for users to accomplish
    basic tasks the first time they encounter
    the design?
    Key Quality Components
    
    
    

    View Slide

15. 15
    E
    ffi
    ciency
    #2
    Once users have learned the design, how
    quickly can they perform tasks?
    Key Quality Components
    
    
    

    View Slide

16. 16
    Memorability
    #3
    When users return to the design after a
    period of not using it, how easily can they
    re-establish proficiency?
    Key Quality Components
    
    
    

    View Slide

17. 17
    Errors
    #4
    How many errors do users make, how
    severe are these errors, and how easily
    can they recover from the errors?
    Key Quality Components
    
    
    

    View Slide

18. 18
    Satisfaction
    #5
    How pleasant is it to use the design?
    Key Quality Components
    
    
    

    View Slide

19. 19
    88% Less likely to return to a
    
    
    site after a bad user experience.
    

    View Slide

20. 20
    If your site is hard to use then the people will leave.
    

    View Slide

21. View Slide

22. 22
    Simplicity
    #1
    

    View Slide

23. 23
    • Make your user to get from point A (the
    entry point) to point B (where they
    want to be) as quickly as possible.
    Site Layout
    
    
    • Clear hierarchical structure.
    • Make your layout clean with all the
    essential info.
    

    View Slide

24. 24
    • A web page without any images is very
    boring and hard to read.
    • Include images to supporting your
    content.
    Images
    
    
    

    View Slide

25. 25
    Familiarity
    #2
    

    View Slide

26. 26
    • Make navigation simple.
    Complex Navigation
    
    
    • Group relevant pages together in a
    submenu.
    

    View Slide

27. 27
    • Helps to emphasize particular elements
    that require deep attention from users.
    White Space (negative space)
    • Include “white space” in your content,
    images, brand.
    

    View Slide

28. 28
    • Avoid cluttered content.
    • Keep carefully balance graphics and
    content.
    Layout
    
    
    • Don't use unusual layouts.
    

    View Slide

29. 29
    Design Considerations
    #4
    

    View Slide

30. 30
    Layout Colors
    
    
    • The colors deliver readability.
    • Don’t use to many and bright colors.
    • Use tints of a single color.
    • Colors needs to develop an aesthetic
    appeal.
    

    View Slide

31. 31
    Guidance
    #5
    

    View Slide

32. 32
    Visual Hierarchy
    
    
    • Define the hierarchy of the content.
    • Define the key point(s) you want the
    user to take away.
    • Use Z or F Pattern.
    

    View Slide

33. 33
    Prioritize Buttons
    
    
    • Make the most important button look
    like the most important one.
    • Always try to make the primary action
    button more prominent.
    • By making the button bigger you make
    it look more important for users.
    

    View Slide

34. 34
    • Avoid using generic instructions such as
    “read more”, “more”, and “click here”.
    • Make it memorable.
    Call To Action
    
    
    

    View Slide

35. 35
    Forms
    
    
    • Users complete top aligned labeled
    forms at a much higher rate than left-
    aligned labels.
    • Forms should be one column.
    

    View Slide

36. 36
    Search Box
    
    
    • Don’t hide the search box among other
    elements.
    • Don’t make the “Submit” button fit too
    small.
    • Make the search box visible on every
    page.
    

    View Slide

37. 37
    Errors
    
    
    • Use inline validations after the users
    fills out the field.
    • Show the user where the error occurred
    and provide a reason.
    

    View Slide

38. 38
    Readability
    #6
    

    View Slide

39. 39
    • Choose fonts that are easy to read.
    Fonts
    
    
    

    View Slide

40. 40
    • Give your text room to breathe.
    • A lack of “white space” between each
    line can affect readability.
    • Avoid long narratives.
    • Use heading, subheadings, bulleted/
    numbered lists, intents, online.
    Typography
    
    
    

    View Slide

41. 41
    • Left aligned text is easier to read than
    centered text for paragraphs.
    • Centered text is best used
    for headlines and short lines of text.
    • Avoid to combine centered text with
    left aligned text.
    Alignment in Fonts
    
    
    

    View Slide

42. 42
    • Don’t use the same or similar colors for
    text and background.
    • The more visible text, the faster users
    are able to scan and read.
    • High color contrast is useful for
    readability.
    Color Contrast
    
    
    

    View Slide

43. 43
    • Avoid using, especially if such sites are
    likely to be read by users who are not
    familiar with such technical
    terminology.
    • Instead of the features, focus on the
    benefits of the product / service.
    Jargon
    
    
    

    View Slide

44. 44
    • Don't let text go all the way across the
    page.
    Line Length
    
    
    

    View Slide

45. 45
    • Don’t hide your links.
    • Change your link colors and be sure
    that links can be recognised.
    • Become highlighted or change color on
    mouseover.
    Site Links
    
    
    

    View Slide

46. 46
    The list could go on and on..
    

    View Slide

47. If you don't have users' voice in your design,
    if you haven't done your research, how do
    you know that your design is usable ?
    47
    — Alison Gavine (Interaction Design Foundation)
    

    View Slide

48. 48
    The list could go on and on
    Usability Testing helps you
    to make subjective findings
    

    View Slide

49. 49
    The list could go on and on
    Do users enjoy using the
    product?
    

    View Slide

50. 50
    www.vbaimas.com
    hello@vbaimas.com
    UX Chat
    Connect
    THANK
    
    
    YOU
    

    View Slide