lesson 1.9 - hardware & software influences on ui
This page delves into the technical foundations of UI design, explaining how the capabilities of hardware, the type of software platform, and the quality of connectivity influence every aspect of a user interface.
Ever wondered why apps look slightly different on an iPhone compared to an Android phone, or why a website layout changes completely between your laptop and your phone? It's not magic! Today we're diving into how the physical bits of a device (hardware) and the programs running it (software) dictate how interfaces are designed to work best.
Learning Outcomes
The Building Blocks (Factual Knowledge)
The Connections and Theories (Conceptual Knowledge)
The Skills and Methods (Procedural Knowledge)
Recall different types of operating systems/platforms (e.g., Windows, macOS, iOS, Android).
Recall different types/sizes of screens (e.g., touchscreen, traditional display, small mobile, large desktop).
Recall different types of user input methods (e.g., keyboard, mouse, voice, gestures).
Recall examples of hardware resources (processing power, memory).
Recall examples of emerging input technologies.
Describe how operating systems can influence UI design (e.g., design guidelines, platform conventions).
Describe how screen size and type impact layout and interaction possibilities.
Describe how different input methods require different UI design considerations.
Describe how available hardware resources can limit UI complexity.
The Connections and Theories (Conceptual Knowledge)
Analyse how the choice of hardware (e.g., device type, screen size, input method) constrains or enables specific UI design choices.
Analyse how software factors (e.g., operating system conventions) influence user expectations and the design of intuitive interfaces.
Evaluate the suitability of different UI designs based on the target hardware and software platform.
The Skills and Methods (Procedural Knowledge)
Apply knowledge of hardware and software influences when analysing existing user interfaces.
Apply understanding of platform conventions when suggesting UI design improvements.
Create simple design recommendations based on hardware and software constraints for a given scenario.
Digital Skill Focus: C.2.2 Evaluating Information Critically: Apply evaluation criteria (based on hardware/software context) to assess the effectiveness and appropriateness of different user interface designs across various devices and platforms.
Hardware & Software
The Puppet Masters of UI!When designing a user interface (UI), designers can't just create whatever they think looks cool. They are heavily influenced by the hardwarePhysical components of a computer (the physical parts of the device) and the softwareI have no idea what this means (the operating system and programs running on it). These factors dictate what's possible, what users expect, and what makes an interface usable.
1
Operating Systems & Platforms (C1.A1.3.6)
The Operating SystemI have no idea what this means (OS) is the core software that manages a device. Think Windows, macOS, iOS (Apple mobile), Android (Google mobile), Linux. Each OS has its own look, feel, and set of rules or platform conventions.
Design Guidelines: Major OS developers publish detailed guidelines (like Apple's Human Interface Guidelines or Google's Material Design). These suggest how buttons, menus, navigation, and other UI elements should look and behave.
Why follow them? Apps that follow these guidelines feel familiar and intuitive to users of that OS, reducing learning time. An app designed for iOS might look out of place or confusing on an Android device if it doesn't adapt.
Built-in Features: An OS provides standard features (like notifications, settings menus, share functions) that apps can integrate with. The UI needs to work seamlessly with these features.
2
Screen Types & Size (C1.A1.3.7)
Screens vary hugely, impacting how users see and interact with the UI.
Touchscreen vs. Traditional Displays:
Touchscreens (smartphones, tablets) need larger 'touch targets' (buttons, links) because fingers are less precise than a mouse pointer. Gestures (swiping, pinching) become primary interaction methods.
Traditional Displays (laptops, desktops) rely on mouse pointers for precision, allowing for smaller targets and interactions like hovering.
Screen Size & Resolution:
Small screens (smartwatches, phones) have limited space. UIs must prioritise content, use simple navigation (like bottom tabs or hamburger menus), and often break tasks into multiple steps.
Large screens (desktops, TVs) offer more space for complex layouts, multiple panels, and detailed information displays.
Responsive Design: Modern web UIs often use responsive design techniques to automatically adapt their layout to fit different screen sizes.
Websites look different on different devices
3
User Input Methods (C1.A1.3.8)
How does the user tell the device what to do?
Keyboard & Mouse: Standard for desktops/laptops. Allows for precise pointing, rapid text entry, and complex shortcuts. UIs can feature smaller icons, menus, and detailed forms.
Touch: Dominant on mobiles/tablets. Requires larger buttons, gesture support (swipe, pinch, tap-and-hold), and often on-screen keyboards.
Voice: Used with virtual assistants (Siri, Alexa) and increasingly in apps. Requires clear audio feedback and simple, spoken commands. The visual UI might be minimal or non-existent.
Gestures: Beyond simple touch, this includes motion gestures (tilting a phone) or camera-based gestures (waving a hand). Requires intuitive mapping between the gesture and the action.
Sensors: Devices use sensors (GPS, accelerometer, light sensor) as inputs. The UI might change based on location, orientation (portrait/landscape), or ambient light.
4
Hardware Resources Available (C1.A1.4.1)
The power under the hood matters!
Processing Power (CPU): A slower CPU might struggle with complex animations or processing large amounts of data quickly, forcing designers to simplify the UI.
Memory (RAM): Limited RAM might restrict the number of features or apps that can run simultaneously, influencing multitasking capabilities within the UI.
Storage Space: Devices with limited storage might require UIs that rely more on cloud data or have smaller app sizes.
5
Emerging Technologies (C1.A1.4.2)
New tech brings new UI challenges and possibilities!
Virtual Reality (VR) / Augmented Reality (AR): Requires entirely new 3D interfaces, often controlled by head movements, hand tracking, or specialised controllers.
Brain-Computer Interfaces (BCIs): Still experimental, but future UIs might respond directly to thought patterns.
Understanding these hardware and software influences is key to designing user interfaces that aren't just pretty, but are genuinely usable, efficient, and appropriate for the device and its users.
Task Mind-Map Masters & Dev Tool Detectives
This is a two-part task. First, you'll map out what you've learned, and second, you'll become a digital detective!
1
Map The Knowledge (10-15 minutes)
1
Review the Page content notes for this lesson.
2
Go to an online mind-mapping tool like MindMup (https://www.mindmup.com/).
3
Create a new mind map. You'll use this to summarize all the key points from the notes.
Your central topic (the middle node) should be: Hardware & Software UI Influences.
Create child-nodes for each of the 5 main sections in the notes:
Operating systems & platforms
Screen Types & Size
User Input Methods
Available Hardware Resources
Emerging Technologies
Add the key ideas (in bold) from each section as smaller child-nodes.
If you are able, add connective labels onto the lines.
When finished, save or export an image of your mind map.
2
Dev Tool Investigation (20-25 minutes)
Your teacher will give you the names of 2 websites to investigate (like BBC News or YouTube).
Open the first website in your desktop browser.
Open the Developer Tools by pressing the F12 key (or Ctrl+Shift+I).
Find and click the "Toggle device toolbar" icon. It looks like a small phone and tablet (📱).
You will now see the website as if it's on a device. You can change the device using the dropdown menu at the top (it might say "Dimensions: Responsive").
Investigate
1
Desktop View: Look at the site normally (turn the device toolbar off). How is the menu and content laid out?
2
Tablet View: Turn the toolbar on and select a tablet (e.g., "iPad Air"). What changed?
3
Mobile View: Now select a phone (e.g., "iPhone 12 Pro"). What major changes do you see now? Pay close attention to the navigation menu and the page layout (columns).
Repeat this process for the second website.
Summarise Your Findings
In a new word-processed document, create two small summaries (one for each website).
For each website, answer these questions:
1
What was the biggest change you saw in the navigation menu when switching from desktop to mobile?
2
What happened to the layout (e.g., columns) when you switched to the mobile view?
3
Why do you think the designers made these changes? (Hint: think about screen size and using touch instead of a mouse).
Outcome: I will create a digital mind map summarizing the lesson's content and write a short summary comparing the desktop, tablet, and mobile UIs of two websites using browser developer tools.
Application to the Component Sample PSA
Understanding hardware and software influences is crucial for designing The Majestic Cinema's digital information point (Component 1 PSA) effectively.Screen Size/Type: The brief states the UI must work on desktop computers and handheld devices. This immediately signals the need for a responsive design. The layout designed for a large desktop screen (potentially showing film posters side-by-side) will need to adapt significantly for a small mobile touchscreen (likely stacking content vertically). Designers must consider how much information is visible at once and ensure readability on smaller screens (C1.A1.3.7).
Input Method: Desktop users will use a mouse and keyboard, allowing for precise clicks and easy text entry (e.g., in the booking form). Mobile users will primarily use touch, requiring larger buttons (like "Book Now"), clear touch targets for selecting film times, and potentially simplifying the booking form fields (C1.A1.3.8).
Operating System/Platform: While it's a website integrated UI, if specific features relied on device capabilities (like using GPS for directions - though not required here), designers would need to consider differences between iOS and Android. More subtly, users might expect the website's navigation or button styles to feel somewhat familiar based on their device's OS conventions, influencing aesthetic choices (C1.A1.3.6).
Hardware Resources: While less critical for a simple information point, ensuring images (like film posters) are optimised is important so the site loads quickly even on older phones with less processing power or memory (C1.A1.4.1).
Therefore, when creating the project proposal, designs (Task 2), and prototype (Task 3) for The Majestic Cinema, students must constantly consider how the interface will adapt and function effectively across these different hardware and software contexts to meet user requirements. The review (Task 4) should also evaluate how well the prototype adapts to these different scenarios.
Out of Lesson Learning
⭐ The Analyst's Insight
Task: Identify three specific hardware or software factors discussed in today's lesson that would directly influence the design of the "What's On" screen for The Majestic Cinema's information point. Briefly state what the influence would be for each factor.
Example Format: Factor 1: [Name the factor, e.g., Mobile Screen Size] -> Influence: [Describe the impact, e.g., Needs a single-column layout].
Task: Identify three specific hardware or software factors discussed in today's lesson that would directly influence the design of the "What's On" screen for The Majestic Cinema's information point. Briefly state what the influence would be for each factor.
Example Format: Factor 1: [Name the factor, e.g., Mobile Screen Size] -> Influence: [Describe the impact, e.g., Needs a single-column layout].
⭐⭐ The Problem Solver's Challenge 🤔
Task: Focus on the "Ticket Booking" screen for The Majestic Cinema. Explain how the UI design for selecting the number of adult and child tickets would need to be different to work well for:
Task: Focus on the "Ticket Booking" screen for The Majestic Cinema. Explain how the UI design for selecting the number of adult and child tickets would need to be different to work well for:
1
A user on a desktop computer using a mouse.
2
A user on a small smartphone using touch input. Describe the specific UI elements you would use for each (e.g., dropdown, +/- buttons, text input) and justify why they suit the hardware context.
⭐⭐⭐ The Responsible Innovator's Dilemma ✨
Task: Research common accessibility features built into iOS (Apple) and Android (Google) mobile operating systems (e.g., VoiceOver/TalkBack, Dynamic Type/Font Scaling, Switch Control). Choose three distinct features. For each feature:
~2 Explain how the design of The Majestic Cinema's website UI could specifically support or take advantage of this feature to improve accessibility for users with disabilities on mobile devices.
Task: Research common accessibility features built into iOS (Apple) and Android (Google) mobile operating systems (e.g., VoiceOver/TalkBack, Dynamic Type/Font Scaling, Switch Control). Choose three distinct features. For each feature:
1
Briefly describe what it does.
Last modified: October 24th, 2025
