Interface Design Bootcamp

INTERFACE DESIGN BOOTCAMP FUTURE OF WEB DESIGN, NYC

Aarron Walter aarronwalter.com @aarron

The Workshop

Learn the Basics

Try What You’ve Learned

Rinse & Repeat

Project Brief: Event App That Connects

Project Goals Help conference attendees connect before, during and after the event Bring people together by helping them learn about other attendees and the activities of events

Stakeholders Carsoniﬁed Attendees (that’s you) Speakers (hey, that’s me!)

The Big Picture

What is an interface?

This is an interface ...

so is this ...

and this too ...

An interface is a visual language of action

It’s what’s between you and other humans

Qualities of a Good Interface Designer

Empathetic

Thinks Like MacGyver

Stays Focused on Outcome, not Process

Process: It’s how we make stuff

WATERFALL METHOD APPROVAL APPROVAL APPROVAL deﬁne design develop deploy

AGILE METHOD APPROVAL develop develop develop deploy design deploy design deploy design define define define deploy release

School of Hard Knocks Small teams can work faster, be more agile, and require less entropy of communication and management Diverse skill sets keep you ﬂexible and on time Process and documentation are helpful, but remember what you’re really trying to accomplish Think modular, reusable, ﬂexible

Respect Between Design & Dev

Inside MailChimp UX Only 5 people Close, respectful relationship with developers Keep in close contact with support and customers Post ideas in common space and invite conversation Militant about interface consistency

What’s your process?

UNDERSTANDING USERS

User Research: Gathering Data

Who do I talk to? Stakeholders: who do you think your users are? Customer Advocate: People who speak to customers directly Customers: real people using the product Usage Stats: Google Analytics, etc. Someone You Know: A person you know fits the target profile (validate your findings)

Research Methods User Interviews: one-on-one conversations (in- person or remote) Contextual Inquiry: on-site visit with participants (in-person) Surveys: multiple choice questions (remote) Focus Groups: group discussion (in-person)

Types of User Research BEHAVIOR In Lab Testing Web Analytics Focus Groups Online Surveys ATTITUDE QUALITATIVE QUANTITATIVE

Which methods to use?

Which ever ﬁt your time and budget

Consider type of project, and what is already known

Personas: Artifacts of user research

Keeps Us Focused on Humans not Features

Make Them Visible

What’s In a Persona? A photo (it can be stock) Name A short bio Age Location Occupation Other optional info

persona THE INFLUENCER My internship provided me with the opportunity to work in Times Square. I just love all of the lights, action, and excitement! Julia has been taking Spanish since high school and is excited to study abroad in Buenos Aires next spring. She’s traveled a little in the past—to Great Britain for a vacation with her family and to Mexico for a missions trip—but this is her rst time Julia going abroad alone. Though she has other friends who also plan to study abroad, she wanted to go at a di erent time so she would be forced to make friends with the locals Age: 19 - 22; Sophomore; Journalism & Communications and truly immerse herself in the culture. She’s heard from friends that the maturity level of some of the students plummets the moment they step on the plane to study Goals: Get a “Big City College” education, cosmopolitan abroad. She hopes they don’t make her look like a “stupid American.” experience; Build resume with internship; Take new/di erent courses; Make new/di erent friends; Experience di erent cultures She’s also heard that the dorms in Buenos Aires aren’t great, which solidi ed her decision to do a homestay. However, she’s concerned about commuting to classes, Pain Points: Limited courses o ered; Costs; Organization which she hopes to take at the NYU campus as well as a local university—if the credits (too much or not enough); Advantages are hidden; Challenging to transfer credits transfer. She doesn’t have a lot of extra cash and is interested in a work study to pay for souvenirs and some travel around Argentina. Speaking Spanish on the job would also be great practice, but she isn’t sure what sort of opportunities there are, or even if she’s allowed to work. Knowledge Lifecycle TECHNOLOGY DOMAIN EXPERIENCE JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC 1 2 3 4 5

souvenirs and some travel around Argentina. Speaking Spanish on the job would also be great practice, but she isn’t sure what sort of opportunities there are, or even if she’s allowed to work. Knowledge Lifecycle TECHNOLOGY DOMAIN EXPERIENCE JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC 1 2 3 4 5 Activities and Interest Inﬂuencers INTERNSHIPS CLASS OFFERINGS FULFILLING CREDITS INTERNSHIP TAKING ELECTIVES FINANCIAL AID EXPLORING NYC EXPERIENCE SOCIALIZING FULFILLING CREDITS NYU TRIAL RUN PARENTAL SUPPORT SPECIALIZED COURSES NYU REPUTATION 1 2 3 4 5 design studio

