User Interface Design for Programmers Chris Poteet www.siolon.com

The Buzz Word Problem Information Architecture User Experience Usability Engineering Interaction Design Information Design Content Analysis

The Programmer’s Dilemma Often times a programmer is concerned with what they are most comfortable with “ Of course, UI is hard, far harder than coding for developers. It's tempting to skip the tough part and do what comes naturally -- start banging away in a code window with no real thought given to how the user will interact with the features you're building. Remember, to the end user, the interface is the application. Doesn't it make sense to think about that before firing up the compiler?” – Jeff Atwood Designing interfaces is often seen as “the thing you do at the end” Communication between interface designers and programmers is often difficult Interface design is often frustrating to developers that are familiar with fixed variables

Often times a programmer is concerned with what they are most comfortable with

“ Of course, UI is hard, far harder than coding for developers. It's tempting to skip the tough part and do what comes naturally -- start banging away in a code window with no real thought given to how the user will interact with the features you're building. Remember, to the end user, the interface is the application. Doesn't it make sense to think about that before firing up the compiler?” – Jeff Atwood

Designing interfaces is often seen as “the thing you do at the end”

Communication between interface designers and programmers is often difficult

Interface design is often frustrating to developers that are familiar with fixed variables

Bridging the Gap Understanding of each other’s contribution to the end product is vital for communication The benefits and advantages of proper design practices is often never conveyed to the programmer Striking a balance between usability and functionality is necessary for good software

Understanding of each other’s contribution to the end product is vital for communication

The benefits and advantages of proper design practices is often never conveyed to the programmer

Striking a balance between usability and functionality is necessary for good software

The Proper Balance

The Common Understanding of UI Design There are two main components to UI design Conceptual Information Architecture, Usability, User Experience, etc Visual (X)HTML, CSS, Typography, etc

There are two main components to UI design

Conceptual

Information Architecture, Usability, User Experience, etc

Visual

(X)HTML, CSS, Typography, etc

Laying the Foundation First we must determine what the user’s needs are What problem are we attempting to solve? What are our demographics? What kind of feedback have we received from legacy apps? What goals are we trying to achieve? These steps are a part of determining User Experience

First we must determine what the user’s needs are

What problem are we attempting to solve?

What are our demographics?

What kind of feedback have we received from legacy apps?

What goals are we trying to achieve?

These steps are a part of determining User Experience

Test Case: Contact Form Problem: Users have a hard time contacting help, company, etc. Solution: Create a feedback form that allows easy contact between user and help

Problem: Users have a hard time contacting help, company, etc.

Solution: Create a feedback form that allows easy contact between user and help

Contact Form Workflow

Build the Blueprint The next step is to create a “wireframe” (not to be confused with “mockup”) In here we define the structure, navigation, terminology used in the application This blueprint is what we will build our actual interface on top of This is the field of Information Architecture Building blueprint  building IA wireframe  interface

The next step is to create a “wireframe” (not to be confused with “mockup”)

In here we define the structure, navigation, terminology used in the application

This blueprint is what we will build our actual interface on top of

This is the field of Information Architecture

Building blueprint  building

IA wireframe  interface

Wireframe

Preliminary Visual Design & Usability The next step is to create a rough interactive design and get it in front of potential users We want to know if we’ve met our user’s objectives Solves the “iUser” problem This is the part of the process known as Usability Analysis

The next step is to create a rough interactive design and get it in front of potential users

We want to know if we’ve met our user’s objectives

Solves the “iUser” problem

This is the part of the process known as Usability Analysis

Further Usability Testing Tips Better to do some then no usability testing Find users representative of your demographic Create list of questions Have user talk out loud while you video tape (interface voyeurism) Usually around 5 users is more than ample

Better to do some then no usability testing

Find users representative of your demographic

Create list of questions

Have user talk out loud while you video tape (interface voyeurism)

Usually around 5 users is more than ample

Recent Usability Test

The Entire Process Determine user needs Outline user experience (workflows, scenarios) Create conceptual wireframes Generate rough visual design Usability testing Modifications based on usability results Create final visual design (CSS, XHTML, DHTML, etc) Publish Repeat

Determine user needs

Outline user experience (workflows, scenarios)

Create conceptual wireframes

Generate rough visual design

Usability testing

Modifications based on usability results

Create final visual design (CSS, XHTML, DHTML, etc)

Publish

Repeat

Suggested Books

Chris Poteet [email_address] www.siolon.com