lesson 07 - 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.
(Image: A split-screen image. On the left, a person sits at a desk using a large monitor, mouse, and keyboard. On the right, a person is on a bus, using a smartphone with one hand.)
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.
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.
(Video: Embed a short screen recording of someone using a desktop OS like Windows or macOS to multitask effectively, showing window snapping, multiple open apps, and file dragging.)
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.
(Animation: An animated GIF showing various touch gestures on a smartphone screen - swipe, tap, pinch, long-press - and the corresponding UI reaction.)
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: July 7th, 2025