User Interface Patterns

by Posted on

What are User Interface (UI) Patterns?

UI patterns are disciplined ways to design user interfaces that utilise intuitiveness and take advantage of common user habits. They can be applied to any number of digital interfaces such as desktop, mobile or smartwatch and are prominent in elements such as menu bars, search facilities, and online forms.

UI Patterns on the Web

To gain a deeper understanding of how UI patterns are used on the web, as a group, we reversed engineered 4 web pages to concentrate on what their main focuses may be and listed our finding in an unordered list. These sites were Elanco, Suzuki, Shell Global and Domino’s. This was a brilliant exercise to get our minds thinking analytically and required us to notice things that may have ordinarily been overlooked. Interestingly, this is exactly the point of a good UI pattern. If a user is scrolling through a site and automatically knows to type their search into the main bar in the middle, a designer somewhere has done their job correctly.

Elanco 

  • ‘Careers’
  • Search bar
  • Refined search options
  • Image of a happy man for positive reinforcement
  • The LinkedIn section including button
  • Text boxes explaining employee and customer treatment
  • Map to show their global market

Suzuki

  • ‘Request a Test Drive’ header text
  • Logo with a white background on the blue backdrop to draw emphasis
  • Image of selected car
  • Button option to add another model
  • Extra details form to fill in
  • ‘Find a dealer > Pick a date & time > Your details’ is specifically ordered this way to ease the user through the process. If ‘Your details’ was placed first, the user may be put off by entering this amount of information and not complete the request.

Shell Global

  • ‘Shell Global Solutions’ in the top header
  • Boring call-to-actions
  • Plain and unimaginative text and headings
  • Weak branding
  • Unorganised hierarchy

Domino’s

  • Call-to-action ‘Order Pizza Now’
  • Search bar to enter your postcode for delivery/collection
  • Delivery and takeaway are different colours for easier differentiation
  • Promotion boxes for their three USP ‘All New’, ‘Message Dom’ and ‘Pizza Tracker’
  • Image of pizza to promote brand and hunger in users so they are more likely to order

Designing an Accommodation Search Page

After this exercise, we were asked to transfer these skills over to our own projects and start designing the landing page for a University accommodation website. Keeping in mind the UI patterns used in the above examples, I first listed out the most important elements that had to be included. I then rearranged them into an order of importance to have a clearer picture of what the design should include. The list is:

  1. Title with a goal statement
  2. Search bar (Select University/Area)
  3. Add filters
  4. Call-to-action button (Search)
  5. Picture of luxury accommodation
  6. Company logo
  7. Navbar

Following this analysis, I have drawn up a quick sketch of the interface I have in mind.

My landing page includes all the industry standards such as a top-tier navigation bar for global navigation, a login button in the top right and the NUA logo situated in the top left corner. Much like the examples above, there is to be the main background image to showcase an example accommodation and the main tagline to draw users in.

Due to the nature of this website being to sift through a vast database of information to reach a specific goal, refining the search facility is paramount. This is why I have decided to include a search filter option to the front page as well as the main search bar. Users will be able to toggle a collapsible field including options like ‘Rent per month’, ‘Number of Rooms’ and ‘Gender Preference’. The ‘Rent per month’ and ‘Number of rooms’ options feature as sliders because of the large scopes of the task. There are quite a few options to choose from on these scales and incorporating these onto one line saves a lot of space on the page, as opposed to if checkboxes were used.

I also drew an example of a map API so when the user has clicked on the search bar, the page slowly scrolls down to view all their options in their area as checkpoints. I believe this would greatly benefit the search process as it adds a visual element for users to engage with.

Wireframe

Digital wireframe without filters showing

Digital wireframe with filters showing

Animation of the drop-down filters

In these wireframes, designed using Abode XD, I have mocked up a low fidelity version of my idea. Encompassing UI patterns such as:

  • Logo
  • Login
  • Hero image
  • Search bar
  • Call-to-action ‘GO’ button
  • Toggle filters

I decided not to include the map feature in these initial mockups because the map would appear after the user has clicked the ‘GO’ button and I want to keep this as simple as possible.

Reflection

This was a great mini-project to look into user interface patterns and as an introduction back into wireframing. Drawing up my ideas on paper, to begin with, was beneficial for my fast paced brain. I’m really glad I chose to use Abode XD to bring these ideas to life. It took me about half an hour to pick everything up and after that, I felt comfortable. I will definitely be using this technique regularly in the future.

As a general improvement, I will, next time, make my own notes during class. I usually do, but for this lesson, I got carried away with ideas and let one of my peers make notes. This made it very difficult for me to read and challenging to post-document our group project. I remember vocalising some of my ideas and they did not get written down, and now I can’t remember exactly the point I was trying to make.

References

Elanco.com. (2018). Elanco Jobs | Animal Health Jobs & Careers. [online] Available at: https://www.elanco.com/careers [Accessed 3 Oct. 2018].

Dealer, F., Drive, B., Brochure, R. and Finance, O. (2018). Test Drive A Suzuki | Choose A Model & Book Today | Suzuki Cars UK. [online] Cars.suzuki.co.uk. Available at: https://cars.suzuki.co.uk/book-a-test-drive/ [Accessed 3 Oct. 2018].

Shell.com. (2018). Shell Global Solutions. [online] Available at: https://www.shell.com/business-customers/global-solutions.html [Accessed 3 Oct. 2018].

Dominos.co.uk. (2018). Domino’s Pizza: Pizza for Delivery or Takeaway Near You. [online] Available at: https://www.dominos.co.uk/ [Accessed 3 Oct. 2018].