User Interface fundamentals

UI principles:

1. Clarity, Clarity, Clarity – users must recognise it, care about it, understand it and be able to interact with it

2. Interfaces exist to enable interaction – interfaces do a job and can be measured but aren’t utilitarian.

  • Interfaces help clarify, illuminate and enable
  • Interfaces show relationships and manage user expectations
  • Interfaces give us access to services.
  • the ideal interface doesn’t require help to use it or navigate – if not ideal, then build inline help to aid interaction

3. Keep attention – focus attention in a world of continuous interruptions.

  • Don’t litter with useless elements.
  • Don’t clutter with intrusive adverts or images

4. Let users be in control

  • don’t create software that pushes users into unplanned interaction
  • people don’t like surprises, make sure that they end up where they expect to be
  • keep users in control through causation messages, by giving insight into what to expect next

5. Interfaces help us interact with objects – are those buttons, menus, graphics aiding or distracting the users from interacting

6. One primary action per screen – this makes it easier to learn, easier to use, easier to add to.

  • Show people only what is necessary
  • progressive disclosure
  • avoid over explaining or trying to show everything at once

7. Keep secondary actions second. If your primary goal is to have an article read then don’t fill the screen with share icons.

8. Design the next step – anticipate the users next move and design for it.

  • Provide an opening for more interaction
  • Start with zero state – the state in which no interaction has happened yet which should give direction

9. Designed elements should look how they behaviour ie form follows function

10. Consistency matters – elements that behave the same should look the same.

11. Strong visual hierarchy – have a clear viewing order that is consistent on every screen.

12. Smartly organise your UI elements so that users don’t have to think about how elements are related to each other.

13. Use colour in the right context – vibrant colours are not easy on the eye if you are expecting the user to sit a long time in front of the screen reading your content.

14. Build on other design disciplines – typography, copy writing, information architecture



Creating Frameworks

Types of frameworks

These frameworks don’t stand alone, they overlap

Structural frameworks

  • creating spaces, flow, movement through the enviroment we move in
  • in the offline world this is known as architecture
  • in the online world known as interaction design/information architecture
  • opportunities for access and flow are created through links, actions, menus, form submission

Visual frameworks

  • affects they way we see things
  • the visual design in a product, brochure, advert, web page will affect how users see and interact with it
  • if the visual heirachy is strong and correct users will naturally follow the set path designed to enhance user experience
  • eg are elements appropriately weighted so that their relationships are clear ie a main heading is larger than sub headings.
  • eg are their distracting elements or does the users eye naturally flow to the most important information

Social framework

  • affects the way we interact with others
  • can the user like, share, comment, favourite something?
  • can relationships be imported or exported and more importantly does it make sense to do so?
  • relatively new framework that is still be explored

Conceptual framework

  • primary goal is clarity
  • affects the way we think about something
  • more often communicated through words and images
  • words and images shape the way users see and experience design and this will become your brand





Understand you products lifecycle

Usage life cycle

  • Map the users life cycle to your design.
  • There will be a start, middle and end
  • Each stage will be characterised by different goals and behaviours
  • Each stage has different challenges – what was a show stopper isn’t a problem later on; problems regular users start experience doesn’t occur to someone just starting out.

1. First Contact

  • users discover your product or brand
  • users become aware of you
  • users perceptions are formed – do they understand your design? Do they understand what it means for them

2. First time use

  • most critical point in life cycle
  • usually very quick in the life cycle phase and often overlooked
  • first engagement user has with your product or design
  • based on first impressions users will make a decision to continue long-term or to quit and find something else

3. Ongoing use

  • the first impressions have encouraged the user to continue engaging
  • the user ‘got’ what your product was for and how it could help them
  • the user regularly engages with your product/ design

4. Passionate use

  • this is the desire of every designer
  • this stage is rarely attained
  • user becomes immersed in your design, passionate about it and shares it with others
  • this is how organic growth happens

5. Death

  • users stop interacting with your product
  • this can happen at any point during the life cycle: design might be too hard, no longer solves their problem, might have found something better
  • post mortem of designs can give valuable insight esp on life cycles that were cut short.

