Mad scientist coding at his computer - 'First the UI and then the World Wah ha ha ha'

What is a web apps User Interface?

A User Interface (UI) is all the elements that help you interact with a web app. These elements consist of forms, buttons, text fields, drop down lists and other website widgets. UI also includes the web apps design and presentation.

A UI can be stylish, smooth and intuitive, or it can be crazy and complicated like a mad scientist's dream.

A good UI is planned, refined, and tested. It appeals on a subconscious level. It makes a web app easy to use and gives a positive user experience. This is an emotional experience and can be the difference between success online and just another web app.

The process includes:

  • Research – we need to define who the web app is targeting and what the user needs from this web app.
  • Wireframes – Wireframes are simple sketches of your website without the polish of a finished design. This allows a quick visual exploration of the user interactions with the web app.
  • Prototyping – allows a more detailed exploration of the user interactions without the need for finished coding.
  • Review – this is an assessment to determine if the web app is on target to satisfy the end user. It is good to expose real users to the prototypes for feedback. This ensures the web app stays on track to satisfy the end users needs and eliminates the hypothetical.
  • Refinements – it is important to refine the prototype in line with the observations and discoveries within the Review stage. Often we will have another review after the refinements.
  • Specifications – once user interactions are fully defined, flow diagrams and code specifications can be produced.
  • Production of release code – finished UI designs are produced and code is implemented.
  • Go live – Finally the project is launched into the live environment. Testing and refinements continue.

The Code Cycle

The cycle of test, review and refinement is an ongoing cycle.

Testing can include:
  • Browser / device testing – this makes sure the user experience is good in all browsers and devices.
  • User testing – recruiting users, asking them to perform tasks on the web app and watching them do it.
  • A/B testing – presenting 2 versions of the UI and use analytics to see which gives better measurable results.

Analytics are constantly monitored to see what is working and what is not.

Visual comparison between a good and bad UI

Technology driving User Interface

User interface changes with the adoption of new technologies and design trends.

From desktop computers and mouses (mice), mobile devices and touchscreens, to wearables, and voice integration – it's an exciting path. Emerging user interfaces are gestures, eye tracking, and mind control.

Computers are also getting smarter and computer learning is a reality (artificial intelligence), is open source and available for everyone (see Googles'

Virtual reality is another area which is bending User Interface design.

UI is dead – long live UX

With the miniaturisation of technology UI will further change. Computers and electronic devices will mesh more and more with our lives. UI as we know it will die (like Yahoo's directory, Ask Jeeves and Netscape Navigator), however the need for a positive User Experience (UX) will remain a constant.

Until next time,