Wireframing Made Easy… with User Experience OutSystems Expert Margarida da Marça

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. 1. Intro

UXPERT TOOL KIT

● Sticky-notes● Sketch Pad● Sharpies● Balsamiq Mockups● InVision (opt)● Evernote

WHY ARE WE HERE?

From Words... To images...

WHY ARE WE HERE?

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

2. Process Basics

SKETCH to WIREFRAME to PROTOTYPE

Sketch Wireframe Prototype

3. Sketch

Good to Start“A sketch should work as a visible expression

of your thoughts and invite questions, discussions and suggestions.

Sketch

Can you do this? So you can 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

4.Wireframes

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?

Entrance

Living Room

Room Suite

Service Area

Bath Room

Toilet Room

FOCUS ININTERACTIVITY

WIREFRAMES Vs

FOCUS ONSTRUCTURE

HiFi PROTOTYPES

Uses of a Wireframe

#1 Easy to communicate your ideas...

#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!

Lean UX: The OutSystems way

28

Wire

fram

es

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

And what happens if you don’t produce Wireframes?

● 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

Think!TIME, COSTS AND QUALITY

IMPACT OF THIS...

“ 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

Elements of a Wireframe

● 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

How shall we tackle this briefing?

Structure Hierarchy FunctionalityContent

Structure Hierarchy FunctionalityContent

Content

Hierarchy FunctionalityContent Structure

Structure

Hierarchy FunctionalityContent Structure

Hierarchy

Hierarchy

Hierarchy FunctionalityContent Structure

Functionality

Functionality

Functionality

Tips

#1 Keep wireframes simple

#2 Annotate your wireframes

#3 Encourage feedback

#4 Iterate your sketches until you and your teammates are confident with the solution

To conclude...

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

Extras

Screenshot to Lisbon shot em modal

11 Usability Rules

goo.gl/mh5ZnA

Screenshot to Lisbon shot em modal

https://goo.gl/bmhNo1

The Developer’s UX Checklist

https://goo.gl/1eayOo

http://goo.gl/4mBVMV Ricardo LuizUX Expert and Team Leader

@ OutSystems

goo.gl/NsIsq7 João GuerraUI Expert

@ OutSystems

https://goo.gl/ZS0Dsp http://goo.gl/uogFma Daniel ReisFront End Expert @ OutSystems

Thank you!