This document discusses wireframes and user experience principles for app design. It covers creating low and high fidelity wireframes, with low fidelity being quick but lacking detail and high fidelity taking more time but providing clarity. Storyboards and tools like Justinmind are presented for prototyping designs. User experience principles like Gestalt laws of grouping and Nielsen's 10 heuristics aim to make the app intuitive and pleasing for users. The document provides examples and recommendations for applying these principles in app wireframes and design.
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
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
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
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
