Effective Wireframes: Pitfalls to avoid and Tips for success by Al Power

1. Effective
Wireframes
Pitfalls to avoid and tips for success
Al Power @alpower
#effectivewireframes
UXBrighton June 2016

2. Questions
Questions
Questions!
@alpower
#effectivewireframes
http://bit.ly/wireframetweet

3. Problems faced
surface
time/cost
narrow focus early
misunderstanding
amendments
@alpower #effectivewireframes

4. Definition
A wireframe is a two-dimensional illustration of a
page’s interface that specifically focuses on space
allocation and prioritisation of content,
functionalities available, and intended behaviours.
- usability.gov
@alpower #effectivewireframes

5. Addresses surface design only
@alpower #effectivewireframes
problem with wireframes:
Wireframe = IA + layout + user journey - nuances

6. Build documentation up front
@alpower #effectivewireframes
Solution:
"I'd go as far as to say the document you
build for the wireframes is more important
than the wireframes themselves."
@JamesSLocke

7. Expensive time wise/high costs
Problem with wireframes:
@alpower #effectivewireframes
all the things? detail = cost. Delivering a grayscale version bad.

8. Fidelity and
technique
Solution:
• lo-fi tips
• resources
• building
prototypes
@alpower #effectivewireframes

9. Lo-Fi Tips
Fidelity and technique:
@alpower
#effectivewireframes

10. Examples
Fidelity and technique:
http://tympanus.net/codrops/2013/01/29/planning-your-web-design-with-sketches/https://flic.kr/p/h8WAd
@alpower #effectivewireframes

11. Resources
Fidelity and technique: @alpower #effectivewireframes
http://rohdesign.com/handbook Free chapter
on sketch noting

12. Resources
Fidelity and technique: @alpower #effectivewireframes
sketchsheets.com

13. Resources
Fidelity and technique: @alpower #effectivewireframes
“ux” + “wireframes” on
pinterest.com

14. "personally I think: use whatever approach
let's you make and test "the thing" fastest. It
can be quickest to start with a "clickable"
prototype of sketches and ‘wireframey’
things" Sophie Dennis @sophiedennis
@alpower #effectivewireframes

15. Quick clickable prototype: Marvel App
@alpower #effectivewireframes
https://marvelapp.com/
http://blog.marvelapp.com/introducing-marvel-user-testing-tools/
http://blog.marvelapp.com/coming-soon-canvas-for-ios/

16. Quick clickable
prototype:
Marvel App
@alpower #effectivewireframeshttp://blog.marvelapp.com/coming-soon-canvas-for-ios/
• iPhone, iPad
• pen tool
• Unsplash/Random
users
• linkable prototype

17. Quick clickable prototype:
Balsamiq
@alpower #effectivewireframes
Blokk Font
Meng To Wireframe
Sketch template
http://blog.mengto.com/how-to-wireframe-an-iphone-app-in-sketch/
http://blokkfont.com/
https://balsamiq.com/

18. " ...If fidelity is too high,
stakeholders tend to expect the
final designs to look exactly
like that initial concept. I keep
mine as simple as possible but
enough detail to show
functionality..."
Leo Barnes @productoven
@alpower #effectivewireframes

19. Narrowing focus too early
problem:
@alpower #effectivewireframes

20. LoFi Exploration @alpower #effectivewireframes

21. @alpower #effectivewireframes
Sketchboarding
http://bit.ly/sketchboarding-slides - presentation by Leah Buley
http://bit.ly/sketchboarding - great blog post by Jason Furnell
• collaborative
workshop
• visibility
• context, flow, stories
• environment
• pages - 6up 1up
LoFi Exploration

22. @alpower #effectivewireframes
6 up templates
http://bit.ly/sketchboard-templates from Box UK
LoFi Exploration

23. @alpower #effectivewireframes
…then 1 up
template
LoFi Exploration

24. Client
Misunderstanding
problem: @alpower #effectivewireframes
• Focusing on the wrong parts
• Chinese whispers
• “Is this the finished design?”
• Goals not aligned

25. Presentation
and Context
solution:
@alpower #effectivewireframes

26. @alpower #effectivewireframes
present contextual information
Presentation and Context

27. @alpower #effectivewireframes
show context
Presentation and Context

28. @alpower #effectivewireframes
goals not aligned
Presentation and Context
• Understand motivations
of different audiences
• Don’t throw wireframes
over the fence

29. Endless
Amendments
problem: @alpower #effectivewireframes
• Customers like to have their
input in the process
• if you don’t work with them
from the start they will
change things.

30. Taking feedback:
Keep Control of
Meetings
@alpower #effectivewireframes
• Face to Face not online
• Set agenda before you present
• Refer back to previous feedback
• Park unrelated feedback
• Keep to time

31. @alpower #effectivewireframes
In Conclusion
• Document things up front and use
them as drivers
• Practice some basic lofi sketching
techniques
• Explore things alongside your
customers
• Present your wireframes with
reference to your other UX
deliverables
• Keep control of your feedback
• You can’t do it all, all the time

32. Thank You!
@alpower #effectivewireframes
…what problems have you faced?
bit.ly/effectivewireframes
or https://alpower.com
dabapps.com/careers/