UI/UX Cheatsheet

While different courses focus on different things, having a good user interface is important for any user facing product. While some elements of design are subjective, there are also some rules that are firmly established best practice, and you should ensure that your teams are following these from the very beginning, in the design sprint! Some of these elements will apply only to applications, but some apply to games as well.

Checklist

  • Navigation should be persistant throughout the site - it should show on every screen.
  • Clicking the back button is a design flaw, if it is required.
  • There should never be a place that you can navigate to that you cannot navigate back out of without clicking on home
  • Where you are in the navigation should be clear at all times
  • If you use tabs to navigate, there should never be more than one row of tabs

Common Failures

  • Using cards to navigate. Cards are data display elements, not navigation elements.
  • Failing to highlight current location in some visual way
  • Having the navigation disappear on certain screens, with only a back button to return you to the normal flow
  • Having mobile navigation lose functionality

Validation

Checklist

  • Validation on fields should happen for all form fields simultaneously, not one at a time
  • Validation should provide feedback by the field that is problematic, not at the top or bottom of the form
  • Validation should provide what is wrong with the entered data
  • Validation should exist for all fields where there are valid and invalid input possibilities
  • All required fields should be marked as required
  • All fields requiring a specific format should display that format PRIOR to form submission
  • If there are length validations, do not allow input of length greater than those limits
  • If there are file type limitations on an upload, do not allow other filetypes in the file chooser dialog
  • Use specific input type widgets wherever possible - don't convert a text input to a date, use a date input

Common Failures

  • Not accounting for long (try pasting the bee movie script) or nonbreaking (try holding down a key for a long time) strings in text inputs. These can often break the UI.
  • Using placeholder text for instructions - which then disappears once you start typing, forcing you to remember those instructions (or more commonly, to forget them)
  • Forgetting to add the * next to required fields
  • Not checking the size and type of file uploads
  • Not checking for numeric only inputs
  • Not checking for numeric inputs that don't make sense, like negative numbers, or a weight of 99999

Feedback

Checklist

  • All user interactions with an app should have some type of visual feedback
  • Feedback should be different for successful and unsuccessful actions
  • Feedback should not rely on color alone for meaning, but include other elements like icons or text for visually impaired users
  • All feedback for unsuccessful action (i.e. error messages) should answer three questions - what went wrong, why was it wrong, and what can I do about it?

Common Failures

  • Leaving javascript alert messages that are driven by error conditions in the code
  • Putting error text at the bottom of a form, or in a toast or popup, rather than in the form itself, next to the fields at issue
  • Providing error messages one at at time, requiring multiple submissions to correct issues
  • Providing vague messages like "Please fill in all required fields" rather than specifying which ones are missing

Data

Checklist

  • If a section of the app has no data, there should always be placeholder text indicating that there is no data
  • If a section of the app has a LOT of data, there should be some way to break it up and display it in chunks/pages/galleries

Consistency

Checklist

  • All controls and layouts in the app should look and function the same as all other controls and layouts. This means all buttons, dropdowns, page headers, menus, alignments, etc should be consistent.
  • If there are cards, they should be the same size. If there are images, they should respond the same way when the size of the screen changes.
  • Having a style guide that helps everyone stay on the same page for what the "right" answer is for these elements is very helpful!

Common Failures

  • Having each developer use a different style sheet, resulting in different button color/shape/placement
  • Missing fonts in some pages, with last minute work defaulting to the system font
  • Having different numbers of columns or different column sizes on different pages