Creating UIs

1. Creating UIs Design

2. How to create a UI? Step 3 Step 2 Step 1 Design Test Plan

3. How to create a UI? Step 3 Step 2 Step 1 Design Test Plan

4. Design Outline • Visual Structure • Text • Colors • Responsiveness • Facilitate Learning • Delivering Information

5. Visual Structure • Is all about helping users find information more quickly.

6. Design Outline • Visual Structure • Gestalt Principles • Visual Hierarchy • Structure enhances readability • Text • Colors • Responsiveness • Facilitate Learning • Delivering Information • Sketching and Paper Prototypes

7. Gestalt Principles Our visual system automatically imposes structure on visual input and is wired to perceive whole shapes, figures, and objects rather than disconnected edges, lines, and areas.

8. 7 Gestalt Principles • Proximity • Similarity • Continuity • Closure • Symmetry • Figure/Ground • Common Fate

9. Proximity • Items that are close appear grouped

10. Proximity Microsoft Office’s File Info Tab

11. Similarity • Items will appear grouped together if they look more similar to each other than contrasting objects.

12. Similarity Taken from cnn.com

13. Similarity

14. Continuity • Our visual perception is biased to perceive continuous forms rather than disconnected segments.

15. Continuity

16. Continuity II • Items placed on a certain row or direction are seen as a group

17. Continuity III

18. Closure • Human vision is biased to see whole objects, even when they are incomplete.

19. Closure • Mostly used for logos, icons, and art

20. Symmetry • The data in our visual field often has more than one interpretation, but our vision automatically organizes and interprets data as to simplify it and give it symmetry. [ ] [ ] [ ] We see 3 pairs of brackets instead of 6 individual brackets.

21. Figure/Ground • The figure is what you notice, and the ground is everything else.

22. Figure/Ground • The figure is content(helps draw a user’s focus to a certain area) • The ground is the background

23. Figure/Ground The white area is the figure b/c its on top and casts a shadow on the other content.

24. Common Fate • Items appear grouped/related if they move together.

25. Common Fate • Useful for animations that convey information • Drop down menus • Tool tips

26. Design Outline • Visual Structure • Gestalt Principles • Visual Hierarchy • Structure enhances readability • Text • Colors • Responsiveness • Facilitate Learning • Delivering Information • Sketching and Paper Prototypes

27. Visual Hierarchy One of the most important goals in structuring information is to provide a visual hierarchy.

28. Visual Hierarchy Example You are booked on United flight 237, which departs from Auckland at 14:30 on Tuesday 15 Oct and arrives at San Francisco at 11:40 on Tuesday 15 Oct. You are booked on United flight 237, which departs from Auckland at 14:30 on Tuesday 15 Oct and arrives at San Francisco at 11:40 on Tuesday 15 Oct. • Flight: United 237, Auckland  San Francisco • Depart: 14:30 Tue 15 Oct • Arrive: 11:40 Tue 15 Oct

29. What visual hierarchy can do for you • Breaks the information into distinct sections, and large sections into subsections • Labels sections in a way that clearly identifies its content • Presents higher level sections more strongly than lower level ones.

30. Design Outline • Visual Structure • Gestalt Principles • Visual Hierarchy • Structure enhances readability • Text • Colors • Responsiveness • Facilitate Learning • Delivering Information

31. Structure Enhances Readability The more structured and terse the presentation of information, the more quickly and easily people can scan and comprehend it.

32. Structure Enhances Readability • Western cultures read from top to bottom and left to right. • Don’t force users to read information in an unnatural way.

33. Structure Enhances Readability • Long numbers are easier to scan and understand when segmented. • Telephone numbers • Credit cards • SSN • The use of data specific controls provide better readability for input and output.

34. Design Outline • Visual Structure • Text • People don’t read • Font choice • Vocabulary • Colors • Responsiveness • Facilitate Learning • Delivering Information • Sketching and Paper Prototypes

35. People don’t read • The more words on a page, the fewer people will actually read it. • Shorten, dumb down, and simplify text. • Even adding ‘please’, which is helpful and polite, slows down readers.

36. Font Choice • Use readable typefaces to increase readability. • Avoid tiny fonts. • People use tiny fonts when they have a lot of text but a small amount of display space. • Wanting to use tiny font might be a warning sign that you’re about to commit bad design.

37. Font Choice • Old people can’t read small font. • If you feel that you must use small font. At least provide an option to increase text size. • Western people read naturally from left to right • Using centered and right aligned text hinder the reader’s flow.

38. Text-Align Readability Example In West Philadelphia born and raised On the playground is where I spent most of my days Chillin’ out maxin’ relaxin’ all cool Shootin some b-ball outside of school In West Philadelphia born and raised On the playground is where I spent most of my days Chillin’ out maxin’ relaxin’ all cool Shootin some b-ball outside of school In West Philadelphia born and raised On the playground is where I spent most of my days Chillin’ out maxin’ relaxin’ all cool Shootin some b-ball outside of school In West Philadelphia born and raised On the playground is where I spent most of my days Chillin’ out maxin’ relaxin’ all cool Shootin some b-ball outside of school

39. Font Choice • Font color is also very important. • Font color is also very important. • So is the background color/image

40. Design Outline • Visual Structure • Text • Colors • Color Theory and Harmony • Picking a color palette • Responsiveness • Facilitate Learning • Delivering Information • Sketching and Paper Prototypes

41. Color Theory • Techniques for combining color • Complementary • Analogous • Triad • Split-Complementary • Rectangle • Square

42. Color Harmony A combination of colors that are pleasing to the eye

43. Color Theory: Complementary Colors that are opposite on the color wheel. • The high contrast of color creates a ‘vibrant/bold’ look. • This color scheme makes it difficult to focus the user on key areas. • A really bad choice for text and background combinations.

44. Color Theory: Analogous Colors that are next to each other on the color wheel. • This color scheme is often found in nature and is harmonious. • Choose one color to dominate, a second to support, and a third for accent. • Suffers from a lack of contrast.

45. Color Theory: Triad Colors that are evenly spaced around the color wheel. • This color scheme tends to be quite vibrant. • Let one color dominate and use the other two as accents.

46. Color Theory: Split-Complementary One complementary base color, it uses two colors analogous to its complement • Still maintains a strong contrast, but has less tension than complementary. • This color scheme is good for beginners because it is hard to mess up.

47. Color Theory: Tetradic Two complementary and two analogous colors • Offers the largest option of color, but can give problems for good harmony. • Let one color dominate. Rectangle Square

48. Color Theory • Learn more at littletownmart

49. Design Outline • Visual Structure • Text • Colors • Color Theory and Harmony • Picking a color palette • Responsiveness • Facilitate Learning • Delivering Information • Sketching and Paper Prototypes

50. How to pick a color palette • Pick one color from the color wheel and use color theory • Steal someone else’s colors • Steal something else’s colors • Use tools