Your SlideShare is downloading. ×
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
User Interface Design For Programmers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

User Interface Design For Programmers

4,027

Published on

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

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

Published in: Business, Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,027
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 5. The Proper Balance
  • 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
  • 9. Contact Form Workflow
  • 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
  • 11. Wireframe
  • 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
  • 14. Recent Usability Test
  • 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
  • 16. Suggested Books
  • 17. Chris Poteet [email_address] www.siolon.com

×