Slide 1

Slide 1 text

VASILIS BAIMAS 1 WORDCAMP GREECE 2021 UX Design; research; product; “Design For Th e Act Of Communication”

Slide 2

Slide 2 text

2 Vasilis Baimas UX Design; research; product Using empathy and critical thinking to create meaningful, valuable experiences for those working towards a more positive and creative future.

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

5 User Experience Design Is Everywhere.

Slide 6

Slide 6 text

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 website.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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)

Slide 10

Slide 10 text

10 De fi nition of Usability Usability is a quality attribute that assesses how easy user interfaces are to use. Usability comes to one question : Does your site provide an e ff i cient and enjoyable user experience? FFFEFC

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

14 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

Slide 15

Slide 15 text

15 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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 88% Less likely to return to a website after a bad user experience.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

19

Slide 20

Slide 20 text

20 Simplicity #1

Slide 21

Slide 21 text

21 • 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.

Slide 22

Slide 22 text

22 • A web page without any images is very boring and hard to read. • Include images to supporting your content. • The images enable the user to quickly skim through your article or page. Images

Slide 23

Slide 23 text

23 • The layout without the “white space” is poor. White Space • Include the “white space” in your content, brand, images.

Slide 24

Slide 24 text

24 Familiarity #2

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

26 • Avoid cluttered content. • Keep carefully balance graphics and content. • The content should be clear, well formatted and precise. Layout • Don't use unusual layouts.

Slide 27

Slide 27 text

27 Design Considerations #4

Slide 28

Slide 28 text

28 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.

Slide 29

Slide 29 text

29 Guidance #5

Slide 30

Slide 30 text

30 Visual Hierarchy • Use a clear 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.

Slide 31

Slide 31 text

31 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.

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

34 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.

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

36 Readability #6

Slide 37

Slide 37 text

37 • Choose fonts that are easy to read. Fonts

Slide 38

Slide 38 text

38 • 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

Slide 39

Slide 39 text

39 • 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

Slide 40

Slide 40 text

40 • 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

Slide 41

Slide 41 text

41 • Avoid using, especially if such websites 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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

44 The list could go on and on..

Slide 45

Slide 45 text

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 ? 45 — Alison Gavine (Interaction Design Foundation)

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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