introduction to building wireframes - part 1
TRANSCRIPT
Introduction to Building Wireframes Rik Lomas, Lomalogue Ltd @riklomas [email protected]
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
