lesson 01 - text-based, menu and form interfaces

Text, menu, and form-based interfaces are fundamental ways of interacting with technology, ranging from the command-line for experts to user-friendly menus and data-collecting forms that are essential for web services.

Have you ever seen a movie where a hacker types mysterious green text on a black screen? Or have you ever filled out a form online to sign up for a game or buy something? If so, you've already used two of the most common types of user interfaces! Today, we're going to dive into the world of text-based interfaces and menu/form interfaces. We'll figure out what they are, where you find them, and how you can design them to be as helpful and easy-to-use as possible.

Learning Outcomes

The Building Blocks (Factual Knowledge)

Recall the definitions of a text-based interface and a menu/form interface.

Describe the key features of text-based interfaces, such as command prompts and typed commands.

Describe the key features of menu/form interfaces, such as options, input boxes, and submit buttons.

The Connections and Theories (Conceptual Knowledge)

Analyse the suitability of a text-based interface versus a menu/form interface for different devices and purposes.

Evaluate how these interfaces meet the needs of different users, considering factors like technical skill and the complexity of the task.

Digital Skill Focus: User-Centred Design - This lesson focuses on understanding that digital products are more successful when they are designed with the needs, context, and feelings of the end user in mind. You will consider how different interfaces make tasks easier or harder for different types of people.

The Skills and Methods (Procedural Knowledge)

Apply your understanding by designing a simple text-based interface for a given scenario.

Create a design for a form-based interface that meets a set of user requirements for a specific task.

Back to basics: The Text-Based Interface

This is the original way of interacting with a computer, using nothing but your keyboard and your brain! The most common type is the Command Line InterfaceI have no idea what this means (CLI), which you might have seen in films when a hacker is at work.

A text interface

🎯 Features

It's text-only – no pictures, no icons, no mouse pointer.

The computer displays a prompt (like > or $), which is its way of saying, "I'm ready for your command."

The user must type precise, exact commands for it to work.

It provides a text-based output in response to the user's input.

⛏️ Uses

Programmers use it to run code and manage software projects.

IT technicians use it to configure network devices like routers and servers.

It's used for advanced tasks inside modern operating systems like Windows and macOS.

👍 Pros

Powerful & Fast: For an expert, it's much quicker to type one command than to click through ten different windows.

Low Resources: It doesn't need a powerful computer to run, so it's great for simple or old devices.

Automation: You can write scripts to perform complex, repetitive tasks automatically.

👍 Cons

Steep Learning Curve: You have to memorise the commands, which is difficult for beginners.

Unforgiving: One small spelling mistake in a command and it will fail.

Not Visual: It's hard to get a sense of what you're doing without any visual feedback.

Come on...

Task 1 Terminal Tutor and other adventures

Whilst text-based interfaces are not general used by the general public, it's still a useful and interesting experience and you never know, you might become a system admin at some point...

Terminal Tutor

Visit the 'Terminal Tutor' website and spend no more than 20 minutes on Chapter 1.

Write all about it

Write about what you've learnt in the space on your lesson sheet.

Outcome: I've used a simple text-based interface

Making choices: The Menu-Driven Interface

A menu-driven interface guides you by presenting a list of options. Instead of memorising commands, you simply select a choice, often by typing a number or letter. Think of an automated telephone service ("Press 1 for Sales..."), which walks you through a process step-by-step.

A menu-driven interface

🎯 Features

Displays or states a list of options, often numbered or lettered.

The user makes a selection by typing a number/letter or using arrow keys.

It guides the user through a process in a step-by-step way.

There is a limited number of choices available at each stage.

⛏️ Uses

Cash machines (ATMs).

Automated telephone booking systems ("Press 1 for sales...").

Self-service ticket machines at a train station or cinema.

Settings menus on older mobile phones.

👍 Pros

Easy for Beginners: You don't need any prior knowledge; the options are right in front of you.

Reduces Errors: It's impossible for the user to enter an invalid command.

Simple to Navigate: It requires very little learning.

👍 Cons

Inefficient: Can be very slow for experts who have to go through many menus to find the option they want.

Can be frustrating to use: If the option you need is buried deep in the menu system, it can be frustrating to find.

Inflexible: You can only do what the menu allows you to do.

