Topic 5 Lecture 5

1. Module: Application Engineering
and Design
Topic 5: Wireframes and User
Experience (UX) Principles

2. Key topics / learning outcomes
of this lecture
• Low fidelity wireframes
• High fidelity wireframes
• Traditional Storyboards
• Technical Storyboard Tools
• User Experience Principles (UX)
2

3. Low fidelity wireframe example
3

4. Low fidelity wireframes – pro’s
• quick;
• low cost;
• easily amended;
• client/employer may visualise the design from
the drawings;
• identify errors in design at early stage;
• good material for basis of high fidelity
wireframe design/storyboarding.
B4004A L1 4

5. Low fidelity wireframes – con’s
• no clear instructions for front-end developer
to build the User Interface(UI);
• back-end developer may not interpret the
front-end development design;
• client may require many changes to the design
once it is built;
– design changes often ‘cascade’, ie change the
colour or function of one button and this may
affect the design in other areas.
B4004A L1 5

6. Flow Chart / Screen Map
Creating a flow chart / screen map from a low fidelity wireframe can then be used as
the basis for the high fidelity wireframe.
B4004A L1 6

7. Transfer of initial design detail
Here, the low fidelity wireframe details transcend into
the flow chart / screen map:
B4004A L1 7

8. High fidelity wireframe example
Source: http://developer.android.com/training/design-navigation/
B4004A L1 8
wireframing.html

9. High fidelity wireframes - pro’s
• Very detailed;
• User Interface may be built rapidly from the
detail in the high fidelity wireframe;
• Changes to design are less likely to be
requested;
• Client and design team all have a clear
indication of the end design and its usability
• Ability to carry out a ‘cognitive walk through’
of the design.
B4004A L1 9

10. High fidelity wireframes - con’s
• Time consuming;
• Expensive for business:
– time take to achieve the end result;
– people hours required to achieve the end result;
• Missed opportunity:
– the market has moved on in the time it has taken to
build the high fidelity wireframes;
– rapid application development is more suitable to
today’s fast moving market due to:
• new device releases;
• technology advances;
B4004A L1 10

11. High Fidelity Wireframe
Some of the detail expected within a high fidelity wireframe:
• screen size/sizes outlined;
• screen resolution/resolutions provided;
• layout and content;
• headings and titles;
• menu and navigation;
• font type, colour, size;
• colour defined for each element (usually in hexadecimal, or ARGB);
• content type, ie images, video, interactive;
• image placement;
• components, ie buttons, their appearance, their actions;
• navigational flow of the application;
B4004A L1 11

12. Traditional Storyboards
• Visual storyboards are a good basis for preparing a
video
There are online tools available to achieve this type of
storyboarding.
B4004A L1 12

13. Technical Storyboard Tools
This one has good
reviews but is not
free
https://play.google.com/store/apps/details?id=com.brakefield.storyboard&hl=en_GB
B4004A L1 13

14. Technical Storyboard Tools – pro’s
• Storyboards are good for apps with a small to medium
number of screens and relatively straightforward navigation
between views.;
• For large apps design, split up into multiple storyboard files;
• Storyboards assist with User Interface (UI) implementation;
• Good for a small sized app.
B4004A L1 14

15. Technical Storyboard Tools – con’s
• Lots of views and lots of cross-navigation
between screens and the Storyboard view
gets confusing;
• For a large project with multiple developers
storyboards are not ideal, unless they can be
split.
B4004A L1 15

16. Wireframes Design Tool
Download
free
http://www.justinmind.com/free
B4004A L1 16

17. Wireframe Design Tool
Justinmind Protyper
B4004A L1 17

18. Wireframe Design Tool
Justinmind Prototyper Interface
B4004A L1 18

19. Summary of wireframes design
approach
• Determine the time in hours available;
• Decide on the app concept;
• Draw low fidelity wireframes;
• Create a flow chart;
• Identify wireframe design tools to use:
– Microsoft Visio is good for flowchart design; Powerpoint
has flowchart design tools;
– Justinmind is free for app wireframe design;
• Ability then to create a ‘high fidelity’ wireframe:
– time available will determine the level of detail;
– amount of content will also determine the level of detail.
B4004A L1 19

20. … next, moving on to User Experience (UX) …
B4004A L1 20

21. User Experience (UX)
What is it?
• visually appealing design;
• a design that the user can easily navigate;
• a user can easily reach their goal;
• more than one way of achieving objective;
• intuitive;
• appeasing the psychology of the user;
• sometimes known as ‘usability’.
B4004A L1 21

22. The User
Who is the user?
• a child?
– can they read?
• an adult?
– a business user;
– a customer;
– a researcher;
B4004A L1 22

23. Norman – the Design of Everyday Things
“When objects appear to malfunction, it is not the fault of the user but rather
the lack of intuitive guidance that should be present in the design.”
B4004A L1 23

24. 10 Usability Heuristics for User
Interface Design – Jakob Nielsen
1. Visibility of system status;
2. Match between system and the real world;
3. User control and freedom;
4. Consistency and standards;
5. Error prevention;
6. Recognition rather than recall;
7. Flexibility and efficiency of use;
8. Aesthetic and minimalist design;
9. Help users recognise, diagnose and recover from
errors;
10. Help and Documentation.
B4004A L1 24

25. Gestalt principles
Laws of grouping
• Law of Proximity
• Law of Similarity
• Law of Closure
• Law of Symmetry
http://en.wikipedia.org/wiki/Gestalt_psychology
Law of Symmetry
B4004A L1 25

26. Law of Proximity
B4004A L1 26

27. Law of Similarity
B4004A L1 27

28. Law of Closure
B4004A L1 28

29. Law of Symmetry
B4004A L1 29

30. Gestalt principles
B4004A L1 30

31. Useful Usability Principles
• Colours:
– blue is often used for large screen areas as the eye
sees blue in a more relaxed way;
– red to attract attention;
– green for ‘go’
• ie purchase button at checkout
B4004A L1 31

32. Useful UX Principles
Use known and familiar icons
B4004A L1 32

33. Useful UX Principles
An image is sometimes worth 1,000 words:
B4004A L1 33

34. Useful UX Principles
Above the Fold
B4004A L1 34

35. … next
Topic 5 Seminar
Learning the wireframes design software
http://www.justinmind.com/free
Work in groups
Topic 5 Workshop
Work in group and brainstorm app ideas
Create low fidelity wireframes of an app
B4004A L1 35

36. Essential work for next week
• Please consult the OLE for details of:
– Essential readings*
– Seminar/workshop preparation work*
– Recommended further readings
– Any additional learning
* Essential readings and preparation work must always be completed in time
for the next session
36

37. End of presentation
© Pearson College 2013