Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

User Interface Design For Programmers

•
•
Chris Poteet
Chris Poteet

This is a talk I gave at a Day of .NET event on user interface design concepts targeted at programers.

1 of 17
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
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
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
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
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
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
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
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
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
Suggested Books
Chris Poteet [email_address] www.siolon.com

More Related Content

User Interface Design For Programmers

  • 1. User Interface Design for Programmers Chris Poteet www.siolon.com
  • 2. The Buzz Word Problem Information Architecture User Experience Usability Engineering Interaction Design Information Design Content Analysis
  • 3. 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
  • 4. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 10. 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
  • 12. 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
  • 13. 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
  • 15. 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