Know your exit points

  • Exit points are those critical points that you lose users.
  • There are usually common exit points for users – spotting the trend and changing the design will increase retention of users
  • Exit points usually have to do with context of use and meaningfulness to the user


  • I don’t understand how this is valuable to me
  • I don’t have any friends here
  • I can’t see how I would do anything productive here other than manage my contacts
  • I keep getting messages from people I don’t know

Other things to be aware of with exit points:

  • Exit points aren’t always necessarily interface design issues – they could happen merely in the mind of the users who has changed their goal, mindset or requirements
  • Other people or users behaviour can create an exit point


UX design: Techniques to understand your user

You are not the user

You know your product intimately. You have made decisions, sketches, wireframes, made changes and fashioned the finished product. This is your ‘baby’.

How many of your target audience will be using your designed product for the first time?

  • why will they be interacting with your product?
  • what need to they have?
  • what goal are they trying to achieve?
  • what previous experiences would your users have had? It could have been good, bad or mediocre
  • what are the users assumptions – what are the flaws in their assumptions and how can you address that?
  • understanding your user means you need to be objective

Techniques you can use to understand your user:

  • User interviews – guided conversation with existing clients about their needs, assumptions and requirements
  • Contextual inquiry – understanding the use of the product within the users environment
  • Surveys
  • Card sorting – grouping tasks for individuals or groups to perform in order to establish patterns and areas of confusion.
  • Usability testing – asking users to perform a series of tasks to understand their interaction and to identify problem areas.


Steps to solving UX problems

Find out what the problem is.

Solving exiting problems

1. Beware of the novelty trap – too much focus on the new and not enough on the purpose

2. Focus on solving user problems and pains – won’t necessarily result in something spectacular, but will improve interaction.

3. Sometimes solving an old problem is more important and easy to miss because it may be mundane, obvious and overlooked.

4. Focus on the now, not on the new eg the pain users experience now – bad service, faceless pages, late penalty fees etc

Solutions are easy if you know the problem

1.  Solving the problem is good design

  • It means eliminating one’s own assumptions and applying problem-solving techniques in order to identify the problem area
  • It means stating the problem in such a way that a solution can be found

2. Techniques to help

  • Kaizen – asking ‘why’
  • Assumption Reversal – taking your assumptions and reversing them to trigger innovation.
  • Analogy – see if a similar problem has been solved in another industry

Draw informal sketches

1. Use a thick permanent marker to sketch ideas. If it doesn’t work, start a new drawing. This is a sketch not an art work.

2. This is not a deliverable. This is a problem solving technique. This is more about what you have learnt than stylish image.

3. The purpose: to explore and refine ideas in a quick, iterative and visual manner with little overhead.

UX design Role

User experience designers have to be objective

  • The solution to a problem is not about ‘me’, the solution is about those who are experiencing the ‘pain’
  • As designers and critques we have to get out of our own head and into the heads of the intended audience


Part of the job description:

  • Wireframes
  • flow diagrams
  • personas
  • card sorts
  • content strategy documents

The most important role:  being involved in the day to day feedback loop of your user’s experience

  • Ask about your feedback channels: support emails, call-center requests, twitter mentions
  • Do regular surveys
  • Do regular user testing
  • Investigate
  • Demand data

Deliverables are not divorced from delivery!

Experience is not captured in the deliverables but by talking to the end users about their interaction with the finished product.

UX design

Rules of UX design:

1. Everything a designer does affects the user’s experience.

2. Adding something or leaving it out needs to fit with the intended message – a positive user experience

3. Everything: colour, type, capitalization, placement, additions, subtraction is part of communication

4. Ask: does this element support or contradict what I am trying to communicate

What makes the user experience?

1. Everything your user interacts with makes up their user experience: brand, website, call centre, advertisements, company, social media etc

2. All aspects of interaction needs to be flawless: the software, the copy-writing, the graphics, layout, flows, physical experiences

3. All touch points are part of the user experience