Tools of the Trade

65
TOOLS of the TRADE Analyzing the functionality and role of wireframing tools in user experience design

description

 

Transcript of Tools of the Trade

Page 1: Tools of the Trade

TOOLS of the

TRADE

Analyzing the functionality and role ofwireframing tools in user experience design

Page 2: Tools of the Trade

D A N A G I U L I A N A@XperienceArc

Experience Architect, photographer, biker

Recent work withChrysler,

Dunkin Donuts, Fidelity, Boston.com

StudiedFilm at

Emerson College

W I L L M I L L A R@ideastate

Thinker, maker, question-asker

Recent work withFidelity Biosciences,

MassArt, City of Boston

StudiedGraphic Design at

MassArt

K E N S I G E L@kendoggz

Runner, chef, problem solver

Recent work withStaples,

The Hartford,Humana

StudiedCreative Writing atWheaton College

Page 3: Tools of the Trade

Creative agency with mature UX department

30+ experience designers (Boston)

Experience design shapes direction for

most projects

Page 4: Tools of the Trade

Guide design & development

Facilitate discussion

Build consensus

W I R E F R A M E S

Page 5: Tools of the Trade

VS VS

VS VS

Page 6: Tools of the Trade
Page 7: Tools of the Trade

PortabilityScalability

FidelityAgilityModularity

Prototyping

6 VIRTUES OF WIREFRAME TOOLS

• Speed

• Ease of iteration

• Pixel perfection of UI detail

• Collaboration

• Printing/PDF Exporting

• Reusable components

• Templates/styles

• Exporting interactive demos

• Transitions/animation

• Handling large document structures

• Complexity of page elements

Page 8: Tools of the Trade

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

6 VIRTUESOF

WIREFRAMETOOLS

Page 9: Tools of the Trade

• InDesign $$$$

Adobe Creative Suite

Powerful desktop publishing application (Pagemaker)

Making inroads as a web and tablet publishing tool

Page 10: Tools of the Trade

InDesign UNLIMITED CREATIVITY

Create anything you can imagine

Traditional vector drawing tools

Columns, grids and guides

Common image blending and effects

+

Page 11: Tools of the Trade

InDesign DETAILED TYPOGRAPHY

Limitless control

Similar to CSS

Easily handles massive texts

+

Page 12: Tools of the Trade

InDesign POWERFUL STYLES

Paragraph and character styles for all text controls

Object styles are powerful shortcuts for UI components

Easy to create

+

Page 13: Tools of the Trade

InDesign LIBRARIES

Create once, use across multiple wireframes or projects

Organize by object type (buttons, forms, navigation etc.)

Share across your team

+

Page 14: Tools of the Trade

EMBED DOCUMENTS INTO ONE ANOTHER

Collaborate with other team members

Update instances with one click

InDesign+

Page 15: Tools of the Trade

ROBUST TABLES

Data is structured & aligned

Detailed formatting

Import from Excel (link to live .XLS file)

InDesign+

Page 16: Tools of the Trade

LIMITED INTERACTIVITY

Limited hover and click events

Objects can animate and have states

Present in clickable .PDF or .SWF

InDesign—

Page 17: Tools of the Trade

STARTINGFROM SCRATCH

No pre-built components, libraries or styles

Developing your own take some time

InDesign—

Page 18: Tools of the Trade

STEEP LEARNING CURVE

Newbies need several days to become very productive

So many features (I’m still learning!)

Classes available

InDesign—

Page 19: Tools of the Trade

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

InDesign•

Page 20: Tools of the Trade

• OmniGraffle$$$$

The Omni Group

Diagram design tool

Versatile graphic design program with many timesaving features

Page 21: Tools of the Trade

OmniGraffle POWERFUL UI “STENCILS”

Graffletopia

Almost any UI element you could imagine

Robust community is always adding new content

+

Page 22: Tools of the Trade

OmniGraffle GREAT SKETCHING & DIAGRAMMING

Easily creates rough layouts

Powerful and intuitive diagramming tools enable fine control

Enough design control to polish concept, but not cumbersome

+

Page 23: Tools of the Trade

OmniGraffle VISIO INTEGRATION

Import and export files to and from Visio

Developers and BAs will like you more!

+

Page 24: Tools of the Trade

OmniGraffle STRONG PAGE MANAGEMENT

Locking layers and canvases help manipulate large documents

Shared layers allow making single edit that applies to all canvases

+

Page 25: Tools of the Trade

OmniGraffle LACK OF INTEGRATION FEATURES

Prototyping functionality leaves much to be desired

Mac only

No real collaboration

No support for annotations or documentation

Page 26: Tools of the Trade

OmniGraffle LACK OFFIDELITY

Ability to execute fine typography or pixel-perfect design is not near the level of InDesign

Page 27: Tools of the Trade

OmniGraffle

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

Page 28: Tools of the Trade

• Axure RP$$$$

Growing in popularity with both UX communities and client teams

Basic prototyping software, maturing into a very robust wireframing tool

Page 29: Tools of the Trade

Axure RP GREAT PROTOTYPING CAPABILITIES

Quickly develop a very interactive prototype

No coding or advanced techniques necessary

+

Page 30: Tools of the Trade

Axure RP HIGHLY COLLABORATIVE

Easy to share a project and work together (in Axure RP Pro)

Allows for easy management of document structure with large projects

+

Page 31: Tools of the Trade

