Wireframing essentials
By Matthew J. Hamm. Published 2014
Learn the fundamentals of designing the user experience for applications and websites
“… walks you through… the industry-standard design process. It will describe the type of research and groundwork that should occur prior to starting your actual design effort. It will also explain several design techniques commonly used by industry professional. Ans, it will point out solutions to problems commonly encountered when designing the frontend for website and applications.” Preface of Wireframing Essentials
Core philosophy being applied:
User experience design is the act of finding answers to visual and logical questions
The design process defines the order in which the questions need to be asked
Design techniques offer a methodology to answer the questions you are asking
–
Chapter 1. The design process
Research
Get answers to these questions:
Who is going to use this software or sire?
What tasks does the user wish to accomplish?
What does the makes of the software or site wish to accomplish
What technology will be used?
Why would the public use your software or site over another?
What is the content needed to support the user in accomplishing the goals?
If redesigning a site also ask:
What existing features or complexities are hampering or otherwise negatively affecting the user experience?
What additional features would the user or publisher find helpful in the next version of the product?
Common research techniques
Card sorting
Focus groups
User surveys
Stakeholder interviews
Design tenets
Personas and user profiles
Contextual inquiry
Heuristic evaluations
Competitive analysis
The quality of the research will impact the quality of the design
Information architecture
(doesn’t have to be a clean break when moving from one to other)
Objectives:
Create a high-level map of the site or application
Map out the tasks found on each page or screen
Define the content required to support each task
Vet and test our designs
Refine our design solutions
Document the UX patterns
Process
Create a flow chart (there’s loads of stuff out there on how to do it. Mr Hamm suggests being reasonably conventional when using flowchart shapes
Transition to wireframes. This crudely illustrates the basic form and function found on a page. It will just be a black and white outline with shapes and v basic text. (On my course it was suggested that sketches of screens were a good thing to do - a low-fi solution where one is not attached to the drawing and it is obvious that it’s just a working idea)
We should start usability testing now - not wait for a prototype. Can use low-fi mock ups such as paper prototypes - more in chapt 5.
Other common wireframing techniques to us:
Reality mapping
Site map diagrams
Persona-based task flow diagrams
Screenshot interaction maps
Paper prototypes
Visual design
Try and avoid making change to the design that was agreed at the previous wireframing stage. If there are significant changes it may be best to pause the visual design and go back to the wireframes
Delivery
3 tasks:
Optimising the graphics for use on the website or application
Creating specification documents that help the developers build what we have designed
Reviewing the development work completed to verify that it matches the designs
To make all of this run more smoothly keep the whole team updated on development stages - esp the dev team.
Weighing and prioritising features
Ask:
Is it buildable?
Is it usable
Is it
–
Chapters 3 & 4
I’ve skipped writing up the example projects, but well worth looking back at, at some point, although I think the process may have moved on since 2014.
Information architecture
Interaction maps
A chart that maps out task flow. Don’t dig too deep. Can map out the flow of different users
–
Chapter 4. Research techniques
Stakeholder interviews
Who is going to use this software or site?
What tasks does the user wish to accomplish?
What does the maker of the software or site wish to accomplish?
What technology will be used? (limitations?)
Why would the public use your software or site over another?
What content will be needed to support the user in accomplishing their goals?
Design tenet scorecard
Develop a score card that details design attributes that are desired in every interface produced by your client e.g. Discoverable; Intuitive & learnable; Obvious Task Flow; Well crafted; Modern and Fresh; Low step count to accomplish task; Engaging, vibrant, fun; Scalable.
Then a score rating: n/a; absent to perfect
Useful when there is a misalignment on the vision or execution of a product/interface
Competitive analysis
Examine similar applications, sites or products
Examine and document:
Product features of value
Each product’s target market
What they do right and where they fail
New ideas and features that will help offer a better experience
Create a summary of the research
Creating personas
Brain stop type of users and narrow choice down
Flesh out the following details:
Memorable name
Photo
Quote that represents the attitude of the persona
Where they are from
Their profession
How much they earn a year
Short description of their family life
A few hobbies
Brief summary of their level of experience
Description of their objective when it comes to using the site or application
Share them in a way that everyone can see and reference
Heuristic evaluation
Need an understanding of best practices for the design industry
Create a scorecard for each examination point to document the findings on
Be kind - don’t offend the client!
Card sorting
Organise product taxonomies, navigational categories etc
Focus Groups
More commonly used by marketing professionals
Can be used to gauge interest in proposed features, or seek out current ideas from current users
User surveys
Cheaper than focus groups and has the potential to be sent to far more people
Brainstorming
Very valuable. Hold the sessions with stakeholders and team members
Guidelines:
Schedule meeting and directly invite participants
Assign a note taker. Ask them to send their notes to group directly after
Start meeting by stating objective of session. Share research completed to date
Be active participant. Help sketch out ideas that evolve
Attempt to keep discussion on topic (keep list of other topics that come to light for discussion another time)
Wrap up meeting by stating who has takeaway tasks and dates expected to deliver by
Summarise discussion with final sketches of agreed layout, functionality or nav
Try and obtain agreement from all participants regarding task flow diagram mapped out
Note differences of opinion (may need to map out more than 1 task flow to illustrate competing solutions)
Chapter 5. Information architecture and visual design techniques
INFORMATION ARCHITECTURE TECHNIQUES
Task flow and wireframes are primary methods used to map out and design site/app
Additional methods to help filter and organise data collected:
Reality mapping
Understand and document current task flow of product
Use a wall, marker and coloured stickies & access to the product
Best done as a group
Document construction of product as we journey through it
Use colour coded stickies to note questions, comments & concerns and suggestions
Clean up notes by documenting wireframe app – has this moved on to using miro or something??
Task flow techniques
Several different diagram variations that offer different levels of granularity:
Page-level detail diagrams
Site map diagrams
Persona-based task flow diagrams
Screenshot interaction maps (uses screenshots, mockups or wireframes to illustrate task flow
Paper prototyping
VISUAL DESIGN TECHNIQUES
Mood boards
As a graphic designer I know about these!!
Design scorecard
Similar to the above design tenet scorecard:
Score design according to valued visual attributes e.g:
Communication
Uniform[ity?]
Scalable[ity?]
Timely
Ownable
Memorable
Easy
Revolutionary
Spells out ‘customer’ at top, which i think is a bit gimicky.
Get team to score – can help get less biased feedback on a design esp if you have a particularly vocal team member who wants to chuck the whole design out the window due to only one attribute they dislike
Designing in the browser
Which I think these days would mean using something like Adobe XD or Figma!