Introduction to Building Wireframes - Part 1

Introduction to Building Wireframes Rik Lomas, Lomalogue Ltd @riklomas rik@lomalogue.com

What we’ll cover

• What is a wireframe?

• Why make wireframes?

• Sketching

• User centered design

• Features and scenarios

• Site maps

• Paper prototyping

• So!ware tools

• Stencils libraries

• Code wireframes

• How to test wireframes and gathering feedback

• Iterative design

Hands On

A website to save favourite places in London.

What is a wireframe?

A visual guide for the purpose of arranging elements to best accomplish a particular purpose

No fontsNo colourNo graphics

Wireframe "delity

Low HighPaper

PrototypeSketching Code

PrototypeMock upSo!ware

Why make wireframes?

Concept Exploration

Concept ExplorationLayout Content on Pages

Concept ExplorationLayout Content on PagesBrainstorm Interactions

Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytelling

Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild Consensus

Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentation

Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentationMinimize Risk

Why designs fail?

Why designs fail?

Users aren’t motivated to achieve goals

Why designs fail?

Users aren’t motivated to achieve goalsUsers don’t understand how it works

Why designs fail?

Users aren’t motivated to achieve goalsUsers don’t understand how it worksUsers don’t see things

Sketching

8 tips for wireframing

Have clear objectives

Make it functional

Keep it clean

User Interface is not User Experience

Repetition. Repetition. Repetition.

Consider dependencies

Don’t be lazy

Know when to stop

Demo –Facebook Pro"le Page

Exercise –Draw a sketch of either:the Twi#er pro"le page orthe Instagram taking a photo $ow

Demo –Sketch of the favourite places site

Exercise –Draw a sketch for your app or site.

User Centred Design

Goals

What the user wants to do, not how the user achieves them.

No assumptions about the system interface.

Can be used to compare different interface design alternatives in a fair way.

Can be personal, practical or false goals.

Exercise –Write down 3 goals for your site/app

GoalsPersonas

Very speci"c, although not necessarily accurate.

Based in large part on the goals.

Puts an end to feature debates.

User persona, not buyer persona.

Exercise –Write down 3 personas for your site/app

GoalsPersonasTasks

Describe the steps necessary to achieve the goals.

Can vary with the available technology.

Broken down into steps for task analysis, and are recombined into sequence of steps for scenario development.

Exercise –Write down a task for one goal for your site/app

Features & Scenarios

a.k.a “making designers and developers love you”

Protect revenueIncrease revenueManage costIncrease brand valueMake the product remarkableProvide more value to your customers

Feature: In order As I want

Feature: Addition In order As I want

Feature: Addition In order to avoid silly mistakes As I want

Feature: Addition In order to avoid silly mistakes As a maths idiot I want

Feature: Addition In order to avoid silly mistakes As a maths idiot I want to be told the sum of two numbers

Feature: In order As I want

Feature: Favourites In order As I want

Feature: Favourites In order to remember places As I want

Feature: Favourites In order to remember places As logged in user Dave I want

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Exercise: Write 3 features of your app/site –

Feature: In order As I want

Feature: In order As I want

Scenario: Given When &en

Feature: In order As I want

Scenario: Given When &en

Scenario: Given When &en

Scenario: Given When &en

Scenario: Given I have entered 50 into the calculator When &en

Scenario: Given I have entered 50 into the calculator And When &en

Scenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When &en

Scenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When I press add &en

Scenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When I press add &en the result should be 120 on the screen

Feature: Addition In order to avoid silly mistakes As a maths idiot I want to be told the sum of two numbers

Scenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When I press add &en the result should be 120 on the screen

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Scenario:

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Scenario: Given I have no favourite places

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Scenario: Given I have no favourite places And I hover over a listing

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Scenario: Given I have no favourite places And I hover over a listing When I click the star icon

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Scenario: Given I have no favourite places And I hover over a listing When I click the star icon &en I will have 1 favourite place

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Scenario: Given I have no favourite places And I hover over a listing When I click the star icon &en I will have 1 favourite place And the star icon will be selected

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Scenario:

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Scenario: Given I have a favourite place

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Scenario: Given I have a favourite place And I hover over that favourite

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Scenario: Given I have a favourite place And I hover over that favourite When I click the star icon

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Scenario: Given I have a favourite place And I hover over that favourite When I click the star icon &en I will have no favourite places

Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list

Scenario: Given I have a favourite place And I hover over that favourite When I click the star icon &en I will have no favourite places And the star icon will be deselected

Exercise: Write down 3 scenarios for a feature –

Feature: In order As I want

Scenario: Given When &en

States

Errors, alerts & successes

No content

Events (e.g. click, hover, tap and swipe)

Responsive design

Exercise –Add an error state, a success state or a hover/tap state to your sketch.

Site maps

A site map is a visual overview of each section of a site/app

Demo –Site map for favourite places site

Exercise –Create a site map for your site/app

Paper prototyping

Demo –Favourite places site

Exercise –Paper prototype your site/app

Five books worth reading

&anks!

Rik Lomas, Lomalogue Ltd @riklomas rik@lomalogue.com