Don't get confused...

Filling in the Blanks: The Form-Based Interface

A form-based interface collects structured information using labels and input fields, similar to a digital paper form. It's essential for online tasks like shopping or signing up for accounts, ensuring data is inputted accurately before the computer provides an output, such as a confirmation message.

A form-based interface

🎯 Features

Uses a combination of labels (to tell you what's needed) and input fields.

Includes various components:

Text Boxes: For short text entries like names or emails.

Text Areas: For longer messages.

Checkboxes: For selecting multiple options (e.g., "Select your interests").

Radio Buttons: For choosing just one option from a list (e.g., "Yes" or "No").

Dropdown Menus: A neat list of options that appears when you click it.

Buttons: To submit the form or cancel the action.

⛏️ Uses

Signing up for a new online account.

Booking flights, concert tickets, or a hotel room.

Online shopping checkouts.

Completing online surveys or questionnaires.

👍 Pros

Very Intuitive: Everyone knows how to fill in a form.

Prevents Errors: The form can be designed to only accept certain types of data (e.g., an email address must have an '@' symbol).

Efficient Data Collection: It's a great way to get lots of structured information from a user quickly.

👍 Cons

Can be Tedious: Very long forms can be boring and time-consuming to fill out.

Frustrating if Poorly Designed: A confusing layout or unclear error messages can make the user give up.

Security Risks: Information submitted through a form can be intercepted if the website is not secure.

Are they?

Task Designing a Booking Experience

In this two-part challenge, you'll solve the same problem—booking a ticket—using two very different interfaces. First, you'll team up to design an 'old-school' menu-driven system for booking over the phone. Then, you'll design a modern, easy-to-use form-based page for the cinema's website.

Part 1: The Phone Line

Before fancy websites, people booked tickets over the phone! Your first task is to design an automated telephone booking system for The Majestic Cinema. This system will use a menu-driven interface where the customer presses numbers on their phone to make choices.

On your mini-whiteboard or paper, map out the entire booking process.

Start with a welcome message.

Give the user a menu of films to choose from (use the films from the project brief!).

Ask them for the date, time, and how many adult and child tickets they want.

End with a confirmation of their booking details.

For each step, write out the prompt the system gives (e.g., "Please press 1 for...") and the numbered options the user has.

Part 2: The Web Form

Now, let's design the modern version! Your second task is to create a design for the online ticket booking form for The Majestic Cinema's website.

Open a suitable drawing program (like Diagrams.net).

Using the project brief, add all the required fields to your form design. You will need:

Full Name

Film Title

Date

Time

Number of Adults

Number of Children

For each field, choose the best type of form component. You must use at least three different types from this list:

Text Box

Dropdown Menu

Radio Buttons

Checkboxes

A 'Submit' Button

Arrange your form components on the page in a clear and logical order.

Outcome: I will have created a flowchart for a menu-driven telephone booking system and designed a digital wireframe for a form-based online booking page that uses a range of appropriate input components.

Today, you have learnt how text-based and form-based interfaces are used to give instructions and collect information from users.

Application to the component sample PSA

The knowledge you've gained in this lesson about Menu/Form Interfaces is directly applicable to the Component 1 Pearson-set Assignment (PSA), which uses "The Majestic Cinema" as its vocational context.

The PSA requires you to design and prototype a four-screen digital information point for the cinema's website. One of these essential screens is the 'Ticket Booking' screen.

Form-Based Interface: The PSA brief explicitly states that the ticket booking process will involve a form. The resource document provides the exact fields you'll need to include in your design: "Full Name, Email, Film Title, Date, Time, Number of Adults, Number of Children," along with a 'Submit' button. Your understanding of how to structure a clear and user-friendly form-based interface will be crucial for designing this screen effectively in Task 2 (Interface Designs) and building it in Task 3 (User Interface Prototype).

Menu-Driven Interface: The overall navigation of the information point, allowing users to move between the 'Home', 'What's On', 'Facilities & Accessibility', and 'Ticket Booking' screens, is a form of a menu-driven interface. You will need to design a clear and consistent menu system that allows users to easily select which section they want to visit.

Understanding the strengths of these interface types will help you justify your design choices and meet the user requirements of the PSA.