• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
User Interface is King: Developing a Web App UI
 

User Interface is King: Developing a Web App UI

on

  • 3,734 views

An overview of what the user experience is, changes you can make to your applications, and tips for testing. Uses before and after examples from our content management system (CMS) slate to ...

An overview of what the user experience is, changes you can make to your applications, and tips for testing. Uses before and after examples from our content management system (CMS) slate to demonstrate the topics.

Statistics

Views

Total Views
3,734
Views on SlideShare
3,703
Embed Views
31

Actions

Likes
2
Downloads
60
Comments
0

2 Embeds 31

http://www.slideshare.net 16
http://localhost 15

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    User Interface is King: Developing a Web App UI User Interface is King: Developing a Web App UI Presentation Transcript

    • User Interface is King Developing a Web App UI by Dave Olsen West Virginia University Web Services
    • I’m nervous.
    • Who is Dave Olsen? • I’m a Programmer/Project Manager with WVU Web Services • Languages: Ruby, PHP, & JavaScript • 7+ years of experience developing web apps • Spent the last 2+ years overseeing slate
    • What is slate? • A content management system focused on rapid production of traditional web sites • Uses Ruby on Rails • Under development for 2+ years • serving 71 live sites which leads to a quarter of a million page views a month • Not open sourced... yet • More info @ slateinfo.blogs.wvu.edu
    • The Talk • What is User Experience • Zen of User Interface • Things You Can Do: • Before You Code • While You’re Coding • After You’ve Coded • Other Things You Can Do • Resources
    • What is User Experience Interface + Expectations = A Feeling simple math, really
    • Success Spectrum Colorful! credit: amy hoy
    • Success Spectrum It’s awesome!
    • Success Spectrum It’s pretty cool.
    • Success Spectrum It’s ok. Sometimes I have problems.
    • Success Spectrum I hate it!
    • What We Want Everyone to be happy!
    • Zen of User Interface
    • Zen of User Interface Have a Vision For Your App write it down. post it in your cube. stick to it!
    • Zen of User Interface It’s About: Balance, Form, & Function it’s not about “pretty”
    • Zen of User Interface Add Nothing But Value avoid “it’d be nice to have” features
    • Zen of User Interface Design for 80% don’t listen to all of your users
    • Zen of User Interface Be Consistent same font, same alignment, same copy structure
    • Consistency Example Example of being consistent ooga!
    • Consistency Example Example of being consistent ooga!
    • Inconsistency Example Example of being consistent ooga!
    • Zen of User Interface Be Opinionated preferences are evil
    • Weak Be Opinionated preferences are evil
    • Strong
    • Zen of User Interface Listen To Your Gut Instinct negative emotional/physical response = something wrong
    • But at the end of the day... this is the most important thing!
    • Zen of User Interface It’s All About The User and, remember, their will always be a first-time user
    • First-time Example
    • Before You Code Use Case Screenflow Wireframe
    • Before You Code Buy a Whiteboard 12’x4’ is a good size
    • Our Whiteboard Our Whiteboard
    • Before You Code Design Your App Around Tasks let the UI determine your feature set
    • Before You Code Write Use Cases 1. User clicks ‘Feedback’ and short form is shown 2. User fills out form noting session was ‘excellent’ 3. User clicks ‘Submit’ and is shown a success flash
    • Before You Code Screenflow get some use out of the whiteboard
    • Example of Screenflow Screen 1 Screen 2 Screen 3
    • Before You Code Wireframe get some more use out of the whiteboard
    • Wireframe Example Example of Wireframe use our feedback form example
    • Before You Code Paper Prototyping faster than Photoshop but not something we do...
    • While You’re Coding <%= ‘Hello World’ -%>
    • While You’re Coding Learn To Let Go especially if you’re part of a team
    • While You’re Coding Flex Everything but the Deadline limited time will force you to keep your UI clean
    • While You’re Coding Iterate lather, rinse, repeat
    • Iteration Example - v1 Iterate lather, rinse, repeat
    • Iteration Example - v2
    • Iteration Example - v3
    • While You’re Coding Share UI Concepts let your users know what you’re up to
    • UI Concept Demo
    • While You’re Coding Have a Proofer for consistency
    • After You’ve Coded mmm... creamery
    • After You’ve Coded Ride Out the Storm wait out knee-jerk reactions
    • After You’ve Coded Reconnaissance Testing be stealthy!
    • After You’ve Coded Use the App become a user
    • After You’ve Coded Don’t Be Afraid to Change Things if there’s something wrong, fix it
    • Change Example - Before
    • Change Example - After
    • Other Things You Can Do
    • Other Things You Can Do For Copy • Be concise. Edit and edit some more. • Use Headings. • Paragraphs or, better yet, bulleted lists. • Avoid technical jargon at all costs.
    • Other Things You Can Do Hide Advanced Features not everyone needs them vs.
    • Other Things You Can Do Give Hints everyone needs them
    • Other Things You Can Do Segmentation bite-sized chunks
    • Other Things You Can Do Space Out Submit Options avoid accidental clicks
    • Other Things You Can Do Standardize Your Icons choose icons that make sense vs.
    • Other Things You Can Do Use Icon Keys ‘cause not everyone will know what they mean
    • Resources • Slash7 (blog) • Designing the Obvious by Robert Hoekman • Good Experience (blog) • UIE Brain Sparks (blog) • Boxes and Arrows (blog) • Silk Icon Set (the pretty) • Your Gut (you)
    • Q &A Any Questions? otherwise, thanks!