User Interface Design For Programmers
15 likes1,680 views
The document discusses the challenges programmers face in UI design, emphasizing that the user interface is as crucial as the underlying code since it represents the application to the end user. It outlines the importance of understanding user needs, creating wireframes, and conducting usability testing to ensure a balance between usability and functionality. The process includes identifying user demographics, defining workflows, and making iterative improvements based on user feedback.
![Chris Poteet [email_address] www.siolon.com](https://image.slidesharecdn.com/user-interface-design-for-programmers-1208628329583345-9/85/User-Interface-Design-For-Programmers-17-320.jpg)
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
- 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
- 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