top of page

Interface Design Principles

In small groups we looked at 4 apps or websites and measured them against the one of each of the following aspects:

CONTROL

Feedback, Predictability, Reversibility 

CONSISTENCY

Visual & Functional

COMFORT 

Accessibility, Low Friction, Reward

COGNITIVE LOAD

Perceivability, Recognition-not-Recall

Spotify App

Our whole group were very excited by the Spotify and although we agreed that visually, quite busy this app is a pleasure to use, not only is it friction free but goes the step further to predict what you are after with frightening accuracy. 
IMG_9863.jpeg
IMG_9865.jpeg
IMG_9864.jpeg

CONTROL 

Predictability: 

  • Overall, predictable. Follows industry norms such as other media providers e.g Netflix, Prime video etc

  • Each button is clearly labelled

  • Visual hierarchy is easy to read

  • Navigating the buttons, each new window stays the same

  • The main navigation is fixed to the footer 

 

COMFORT

Low Friction: 

  • Loads quickly 

  • Actions are easy to interact with

  • Algorithms, suggestions based on previous searches, search history 

  • Integrates well with other apps, easy to share music with other people

  • High friction for unsubscribed users 

 

CONITIVE LOAD

Perceivability:

  • Effective grouping e.g. Playlists/ suggested artists etc

  • Uniform layout 

  • Skeuomorphs are universal for us

  • There are clear sections/ groups to icons 

  • Additional info e.g concerts of artists, about the artist, monthly listeners, links to social media 

  • Follows the same structure for different pages 

  • Bluetooth to various external media 

  • Discover Weekly feature is useful and rewarding 

 

CONSISTENCY 

Visual:

  • Everything is uniform 

  • Simple colour scheme 

  • Artwork for playlists is tasteful 

  • Typefaces are simple and clear, all the same but carrying weights and contrast 

Trainline App

The Trainline App was overall another popular choice with the group, finding the visual cues easy to decipher. We agreed that we always come away from an interaction satisfied with the speed and ease at which we could achieve our goals here.
IMG_9867.jpeg
IMG_9866.jpeg
IMG_9868.jpeg

CONTROL

Reversibility:

  • Easy to undo 

  • Easily refreshable with the pull-down swipe

  • Once at checkout, have to go back multiple pages to alter times/ booking

  • Easy to edit information 

 

COMFORT

Accessibility: 

  • Simple layout

  • Not the biggest contrast in active buttons 

  • Call to action button very clear and large 

  • Skeuomorphs are recognisable 

  • Train time page is quite busy, lots of information however most important information has clear hierarchy 

  • Sometimes slow to load

  • Good additional information e.g delays/ live tracker/ changes 

 

CONGNITIVE LOAD

Recognition, not recall: 

  • Chronological

  • Easily used by people new to the app 

  • Hand holds the user from start to finish

  • Universal icons

  • No ambiguity: what to fill in, all icons has text underneath 

 

CONSISTENCY 

Functional: 

  • Same layout throughout, same location 

  • All buttons have the same format 

  • Easy to navigate around the app

Osk Studio Website 

Our group found this website frustrating and even made us feel a little uncomfortable upon viewing and attempting to navigate. Interesting idea once we understood what was happening but overall very little to the website. 
Screenshot 2022-09-20 at 12.03.51.png
Screenshot 2022-09-20 at 12.04.19.png
Screenshot 2022-09-20 at 12.04.38.png
Screenshot 2022-09-20 at 12.04.10.png
Screenshot 2022-09-20 at 12.04.03.png
Screenshot 2022-09-20 at 12.04.28.png

CONTROL

Reversibility: 

  • Not easy to reverse actions 

  • Not clear that you have to wait until it resets

  • The navigation buttons are useful 

 

COMFORT

Reward: 

  • Novelty factor wears off very quickly 

  • Not a lot of reward

  • Underwhelming 

  • Quickly becomes annoying 

 

CONGNITIVE LOAD

Recognition-not-Recall: ​

  • Unclear as to how to exist or navigate 

  • Navigation home bar is in the same place like other websites 

  • Curser icon is different and confusing, doesn’t use existing patterns in the real word

 

CONSISTENCY

Visual:

  • Text is the same size, style and weight everywhere 

  • Visual hierarchy is clear 

  • Headers underlined and changes when clicked on 

  • Links are hard to identify under you scroll over them 

  • Visual consistency 

Noon Editions Website

This website is very beautiful, challenging current navigation and layout norms, I suspect this is intentional and a deliberate ploy to get the audience to engage with the content in a different manner to how they might on other magazine websites. We concluded that this website needs time to be absorbed like you might do with a physical magazine of this type.
Screenshot 2022-09-20 at 12.05.25.png
Screenshot 2022-09-20 at 12.05.11.png
Screenshot 2022-09-20 at 12.06.08.png
Screenshot 2022-09-20 at 12.05.53.png
Screenshot 2022-09-20 at 12.05.41.png
Screenshot 2022-09-20 at 12.06.40.png

CONTROL

Reversibility: 

  • Not overly clear way of getting back to the homepage with the pictures

  • Have to reload the website to reset

  • Doesn’t follow normal conventions of a website 

 

COMFORT

Low Friction:

  • Site navigation is very confusing, high friction

  • Links are not clear 

  • Typefaces stay the same when active or not clicked on

  • Busy to look at, but minimalist in colours ad typeface 

  • Doesn't follow any conventions 

  • Brand name, 'Noon' is the same size and weight as the other type on the page: not clear

  • ‘Noon’ remains static in the top left hand corner and gets in the way of other information

  • Not a website to be rushed through, navigates slowly like you would when reading a magazine

  • Easier to navigate on a phone, creates less columns and easier to understand but not easier to navigate  

 

CONGNITIVE LOAD

Recognition, Not Recall: 

  • Doesn’t have the same typical magazine website layout 

  • Page navigation is not clearly labelled 

  • Multiple click throughs to get to one place 

  • Change of subject matter is confusing too

  • No apparent relation from one thing to the next 

 

CONSISTENCY

Visual:

  • No visual clues as to what is interactive 

  • Cursor changes when different things are clicked on

  • Photos change size, thumbnails etc. 

  • Photography is sophisticated

  • No consistency as to where the shopping cart is

bottom of page