training webinar - wireframing made easy
TRANSCRIPT
UX SeriesWireframing Made Easy
Margarida da MarçaUser Experience Expert - OutSystems
@designSTAIN
@OutSystemsDev
TOPICS TO COVER
1. Intro2. Process Basics3. Sketch4. Wireframes
a. What is a Wireframe?b. Uses of a Wireframec. Elements of a Wireframe
5. Live Exercisea. Solutionb. Tips
6. Extras7. Conclusion
1. I can break the ice faster with the client
2. Communication is better with the team, client and the users
3. Make sure you develop something meaningful
1. Go from text-based requirements to something visual
2. Don’t know where to start
3. I am not comfortable using Balsamiq
WIREFRAME
Challenges Advantages
Good to Start“A sketch should work as a visible expression
of your thoughts and invite questions, discussions and suggestions.
Sketch
PictionaryGet an afternoon of sponsored training!
See how few lines or shapes you can use so the other player guesses the word being drawn by their partner
Wireframe“A wireframe is a visual representation
used to suggest the layout of fundamental elements of a user interface prioritizing the hierarchy of content.
What is a Wireframe?
#1 Easy to communicate your ideas...
Gets your client involved and allows the review of
goals and priorities
Set expectations, capture additional requirements
Promote conversation around important elements
#1 Easy to communicate your ideas...
Their blueprint for design
Helps understand the structure and hierarchy of
elements
#1 Easy to communicate your ideas...
Gather their feedback
Conduct informal tests
Validate expectations
Identify issues earlier
#1 Easy to communicate your ideas...
Reduces the guesswork
Faster, earlier implementation
Identify implementation issuesbrief all team, track goals,
priorities, scope
Allows to start without the final designs
26
Bus
ines
s A
naly
sis
Use
r Res
earc
h
Wire
fram
es
Vis
ual D
esig
n
Live
Sty
le G
uide
Go
Live
#2 Very important deliverable
WIREFRAMES ARE A POWERFULCHANGE MANAGEMENT TOOL
Everyone can understand what the changes meanand where the company is headed
You can defeat the unknown… make change easier!
And much more...
Fast to create and iterate, if you fail it’s still ok!
Capture initial feedback, gather feedback
Reduce waste and uncertainty
A clickable prototype lets you design interactions and user flow, the way to go to create early usability testing
● Fail to address the end-users needs● Not meeting client’s goals● Not having any “visual” specifications● Not testing and picking the best alternative● Hard to make future changes● Fixing issues in production
Risks
“ Cost vs QualityThe cost of fixing an error after development is 100 times that of fixing an error before development of the project is completed.
The ROI of User Experience with Dr. Susan Weinschenk
https://www.youtube.com/watch?v=O94kYyzqvTc
● Focus your effort in the approval/rejection screen
IdeateThink about an app that allow managers to approve or reject team holidays
Use balsamiq or pen and paper
Exercise
Final TakeawaysProducing Wireframes to support your projects will allow you to better communicate with your peers
#1
Sharing your wireframes with others is a great way to easily get feedback
#2
Don’t forget about Pictionary#3
Screenshot to Lisbon shot em modal
https://goo.gl/bmhNo1
The Developer’s UX Checklist
http://goo.gl/4mBVMV Ricardo LuizUX Expert and Team Leader
@ OutSystems
https://goo.gl/ZS0Dsp http://goo.gl/uogFma Daniel ReisFront End Expert @ OutSystems