Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Developer Usability Guidelines


Published on

In order to assist the developers on the team where I work who were struggling with some UI and Usability problems, I set out to create an easy to follow presentation that would offer some simple tips and guidelines that they could follow to improve their workflow.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Developer Usability Guidelines

  2. 2. Presentation Goals • To learn about usage and best practices around common web components e.g. buttons, forms, tables etc. • To discuss some useful tools to aid with the design process as a developer.
  3. 3. Learning Topics 1. Consistency Is Key 2. Developer Tools 3. Buttons 4. Forms 5. Tables 6. Tooltips 7. Spelling & Grammar 8. Useful Tools
  4. 4. 1. Consistency Is Key
  5. 5. 1. Consistency Is Key • Consistency: If you take nothing else away from this presentation just be mindful of keeping things consistent. • Color: Ensure the colors match existing colors used in the color palette set out by the designer or your company’s color palette. • Font & Typography: Match fonts that are already in use in the relevant style guide. Ensure sizing is appropriate for the type of content and ensure that visual hierarchy is followed. • Spacing (whitespace): Ensure content is well spaced out on the screen. Avoid clipping of text and watch out for scrollbars next to content that could easily be removed. • Components: Ensure the components used are consistently styled across all pages e.g. forms, search boxes, buttons etc.
  6. 6. 2. Developer Tools
  7. 7. 2. Developer Tools • Browser developer tools can be your friend. • Learn how to use the browser developer tools to assist in your development process e.g. Inspect Element menu. • Visual changes can be previewed on the fly. • By editing in the browser you don’t need to compile and deploy code each time you need to see a design change. • Preview many screen sizes. • Using developer tools you can preview what the page will look like on phones tablets and desktops easily. • Additional plugins can enhance your workflow. • Most browsers including Chrome have a number of plugins that can assist with the design and development process.
  8. 8. 3. Buttons
  9. 9. 3. Buttons • Button components have a number of states that need to be accounted for. • Default: The standard button appearance when not interacted with. • Focus: This is where the button is interacted with via keyboard navigation or similar. (use the tab button on a web page to highlight a button and see how it behaves) • Toggled / Selected: This is where the user clicks on the button with a mouse.
  10. 10. 3. Buttons ctd. • Disabled: This indicates that the button cannot be interacted with, likely until some criteria has been met. • Hover: This is where the user hovers over the button with the mouse. Link: Basic Rules for Button Design
  11. 11. 4. Forms
  12. 12. 4. Forms • Form design will impact the speed with which users understand & complete a form. • Visually group related labels and fields. Labels should be close to the fields they describe. • Present fields in a single column layout. • Avoid placeholder text, it eliminates visual clutter and avoids usability problems. • Text fields should be about the same size as the expected input since it’s extremely error prone when users can’t see their full entry. • Distinguish optional and required fields. • Avoid Reset and Clear buttons. • Provide highly visible and specific error messages.
  13. 13. 5. Tables
  14. 14. 5. Tables • In most cases with software design, tables make up a large portion of the UI and are therefore important to get right. • Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. • Consider the data in the table. Does each column make sense to include? What columns are not relevant here? • Tables should be filterable & sortable for quick access to data. • Make use of pagination on tables with a lot of content. • For more advanced tables add options for column display - allow the user to determine what columns to view. Link: Design Better Data Tables
  15. 15. 6. Tooltips
  16. 16. 6. Tooltips • A brief informative message that appears when a user interacts with an element. • Tooltips are usually initiated in one of two ways: through a mouse- hover gesture or through a keyboard-hover gesture. • Don’t use tooltips for information that is vital to task completion. • Provide brief and helpful content inside the tooltip, avoid obvious or redundant text. • Use tooltip arrows when multiple elements are nearby to clearly identify which element the tooltip is associated with. • Use tooltips consistently. Tooltips are hard to discover because they often lack visual cues. • Provide tooltips for unlabeled icons. • Position tooltips so they don’t block related content.
  17. 17. 7. Spelling & Grammar
  18. 18. 7. Spelling & Grammar • Read and re-read your content • Ask yourself: Does this make sense from a user’s point of view? • Run your work through a spell checker or something like Grammarly. • Have someone else proofread your work to get feedback. • Content with poor spelling and grammar will affect credibility.
  19. 19. Useful Resources • Color Contrast Checker • • Material Design Framework • W3 Schools • ColorZilla (Chrome Extension) • Full Page Screen Capture (Chrome Extention) • More About Me -