lesson 05 - 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.
When we talk about 'using a computer', we could be talking about a huge range of devices, from a powerful desktop PC to the smartphone in our pocket. While they can all access the internet and run applications, the way we interact with them—their user interface—is fundamentally different. Understanding these differences is key to good design.
Learning Outcomes
The Building Blocks 🧱 (Factual Knowledge)
The Connections and Theories 🔗 (Conceptual Knowledge)
The Skills and Methods ⛏️ (Procedural Knowledge)
Recall the common types of user interfaces found on desktop computers (e.g., GUI, text-based).
Describe the types of interfaces typically used on handheld devices like smartphones and tablets (e.g., GUI with touchscreen, speech).
Describe how interface design is influenced by the physical characteristics of a device, such as screen size and input methods (e.g., keyboard and mouse vs. touchscreen).
The Connections and Theories 🔗 (Conceptual Knowledge)
Describe why a graphical user interface (GUI) is the dominant interface type for both computing and handheld devices.
Analyse how the user experience for 'The Majestic Cinema' information point would need to adapt between a large desktop screen and a small handheld device.
Evaluate the importance of responsive design, which allows a user interface to adjust to different screen sizes, for the success of the cinema's digital information point.
Skill Focus: Digital Communication & Collaboration: Using collaborative workspaces.
The Skills and Methods ⛏️ (Procedural Knowledge)
Apply collaboration skills by sharing a document containing design ideas for the Majestic Cinema project with a partner, setting appropriate permissions (e.g., 'editor' or 'commenter').
Apply knowledge of different devices to create two separate design sketches for the 'Home' screen: one for a desktop computer and one for a handheld phone.
Create comments and suggestions within a shared document to provide constructive feedback on a classmate's interface design ideas.
The Desktop & Laptop: Masters of Multitasking
The traditional desktop computer, and its portable cousin the laptop, are designed for productivity and complex tasks. Their interfaces are built around two key things: a large screen and a mouse & keyboard.
WIMP is King: The interface is the classic WIMP (Windows, Icons, Menus, Pointer) we learned about. The precision of the mouse pointer allows for small icons, complex menus, and tiny links.
Window Management: The large screen real estate is designed for multitasking. You can have multiple windows open side-by-side, easily dragging and dropping content between them. This is perfect for writing a report while referencing a webpage.
Power Users: These interfaces cater to power users, with features like keyboard shortcuts and complex file management systems.
The Smartphone & Tablet: The Touchscreen Titans
Handheld devices like smartphones and tablets have a completely different design philosophy. Their interfaces are built for portability and touch input.
Direct Manipulation: Instead of a pointer, you use your finger to directly touch, swipe, and pinch the elements on the screen. This means buttons, icons, and other interactive elements must be much larger and have more space around them to avoid accidental taps.
Single-Task Focus: While modern mobile operating systems can multitask, the interface is typically focused on showing one app in full screen at a time. This keeps things simple and uncluttered on the smaller screen.
App-Centric World: The experience is built around discrete applications (apps) launched from a home screen. The complex file systems are often hidden away from the user to maintain simplicity.
Gestures are Key: Mobile UIs rely on a whole new language of interaction: swiping down for notifications, pinching to zoom, long-pressing for options.
Responsive Design: The Best of Both Worlds
For our Majestic Cinema project, we need our information point to work perfectly on a desktop computer AND a smartphone. This is where responsive design comes in. A responsive website is programmed to detect the user's screen size and automatically adapt its layout. Columns will stack, images will resize, and navigation might change from a top menu bar to a pop-out 'hamburger' menu, ensuring the experience is excellent, no matter the device.
Last modified: September 19th, 2025
