UI Design Guide 2018 — Rules of User Interface Design

The Step-By-Step Design.

ELEMENTS OF GOOD UI/UX DEVELOPMENT

  • GOOD RESEARCH AND PLANNING
  • CLARITY AND SIMPLICITY IS OF PRIME IMPORTANCE
  • DESIGN AND PROTOTYPING
  • TESTING ON ACTUAL PEOPLE, NOT BOTS

MAKING INVENTORIES AND LIBRARIES

DESIGNING ANIMATIONS AND INTERACTIONS

ALL ABOUT DESIGN CONSISTENCY

  • USER-TARGETED RESEARCH
  • DESIGNING THESE RECURRING PATTERNS
  • CONSISTENCY IN ACTIONS
  • CONTENT DESIGN

GUIDELINES FOR UI/UX DEVELOPMENT

  1. User control and freedom. This pertains to offering users freedom over their actions, and also the ability to redo and undo interactions.
  2. Visibility of system status. Users should always have essential system information available at their disposal, it should be easy to comprehend and not very detailed.
  3. Match between system and the real world. Users expect their interactions with the application to mimic the look and feel of a physical object. Thus, it is the job of UI designers to provide users with such an experience, based on their needs and wants.
  4. Error handling. UI systems should be designed so that errors and bugs are kept to a minimum. Users are meant to use the platform, not correct errors. Therefore, it is crucial that they encounter as fewer errors as possible.
  5. As explained in the previous section, design consistency is something that makes users stick with your application for time immemorial. Similar elements, terminology, and actions should be maintained across all parts of the UI.
  6. Flexibility and efficiency. Faster and efficient usage of the UI is a must, and designers must code it in such a way that the time taken to perform an action is minimized, and more efficient.
  7. Minimalistic design. Keeping it simple is what users like to see. Too much of detail clutters up the app screen, leaving a sour taste in users’ mouths. Unnecessary information must be kept at bay from users, with only essential and required info on display.
  8. Recognition rather than recall. This is done to reduce the number of brains that a user is required to employ in order to complete an action. The interface should be designed in such a way that it minimizes cognitive load. The user should not have to rack his/her brains in order to remember what a certain action does, he/she should only have to recognize with the help of some visual clues.
  9. Help users diagnose and recover from errors. First of all, errors should be kept to a minimum. If at all they creep in, the interface should provide users with methods to detect and handle errors, and not just allow them to sit there deadlocked. Error messages should be communicated in layman language, so that it is easy for users to understand.
  10. Help and documentation. If users get stuck on a certain action or screen, appropriate help documentation should be there to assist users in overcoming any hurdles they may face. Ideally, the situation should be one which does not require the need to refer to any text to navigate the interface, however, one may be required for some exceptional and complicated cases.

THINGS A DESIGNER MUST KNOW

  1. Create layouts that fit the screens of devices you’re planning to release your platform on.
  2. Create buttons that are of a respectable size, so that users can easily press them.
  3. Spacing is crucial. It makes text appear better and more readable.
  4. Contrast in colours should be such that it doesn’t make the text illegible.
  5. The size of text should also be at least 11 points, which makes for comfortable viewing or reading.
  6. High resolution images are a must, since they usually do not distort upon screen rotation.

THE ENDING

HOW SODIO CAN HELP

MORE FROM OUR TECH BLOG

  1. Animation in UI Design
  2. UI Design Trends in 2018
  3. Modern UI Design Principles
  4. Mobile UX design — Key Points

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Kumar

Abhishek Kumar

More from Medium

All about Day2- of AZ-104 Bootcamp

Understanding Traffic Lights for Colourblind People in 5 Minutes

The Nature of Reality