Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Interface Design Bootcamp



Full day workshop at the Future of Web Design conference in New York City Nov 17, 2010.

Full day workshop at the Future of Web Design conference in New York City Nov 17, 2010.



Total Views
Views on SlideShare
Embed Views



12 Embeds 2,749

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



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Interface Design Bootcamp Interface Design Bootcamp Presentation Transcript

  • 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 Carsonified 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
  • 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 flexible and on time Process and documentation are helpful, but remember what you’re really trying to accomplish Think modular, reusable, flexible
  • 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?
  • 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 fit 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 Influencers 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 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 flesh out tasks, and process flow for your app Consider lessons learned from stakeholder interviews & personas
  • 60 minutes
  • Sketch Boards: Presentation & Discussion
  • 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
  • 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 Significantly 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
  • 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
  • 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 refined 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