Activity: Personas Create small teams Interview stakeholders for the event app Identify user needs and business goals Create two to three personas describing archetypal users of your app

45 minutes

Personas: Presentation & Discussion

SKETCHBOARDS

Sketchboards Are ... Collaborative, they let you bring in the whole team early on Fast, you can iterate through ideas quickly with little time invested The big picture, they help you see a broader process

Know When to Protect Your Work

Sketchboards Include ... Steps in a process Information about your users Simple sketches of interface templates Notes and ideas

How to Work Through Ideas Move quickly using the 6-up template Evaluate then combine the best ideas into one interface in a 1-up template

Activity: Sketchboard Round up the troops Create a sketchboard to ﬂesh out tasks, and process ﬂow for your app Consider lessons learned from stakeholder interviews & personas

60 minutes

Sketch Boards: Presentation & Discussion

WIREFRAMES

Simple, fast sketches of your interface

Wireframes Are ... Low resolution, they struggle to simulate interaction Not about aesthetics, they communicate hierarchy, elements, organization, and design patterns Supposed to be fast so you can iterate on ideas quickly

Konigi konigi.com/resources

Wireframe or Prototype?

Activity: Wireframes Regroup your team Identify the key tasks users will need to perform in your application Wireframe key sections of your app

30 minutes

Wireframes: Presentation & Discussion

DESIGN PATTERNS

A Solution to a Common Problem

The Lingua Franca of Interface Design

Pattern Tap patterntap.com

Time Tripper time-tripper.com/uipatterns

Yahoo Design Patterns developer.yahoo.com/ypatterns

Card Stack

Edit In Place

Folksonomy

Design Patterns Help ... Users learn and remember how to use your interface Help you design new interfaces quickly Signiﬁcantly decrease code Make prototyping faster and easier

Ignoring Patterns Can Bloat Code

Design Patterns Cut 100k From MailChimp’s CSS Files

Reduced Facebook’s CSS by 19%, HTML by 44%

OOCSS oocss.org

Anti-Patterns

Activity: Pattern Library Get the band back together Identify common design patterns in your app Sketch out a pattern library to guide app design

30 minutes

Design Patterns: Presentation & Discussion

PROTOTYPES

Great for Showing Interaction Patterns

Provides a Realistic View of Your App

Simulate Real Data for Realistic Tests

Mustache mustache.github.com

Can Be Created With ... Paper HTML, CSS, JavaScript Powerpoint or Keynote Fireworks Specialty tools like Axure

Choosing the Right Method FAST paper Keynote/ Axure Powerpoint SPEED Fireworks HTML SLOW LOW FIDELITY HIGH

Keynote Kung Fu keynotekungfu.com

Make Prototyping Easier By ... Creating a simple TextMate bundle, Dreamweaver plugin, etc. with core prototype elements Create a common library of icons, JavaScript tools, CSS layout framework

Activity: Prototype Assemble your posse Create a paper, Keynote, or HTML prototype of your app Complete one key section, move on to other sections as time permits

90 minutes

Prototypes: Presentation & Discussion

USABILITY TESTING

The Krug Method Test 3 users in house Feed them nice snacks Invite management, head honchos, and other decision makers to the tests to help them understand users Test about once a month, but keep it feasible for your schedule

Remote Testing Method Setup a GoToMeeting.com account Put the call out on Twitter or Facebook for test participants Create permission forms and a screener questionnaire with Wufoo.com Record test session with Silverback (silverbackapp.com)

Testing In-House Setup prototype or reﬁned interface on a machine Screen users Get them to sign a permission form Record test session with Silverback

Tweaking After Each Test

Silverback silverbackapp.com

Emotional Engagement

pleasurable usable reliable functional

Personality

Resources

All Workshop Reources AarronWalter.com

Aarron Walter aarron@aarronwalter.com @aarron

http://aarronwalter.com	1275
http://webprofessionals.org	186
url_unknown	9
http://zoinkbyzaptronic.nl	6
http://static.slidesharecdn.com	4
http://translate.googleusercontent.com	2
http://paper.li	2
http://feeds2.feedburner.com	2
http://www.slideshare.net	1
http://feeds.feedburner.com	1

Interface Design Bootcamp

by Aarron Walter on Nov 13, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 1,488

Statistics

Interface Design Bootcamp — Presentation Transcript