#uxmedellin

http://www.youtube.com/watch?v=vmHoGicPQQQ

Explore.Product design is largely having a vision (job to be done) and solve a LOT of design problems.

Sketchy wires are fast way to 1. explore design space and 2. identify design problems, which you can then solve.

“Thinking device” to explore a problem space.

Communicate.Great design of complex systems is done in teams - in particular in multi-disciplinary teams. But different disciplines speak different languages. (This runs deep.)

“Wireframes are boundary objects” → objects that carry information that is interpreted differently by different communities, but are robust enough to carry a common identity.

Walk the wall. Great wireframes hang on walls.

ProcessSketches-> rough wires -> detailed wires (optional)

Explore & Communicate

(User test at rough wire stage)

3 hours of work.Asked client lots of questions, studied other iPad POS systems.

Preview on iPad.Client impressed with our understanding of their business.

12-month wireframe project.Dispersed team.Visio.Long-lived doc.

Work well:● Header● Document versioned.● Printable document size. (“Back To Paper”)● Page numbers (for printing & referring).● Break up long pages.● Every screens is numbered (for referring

and linking).● Every interaction has IDnumber of target

screen.● Repeating modules are specced out once.● Peter’s rule for wireframe colors: Keep It

Grey.

Not so great:

Non-page models● Multiple outputs (devices, rotations,

responsive).● AJAX, animation, complex interactions.

Maintainable (= DRY)● Versioning and tracking changes.● Repeating modules within screens.

Project workflow● How to combine with functional

specifications, technical specs and other docs.

● Copywriting.

Tools: Paper FirstLike mobile first, paper/whiteboard first, so you can explore and throw away.

Digital has advantages once you’re getting closer: easier to share, easier to rewrite text (design is copywriting), easier to keep editing/evolving.

But you lose out if you’re not sketching on paper, because that’s where the real thinking happens. On paper, on printouts, and on walls.

Back To Paper.

Tools: Balsamiq / Moqups / MockingbirdSimilar products. 1. Explore design space.2. Solve design problems.3. Generate consensus.4. Focus on functionality, not design.

Crucial:1. Sketchy look (feature not bug).2. Easy & fast sketching. 3. Easy sharing.

Not really important:1. Clickable prototypes.2. Advanced features to manage larger

projects.

My process:1. Create wire.2. Share & Discuss (or “Sleep on It”).3. Back to Paper: print out and edit on paper.

Peter’s rules for good sketchy wireframes:1. Are shared.2. Are thrown away.

CopyNo Lorem Ipsum.http://placekitten.com NOhttp://blokkfont.com YESSpend a lot of time on finding the right words, labels, editing sentences, the right form field labels, etc.Use “real” example data.Create a system language.

ToolsVisio OmniGraffle Axure

Use if: You’re on Windows. You’re on Mac + good-looking wires.

Long-lived specs

Environment Win Mac Win + Mac

Layers Yes (backgrounds) Yes (Shared layers) Yes

Modules Not really (manually) Kind of (embed) Yes

Clickable prototypes Kind of Kind of Yes

Generate Specs No No Yes (Word)

Easy to Share PDF PDF Yes

Custom fields Kind of No Yes

Fill, Line, Shadow, Corners, Formatting

Pages and Backgrounds

Shapes Stencils

Add/Rename/Re-order pages and bg pages. Page Setup to select backgrounds.

Easy naming scheme.Layer backgrounds.bgbg-browserbg-iphone...

Custom page headerAuto-pagenumbers(petervandijck.com stencil)

Create a custom set of shapes.

Pages for large projectForegrounds:

● Overview page (how to use, contact info)● Legend● Object descriptions● Sitemaps● Flows● Screens● Modules

Backgrounds:

● bg tablet● bg phone● bg browser● bg

Visio stencils: http://goo.gl/nLMt9y

ExerciseDesign a timetracking tool: the screen where you track your time. Groups of 5 (month of birth)

● Paper & pencil● Paper & marker● Paper, pencil & tape● Paper & Crayons● Drawingboard

Report on tools & process.10 minutes

● Introduce yourselves● Assign who will report (random)● Design product (5 mins)● Discuss tools & process

Report.

RecapThe process matters, not the tools.

● Explore● Communicate

But the tool affects the process.The best camera is the one you have with you. The best tool is the one you know. Customize it if needed to fit the process.

#uxmedellin