Interfaces

This module covers week 3 of the course.

Note that this material is subject to ongoing refinements and updates!

Types of interfaces

There are 20+ types of interface:

Command
Graphical
Multimedia
Virtual reality
Web
Mobile
Appliance
Voice
Pen
Touch
Gesture
Haptic
Multimodal
Shareable
Tangible
Augmented reality
Wearables
Robots and drones
Brain-computer interaction
Smart (Sharp et al., 2019, pp. 194-195).

Graphical User Interfaces (GUI)

For a long time, computers were mainly operated via the command line. Check out some of the UNIX commands: Could you operate a computer relying only on these?

Graphical user interfaces (GUIs) brought great change to computer interfaces, giving us:

Windows (as a section of the screen)
Icons
Menus
Pointing devices (especially the mouse, and in more recent years, trackpads)

Some examples of early GUIs.

Several styles of menu design:

Flat
Dropdown
Popup
Contextual
Collapsible
Mega

Points about interfaces particularly relevant to this course

Icons are said to be easier to learn and remember than commands. Icons are in pretty much every modern software interface, and many hardware interfaces too.
Multimedia combines different kinds of media into a single interaction - often incorporating video, text, graphics, animation, etc. Previously delivered on CD-ROMs, you would now most likely encounter such content online.
Early webpages were mainly text-based, with hyperlinks used to navigate between pages. Now, websites aim to be visually pleasing. Websites now also need to consider multiple platforms beyond the desktop, such as smart phones and tablets.
Includes skills associated with graphic design (font choices, colour theory, etc.), but also how to code in HTML (hypertext markup language) and CSS (cascading style sheets).
As websites have grown more complex, the "breadcrumb" style of navigation has emerged to help users orientate themselves. Large websites like Amazon or Rakuten use breadcrumbs to help users keep track of where they are.

For this course, we will focus on web pages as a way of creating prototype applications.

Mobile interfaces

Mobile interfaces are designed to be used while the user on the move. Phones especially are pervasive today. Touchscreens are how many of us now interact online.

Fitt's law

Fitt's law means that human error is often down to poor design rather than us making mistakes. What this means in the context of UX/IxD is that clickable/touchable areas should be designed in such a way as to reduce the number of errors. In particular, buttons and other touchable areas shouldn't be too small for the average user.

Budiu, R. (2022). Fitts's Law and Its Applications in UX. https://www.nngroup.com/articles/fitts-law/

Web coding

Hypertext markup language (HTML) is used to publish the content of web pages. Text can be formatted into paragraphs, lists, headings, tables, forms, and more, and links to other content can be added. It can also be used to embed media, such as videos, audio, PDF documents, and so on.
HTML is now at version 5, which is supported by all of the major browsers — Chrome, Safari, Firefox, and so on. See the W3C’s specifications.
While HTML is used to “mark up” (encoding) a web page’s content, cascading style sheets (CSS) are used to control the way a page looks - which colours it uses, which fonts it uses, where different sections appear, and so on.

Generally, images for the web should be in JPG or PNG format. PNG allows for transparency.

Website design resources

Smashing Magazine — for articles and tutorials on the visual and coding aspects of web and app design.
One Page Love — examples of one page webpages designed well.
Awwwards — a gallery of good web design.
W3C schools — coding tutorials.
Bootstrap — CSS templates for rapid prototyping.

When coding, refer to W3 Schools' HTML and CSS resources. Mendez's The Missing Link: An Introduction to Web Development and Programming (2014) is also a useful resource.

Interesting examples of interface prototypes

MIT Media Lab is one of the top departments for Interaction Design, and responsible for early prototypes of many of the devices we take for granted today.
WIRED. (2015). 9 MIT Media Lab Innovations that Changed the Future. https:// www.youtube.com/watch?v=F_ci1Yb6MCA