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.
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.
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.
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.
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