User Interface Design for Programmers Chris Poteet www.siolon.com
The Buzz Word Problem Information Architecture User Experience Usability Engineering Interaction Design Information Design...
The Programmer’s Dilemma <ul><li>Often times a programmer is concerned with what they are most comfortable with </li></ul>...
Bridging the Gap <ul><li>Understanding of each other’s contribution to the end product is vital for communication </li></u...
The Proper Balance
The Common Understanding of UI Design <ul><li>There are two main components to UI design </li></ul><ul><ul><li>Conceptual ...
Laying the Foundation <ul><li>First we must determine what the user’s needs are </li></ul><ul><ul><li>What problem are we ...
Test Case: Contact Form <ul><li>Problem: Users have a hard time contacting help, company, etc. </li></ul><ul><li>Solution:...
Contact Form Workflow
Build the Blueprint <ul><li>The next step is to create a “wireframe” (not to be confused with “mockup”) </li></ul><ul><li>...
Wireframe
Preliminary Visual Design & Usability <ul><li>The next step is to create a rough interactive design and get it in front of...
Further Usability Testing Tips <ul><li>Better to do some then no usability testing </li></ul><ul><li>Find users representa...
Recent Usability Test
The Entire Process <ul><li>Determine user needs </li></ul><ul><li>Outline user experience (workflows, scenarios) </li></ul...
Suggested Books
Chris Poteet [email_address] www.siolon.com
Upcoming SlideShare
Loading in …5
×

User Interface Design For Programmers

4,585 views

Published on

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

Published in: Business, Technology
  • Be the first to comment

User Interface Design For Programmers

  1. 1. User Interface Design for Programmers Chris Poteet www.siolon.com
  2. 2. The Buzz Word Problem Information Architecture User Experience Usability Engineering Interaction Design Information Design Content Analysis
  3. 3. The Programmer’s Dilemma <ul><li>Often times a programmer is concerned with what they are most comfortable with </li></ul><ul><ul><li>“ 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 </li></ul></ul><ul><li>Designing interfaces is often seen as “the thing you do at the end” </li></ul><ul><li>Communication between interface designers and programmers is often difficult </li></ul><ul><li>Interface design is often frustrating to developers that are familiar with fixed variables </li></ul>
  4. 4. Bridging the Gap <ul><li>Understanding of each other’s contribution to the end product is vital for communication </li></ul><ul><li>The benefits and advantages of proper design practices is often never conveyed to the programmer </li></ul><ul><li>Striking a balance between usability and functionality is necessary for good software </li></ul>
  5. 5. The Proper Balance
  6. 6. The Common Understanding of UI Design <ul><li>There are two main components to UI design </li></ul><ul><ul><li>Conceptual </li></ul></ul><ul><ul><ul><li>Information Architecture, Usability, User Experience, etc </li></ul></ul></ul><ul><ul><li>Visual </li></ul></ul><ul><ul><ul><li>(X)HTML, CSS, Typography, etc </li></ul></ul></ul>
  7. 7. Laying the Foundation <ul><li>First we must determine what the user’s needs are </li></ul><ul><ul><li>What problem are we attempting to solve? </li></ul></ul><ul><ul><li>What are our demographics? </li></ul></ul><ul><ul><li>What kind of feedback have we received from legacy apps? </li></ul></ul><ul><ul><li>What goals are we trying to achieve? </li></ul></ul><ul><li>These steps are a part of determining User Experience </li></ul>
  8. 8. Test Case: Contact Form <ul><li>Problem: Users have a hard time contacting help, company, etc. </li></ul><ul><li>Solution: Create a feedback form that allows easy contact between user and help </li></ul>
  9. 9. Contact Form Workflow
  10. 10. Build the Blueprint <ul><li>The next step is to create a “wireframe” (not to be confused with “mockup”) </li></ul><ul><li>In here we define the structure, navigation, terminology used in the application </li></ul><ul><li>This blueprint is what we will build our actual interface on top of </li></ul><ul><li>This is the field of Information Architecture </li></ul><ul><ul><li>Building blueprint  building </li></ul></ul><ul><ul><li>IA wireframe  interface </li></ul></ul>
  11. 11. Wireframe
  12. 12. Preliminary Visual Design & Usability <ul><li>The next step is to create a rough interactive design and get it in front of potential users </li></ul><ul><li>We want to know if we’ve met our user’s objectives </li></ul><ul><li>Solves the “iUser” problem </li></ul><ul><li>This is the part of the process known as Usability Analysis </li></ul>
  13. 13. Further Usability Testing Tips <ul><li>Better to do some then no usability testing </li></ul><ul><li>Find users representative of your demographic </li></ul><ul><li>Create list of questions </li></ul><ul><li>Have user talk out loud while you video tape (interface voyeurism) </li></ul><ul><li>Usually around 5 users is more than ample </li></ul>
  14. 14. Recent Usability Test
  15. 15. The Entire Process <ul><li>Determine user needs </li></ul><ul><li>Outline user experience (workflows, scenarios) </li></ul><ul><li>Create conceptual wireframes </li></ul><ul><li>Generate rough visual design </li></ul><ul><li>Usability testing </li></ul><ul><li>Modifications based on usability results </li></ul><ul><li>Create final visual design (CSS, XHTML, DHTML, etc) </li></ul><ul><li>Publish </li></ul><ul><li>Repeat </li></ul>
  16. 16. Suggested Books
  17. 17. Chris Poteet [email_address] www.siolon.com

×