Design

UI Design Fundamentals

I'm going to start doing a new thing where I start using my blog as a note taking resource from all of the books I read! Currently, I'm reading The Design of Everyday Things - Don Norman. I highly recommend this book for anyone looking for a scientific and psychological approach to design. Creativity is important, but there are definitely fundamental steps to help improve your designs.

Let's start with the Fundamental Principles of Interaction. This is for all of the user interfaces people out there :).

  1. Affordances - All of the possible interactions between the people and the environment. Some affordances are perceiveable, others are not. Affordances are relationships between properties of an object and the capabilities of the actor. For example, glass affords transparency - this is a relationship between the glass and the actor's sight. When affordances aren't perceivable, they will need some...
  2. Signifiers - Signals things. Lol, but seriously, signifiers indicate what actions are possible and how they should be done. Signifiers are more important than affordances for they communicate how to use the design. Suppose our glass example were a transparent glass door, we will need to know which way the door rotates right? Push/Pull signs, curved handle bars for a pull, and a large depressable exit door button are some ways to signify how an actor might use this door.
  3. Mapping - The relationship between the elements of two sets of things. In our door example, suppose we had a smart door which could be controlled from a mobile application. Mapping is an important concept in the design and layout of this mobile application's controls and display. We must establish a mapping of the phone display to UI elements which indicate whether to open or close the door. These mappings must be both logical and visible. Once we establish a mapping and press the buttons, we will need...
  4. Feedback - A communication of the results of an action. Feedback must be immediate and informative, any delays will cause reason for concern. In our internet of things smart door example, most feedback from the mobile application will be a touchable opacity to indicate the button was pressed. In addition, the door would have to move right? Feedback from a mobile application to a physical device is awesome and brings us into the Internet of Things (Tesla makes amazing cars and batteries with this capability).
  5. Conceptual Models - An explanation, usually highly simplified of how something works. Think of icons and folders as conceptual models. Would a normal user be able to understand the tree directory structure of the file system?? Hell fucking no. Give them something way easier to digest.

I hope you enjoyed this post! Keep track of all of these basic interactions when starting any of your designs and applications, they are fundamental human understanding. It is my dream to work on some cooler graphical design projects (AR/VR, Unreal Engine, Visualizers) in the future, so stay tuned Internet. (Note: That all projects started by me are never finished by me either hahaha)

For more on UI and other design freelancing opportunities, check out Toptal's design guide.

Standard