Skip to main content

STEM Labs
To Do, or Not To Do

Teacher Portal

remote control

Interacting with Computer Systems

The buttons you used on the brain are the beginning of a basic User Interface (UI). A UI is a space that allows the user to interact with a computer system (or machine). When you programmed the buttons on the brain, you gave users a way to interact with the Clawbot so they could raise and lower the arm. There are other types of User Interfaces (UIs), including Graphical User Interfaces (GUIs) such as touchscreens in cars and on smartphones. When you interact with a touchscreen on one of your devices (tablet, smartphone, smartwatch), those screens are often the only interface you have. Maybe your device has volume or power buttons as well but you mainly interact with the screen.

There are buttons on a TV remote that are programmed to turn the TV off or to turn the volume up when they are pushed. Some examples of UIs include the buttons on a video game controller or the buttons on a microwave. The ways these User Interfaces are designed depend on how the device works and how users interact with it.

Those design principles form the foundation of the User Experience (UX) while using a UI. The User Experience is how well the interface lets me, as the user, do what I'm trying to do. Is the interface working as I expect it to? Is it responsive to what I'm trying to communicate with my presses? Is it organized well, or should future versions of the UI move the buttons around to make it easier? What does the interface look like in general? Is it pleasing to look at and does it make me want to use it more often?

When a UI is still being developed and undergoing iterations, the developers collect data on what works as planned and what needs to be fixed or enhanced. That data then informs the next round of iterative design. Some of the UX changes recommended occur before the release of the device. But, the device might also be sold as is and those changes are made later before the next version is offered to the public consumer.

Extend Your Learning icon Extend Your Learning

Have the students select a smart device (e.g., an iPhone) and investigate how with each new version of the device, the UI changed. They can use screenshots from the internet and describe what they notice is different from one version to the next. Often, there is documentation from the company that itemizes the changes from the previous release. Students should create their own timelines of their chosen smart devices.

Have students compare devices of a particular make/model so that they are not comparing completely different phones. Some models might have started with raised push-button keys and then transitioned to touchscreens. It should be noted that the later, touchscreen interface is more about technological advances than it is solely about improving the User Experience.

Motivate Discussion icon Motivate Discussion - Designers and Engineers of User Interfaces

Q: There are professional designers and/or engineers whose job it is to maximize the User Experience when interacting with a device. What do you think are some skills that one of these professionals need to have?

A: Responses will likely vary but there are some aspects of this job that students should consider. At the least, these professionals should be skilled graphic designers and programmers. They might need to know about typography - the technique of arranging the type of texts in order to make it legible and appealing when displayed. They might need to know about aesthetics - principles about the nature of what we think is beautiful or pleasing visually. They might need to know about human factors, cognitive science, or ergonomics - the ways in which people think and use devices to be productive - so that they can optimize the design to meet those needs.

Q: UI Designers take "conformity with user expectations" very seriously. What do you think that means, and how do you think that impacts the interface's design?

A: Students need to first define "conformity with user expectations" as having the interface look and respond to the user as expected. So the first part is that it looks familiar or at least intuitive. The second part is that when the user interacts with it, it should react to the user's actions in ways that the user anticipates and plans for. They both impact the design because designers want the User Experience to be the best it can be. In practice, sometimes that means having to stay with a similar interface with only a few changes instead of a completely new interface with mostly changes. If the entire interface is new, then experience does not prepare users with expectations for how to interact with it.

Q: Imagine you have to build a completely new User Interface that no one has ever seen before. That means that users do not have any experience to draw on when using it. What might you include in the interface to make it conform with user expectations? Hint: Think about the features included in VEXcode IQ.

A: Users' expectations do not need to come from previous experiences with other interfaces. In some situations, user expectations are formed when they first look at the UI. In these cases, the designers need to make the UI seem straightforward. Labeling, color coding, including multiple windows/screens that appear when appropriate, minimizing extraneous text/images/colors, and using other prompts might help the user more quickly understand how the new UI works.
VEXcode IQ uses color-coded blocks, example projects, Help information for the blocks, and most importantly Tutorials to demonstrate for users how best to interact with VEXcode IQ.