Axure RP POWERFUL DOCUMENTATION TOOLS

Add notes to the page or even specific elements

Notes will be included when the spec document is generated

+

Page 32: Tools of the Trade

Axure RP REUSABLE ELEMENTS

Easy to use “masters” for page layouts; this will save time

Masters are edited in isolation, sweeping changes update automatically

+

Page 33: Tools of the Trade

Axure RP LACK OF TRADITIONAL OUTPUT

Spec document contains a lot of information, but does not lay out annotations in-line with the wireframe

Output can be more challenging for clients to follow

Page 34: Tools of the Trade

Axure RP ROUGH DESIGNTOOLS

Some basic controls are surprisingly unavailable

Page 35: Tools of the Trade

Axure RP CHALLENGINGCOMPLEXITY

Not immediately intuitive

Formidable learning curve

Rarely the best tool to start a project in

Page 36: Tools of the Trade

Axure RP

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

Page 37: Tools of the Trade

• Balsamiq Mockups$$$$

Efficient “sketch” tool for lo-fi prototyping

Popular among non-designers (clients, devs, etc.)

Page 38: Tools of the Trade

Balsamiq Mockups FAST AND ADAPTABLE

Build prototypes with pre-made UI elements

Naturally leverage interface conventions

+

Page 39: Tools of the Trade

Balsamiq Mockups INTUITIVE INTERFACE

Minimal learning curve (learn in a matter of minutes)

Simple and fun to use

+

Page 40: Tools of the Trade

Balsamiq Mockups PROPERLY CONTROLS THE DISCUSSION

Isolate the scope of the conversation to “concept-only”

Sketch style reminds viewers that this is only an idea

Great for cultivating alignment (internally and externally)

+

Page 41: Tools of the Trade

Balsamiq Mockups FORCES HIGH-LEVEL THINKING

Working in stencils removes “rendering” from the process and allows the designer to focus on functionality and business value

+

Page 42: Tools of the Trade

Balsamiq Mockups LACK OF FIDELITY

Only two “styles:” Sketch and Wireframe

Unable to modify many complex UI elements

Page 43: Tools of the Trade

Balsamiq Mockups NOT VERY SCALABLE

Primitive document management (each screen is its own file)

Rudimentary prototyping functionality

Page 44: Tools of the Trade

Balsamiq Mockups

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

Page 45: Tools of the Trade

• Keynote $$$$

Presentation design software (“Apple’s PowerPoint”)

Recently repurposed as a versatile prototyping tool

Page 46: Tools of the Trade

Keynote ROBUST ANIMATION/TRANSITIONS

Wide array of options for bringing your comps to life

Combining multiple effects makes apps feel “real”

Templates from Keynote Kung Fu (keynotekungfu.com)

+

Page 47: Tools of the Trade

Keynote “MAGICALLY” EFFICIENT INTERFACE

“Magic Move” is unbelievably easy to use

Many other intuitive motion controls

+

Page 48: Tools of the Trade

Keynote NOT BUILT FOR WIREFRAMING

Closer to PowerPoint than Axure

Detailed wires are possible, but often require workarounds

Page 49: Tools of the Trade

Keynote CRUMBLES UNDER HEAVY WEIGHT

50+ page documents can often become unstable

Inexplicable errors are not uncommon

Page 50: Tools of the Trade

Keynote

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

Page 51: Tools of the Trade

• Drawing $$$$

Since 30,000 B.C.(largest user base)

Learned in kindergarten

White board, pen & paper, digital sketching

Page 52: Tools of the Trade

DEMOCRATIZING

Anyone can articulate an idea

Involve full team (developers, PMs, writers)

Get stakeholders involved upfront

Drawing+

Page 53: Tools of the Trade

NO CONSTRAINTS

Freedom to try anything

Greater visibility into the process (how wireframes play a role)

Drawing+

Page 54: Tools of the Trade

ADVANCED TECHNIQUES

Alternate states with Post-its

Photocopy templates pages to speed up iteration

Drawing+

Page 55: Tools of the Trade

DIGITAL TRANSLATION

Easily digitize sketches with scanners or mobile apps like TurboScan (turboscanapp.com)

Digitized drawings can be turned into clickable demos with apps like Pop (popapp.in)

Drawing+

Page 56: Tools of the Trade

DIGITAL SKETCHING

Sketching on a tablet is quick and natural

Everyone loves Paper for iPad (fiftythree.com)

Drawing+

Page 57: Tools of the Trade

DOES NOT SCALE

At a certain point, pen and paper becomes untenable

Trying to articulate too many screens, animations, or advanced interaction is often impossible

Drawing—

Page 58: Tools of the Trade

Drawing

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

Page 59: Tools of the Trade

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

• INDESIGN

• OMNIGRAFFLE

• AXURE

• BALSAMIQ

• KEYNOTE

• DRAWING

6 VIRTUESOF

WIREFRAMETOOLS

Page 60: Tools of the Trade
Page 61: Tools of the Trade
Page 62: Tools of the Trade
Page 63: Tools of the Trade

Don’t limit yourselfTools define how we work

and think

Get comfortable with multiple tools

Choose tools that fit your project, strengths, and team

Stay curious and have fun

Page 64: Tools of the Trade

T H A N K Y O U

Page 65: Tools of the Trade

D A N A G I U L I A N A@XperienceArc

W I L L M I L L A R@ideastate

K E N S I G E L@kendoggz

Q & A