lesson 1.5 - interfaces on computing & handheld devices

Desktop and mobile interfaces differ fundamentally in their design, with desktops utilizing a mouse and large screen for complex multitasking, while mobiles prioritize touch input and a focused, single-app experience on smaller screens, a problem solved by responsive design.

Ever wondered why your phone's screen looks so different from your computer's, even when you're looking at the same app? Or why an e-reader is way simpler to use than a tablet? It’s all about the User Interface! Today, we’re going on a tour of the devices you use every day—computers, laptops, phones, and tablets—to figure out how their interfaces are tailor-made for the job they do. Get ready to become a UI detective!

Learning Outcomes

The Building Blocks (Factual Knowledge)

Recall the different types of computing devices (e.g., desktops, laptops).

Describe the features of user interfaces found on computers.

Recall the different types of handheld devices (e.g., smartphones, tablets, e-readers).

Describe the features of user interfaces found on handheld devices.

Analyse the differences between interfaces on various computing and handheld devices.

The Connections and Theories (Conceptual Knowledge)

Describe how hardware factors (like screen size and input method) influence the design of a user interface.

Analyse why a user's context (e.g., being mobile vs. sitting at a desk) impacts which interface is most effective.

Evaluate how different devices are optimised for different primary tasks through their UI design.

The Skills and Methods (Procedural Knowledge)

Apply knowledge of UI features to identify and label them on different devices.

Analyse and compare the user interfaces of at least two different devices.

Create a comparison document that evaluates the suitability of different interfaces for specific tasks.

Digital Skill Focus: This lesson focuses on C.3.6 User-Centred Design. You will be analysing how digital products are designed with the needs, context, and limitations of the end user in mind, comparing how interfaces on computers and handhelds are optimised for different user scenarios.

So far, we've looked at the types of user interfaces, like GUI, speech, and sensor-based. Now, let's explore where we find them and why they look so different depending on the device. The two biggest families of devices we interact with are computers and handheld devices.

Interfaces on Computers

When we say computers, we're usually talking about desktop computers and s. They are incredibly versatile, designed for a huge range of complex tasks, from writing essays and coding to editing videos and playing high-end games.

Their user interfaces are built around this flexibility and the hardware they use.

Primary UI Type: Almost all modern computers use a Graphical User Interface (GUI), specifically a WIMP interface (Windows, Icons, Menus, Pointer).

Key Hardware: They are designed to be used with a keyboard and a mouse (or a trackpad on a laptop). This allows for precise control and fast text entry.

Design Focus: Computer UIs are designed for productivity and power. They pack in as many features as possible, often using menus, toolbars, and right-click options to give the user fine control over their applications. Think about software like Photoshop or Microsoft Word—they have hundreds of options available on screen!

Interfaces on Handheld Devices

This is a huge category that includes smartphones, tablets, and e-readers. While a laptop is technically a computer, its portability means it shares some design features with other handhelds. These devices are all about mobility, convenience, and often, more focused tasks.

Smartphones

The device in everyone's pocket! The UI has to work on a small screen and be used with one hand.

Primary UI Type: A touch-based GUI. The WIMP model is adapted for touch: instead of a pointer, your finger does the work! They also heavily integrate speech (e.g., Siri, Google Assistant) and sensor-based interfaces (e.g., rotating the screen, face ID).

Key Hardware: A touchscreen is the main input. This means buttons and icons need to be big enough to be tapped accurately with a finger. On-screen keyboards are used for text input.

Design Focus: The UI is task-oriented and simple. Apps take up the full screen, focusing you on one thing at a time. Navigation is based on simple gestures (swiping, pinching, tapping).

Tablets

The middle ground between a phone and a laptop.

Primary UI Type: A touch-based GUI, very similar to a smartphone but adapted for a larger screen.

Key Hardware: A larger touchscreen. This allows for more complex layouts than a phone, sometimes showing multiple panels or more detailed information at once. External keyboards can often be attached.

Design Focus: Tablets are great for media consumption (watching videos, reading) and creative tasks (drawing, photo editing). Their UIs often have larger icons and more space between elements compared to a desktop, making them feel less cluttered and easier to use with touch.

E-Readers (e.g., Amazon Kindle)

These are highly specialised devices with a very specific purpose: reading books.

Primary UI Type: A very simplified touch-based GUI, often combined with a menu/form system.

Key Hardware: The unique 'E-Ink' screen, which looks like paper and is easy on the eyes. It has a slow refresh rate, so the interface avoids fast animations. It uses a touchscreen for page turns and navigation.

Design Focus: The entire UI is built for an optimal, distraction-free reading experience. The main screen is the book itself. Menus for the library, settings, and the store are kept simple and out of the way. The focus is on clarity and battery life, not flashy features.

The key takeaway? A device's purpose and its hardware (screen size, input method) are the biggest factors affecting the choice and design of its user interface.

Task UI Detectives: The Matching Mission!

Now it's time for you to do some shuffling.

Get organised

Download a copy of the "Device Showdown" document.

Remember to click Enable Editing on the yellow bar at the top if it appears.

Part 1 - Get sorting

Your teacher will give you an envelope with 16 jumbled cards. Your mission is to work in a pair to sort them into four complete sets. Each set must contain:

One Image card (A, B, C, or D)

One Primary UI Type card (1, 2, 3, or 4)

One Key Hardware card (W, X, Y, or Z)

One Design Focus card (i, ii, iii, or iv)

Lay the four completed sets out on your desk. Once you are confident, type the correct combinations into your document (e.g., "Desktop Computer = A, 2, W, i"). Ask your teacher to check your answers.

Part 2 - Be The Scribe

Now, it's time to make your own notes on the features of these four classes of device. Complete the table on the worksheet based on the contents of the cards. Try to use the highlighter or the formatting tools to emphasise the key words.

Part 3 - Pros and Cons

Finally, get your thinking caps on and, for each device type, come up with one strength and one weakness for the UI on that device.

Submit

Make sure you name is in the space at the top of the document.

Submit your work for checking.

Outcome: I will have correctly identified the features of four different devices and created a detailed comparison table in my digital document that analyses the user interfaces of two of them.

Today you have learnt how the purpose, screen size, and input method of computers and handheld devices directly influence the design of their user interfaces.

Application to the Component Sample PSA

For the Majestic Cinema project, you need to design a digital information point that will be used on its website. The specification states it "must be accessible on a range of devices, from desktop computers to customers' handheld devices."

This lesson is crucial because it makes you think about how your design will need to adapt. A customer looking up film times on their desktop computer has a large screen and a precise mouse pointer. They can see lots of information at once. However, a customer checking times on their smartphone while walking to the cinema has a small screen and is using their thumb. Your interface must work brilliantly for both! This means thinking about:

Button size: Are your "Book Now" buttons large enough to be easily tapped on a small phone screen?

Layout: How will your four screens re-arrange themselves to fit on a narrow phone screen versus a wide desktop monitor? You can't just shrink everything!

Information: Do you show less information on the mobile version to keep it clean, with options to see more details if needed?

Understanding the UI differences between computers and handhelds is the first step to creating a responsive design that gives every customer a great experience, no matter what device they are using.