Key elements of UX/UI design

Lets look at some of the key elements that I consider important in regards to user interface and user experiece design.

below are the list of topics.
You can either scroll down or click on a link to jump straight to a topic.


Usability is about the relationship between an interface and its ease of use. The idea is to make an interface, of any kind, feel natural and intuitive. There are many methods one can use to accomplish this, and a major one to consider is the 5 quality components.

  • Learnability: how easy is it to accomplish basic tasks the first time.
  • Efficiency: how quickly can a user perform tasks.
  • Memorability: when a user returns, how easy is it for them to use the task again.
  • Errors: how many errors does the user encounter upon their first visit.
  • Satisfaction: how pleasant is it to use the design.
back to top

User Requirements

this element focuses on the needs of the user. we can gather their needs by focusing on the User Requirements Analysis


User requirements analysis focuses heavily on how to analyze users and their experience through studies and user workshops. It is about breaking down user data and using that data to help better the product.

back to top

User experience design

This element focuses on how to enhance the user satisfaction and usability of an interface.

the Norman door focuses on designs that neglect user requirements or has flaws in design. an object may be well designed but could be poorly designed for user experience.

back to top


"design" focuses on the looks and aesthetics of the interface.

the goal is make an interface that is easily usable as well as visually appealing. Immediate access helps the users get to where they want, while a clean minimal aesthetic and use of "white space" can help point the users to the right place.

Arm Chair Export is a great example of immediacy and great aesthetics.

back to top


Understanding where to put useful navigation items is key to findability. The F-shape pattern can help us with this.

Research has shown us how important the F-shape pattern is, and how we can use it as designers. The pattern shows where users eyes generally move to when engaging with a website or device. Not only that, but there are multiple patterns like Layer-cake, spotted, marking, bypass, and commitment. Looking into these patterns can help us identify how users interact visually with their devices.

back to top

Wireframes & Prototypes

focusing on a wireframe first is creates a foundation for an interface.

A wireframe is essentially the basis of a prototype. Do not focus on the aesthetics here, just the core foundation of your site. Consider where your main content will go, the navbar, and any additional menus or side bars. think about these topics and put them down on paper. draw an outline of your interface first before making any coding and/or engineering decisions.

back to top


Typography is essential for user readability. The text in your interface needs to be user friendly.

always design for legibility and readability. keep line length between 50 - 100 characters (30 - 40 for mobile). Keep decorative fonts for headings and logos and consider using a serif font for body text. Visual hierarchy is also important, as it is used as a navigational tool to move the user's eyes around.

back to top


Accessibility focuses on making user interfaces available for everyone, regardless of "disabilities"

When it comes to creating accessible websites, try to design for people who are

  • Aging / Elderly
  • People with reading difficulties
  • People with vision and color disorders
  • People with physical disabilities (touch input)
back to top

Usability testing

This element focuses on gathering user data via testing methods. This involves gathering data with real users in a controlled environment.

There are many ways to gather user data, but a very important thing to remember is how often you should be testing. You should be conducting user tests as often as possible. Consider regression testing; which is testing a product, fixing the issues noted, then testing again. This method of testing reminds you to put the user first, and always fix errors through every step of the creative process.

back to top

"design" vs design

This element focuses on the differences and similarities of visual design versus user centered design

That means creating a design that is functional and aesthetically pleasing. They need to complement each other in a way that a user can quickly access the information they need, while see being impressed with the visual design. Navigation plays a huge part in this. Portland Cascade Record Pressing in Oregon does a great job at this.

back to top

Mobile design

Mobile design focuses on creating a great user experience on smaller screen sizes.

When thinking about mobile design, consider these four principles.

  • Respect the platform: consider the operating system and how it navigates. If its iOS, design the interface to reflect the design and navigation of its basic interface.
  • Focus on the customer benefit: consider the use case of the user. If the user is on a mobile interface, it is safe to assume they will use your interface on the go. Design for quick access.
  • Think device first: Mobile devices tend to have a lot to offer, like touch, pressure, notifications, etc. you can use these options to your advantage by creating a user-friendly interface that is easy to use and accessible to people with disabilities.
  • Keep scalability in mind: your interface should be able to work on more than just mobile phones. Consider tablets and larger screen devices so you do not alienate other platforms.
back to top