Interaction Design
Tubekbay001
Topic7-InterfacesinDepthGUIsNUIs1.pdf
version 1.0
Copyright © 2020 by Singapore Institute of Management Pte Ltd. All rights reserved.
Topic 7 – Interfaces in Depth: GUIs / NUIs - 1
Interaction Design
Diploma In Information Technology
Learning Outcomes After studying this topic and the recommended reading, you should be able to:
- Topic 7
- Emotional Interaction
- Expressive Interfaces and Emotional Design
- Persuasive Technologies and Behavioural Change
- Introduction to Interface Types
- Interface Types
Emotional Interaction
Consider the different emotions one experiences through any common daily activity.
Searching for information on the web.
Shopping online for a product such as a new laptop, a sofa, or a vacation.
Emotional Interaction
When purchasing an item online, the first thing is realization of
needing or wanting that item.
Then the desire and anticipation of purchasing it comes after.
Emotional Interaction
This is comes with joy or frustration of finding out more about what products are available.
Then decision making on which to choose from potentially hundreds or even thousands of them by visiting numerous websites.
Such as comparison sites, reviews, recommendations, and social media sites.
Emotional Interaction
This entails finding what is available with what you like or need and whether you can afford it.
The thrill of deciding on a purchase may be quickly followed by
the shock of how much it costs.
And the disappointment that it is too expensive.
Emotional Interaction
The process of having to revise your decision may be
accompanied by annoyance if you discover that nothing is as good as the first choice.
It can become frustrating to keep looking and revisiting sites.
Finally, when you make your decision, a sense of relief is often experienced.
Emotional Interaction
Emotional interaction is concerned with what makes people feel
Happy, sad, annoyed, anxious, frustrated, motivated, delirious, and so on..
Then using this knowledge to inform the design of different aspects of the user experience.
Emotional Interaction
It is definitely not a straightforward….
Should an interface be designed to try to keep a person happy when it detects that they are smiling..
OR
Should it try to change them from being in a negative mood to a positive one when it detects that they are scowling?
Emotional Interaction
Having detected an emotional state, a decision has to be made as to what or how to present information to the user.
Should it try to return an emotional response through using various interface elements, such as emojis, feedback, and icons?
How expressive should it be?
Emotional Interaction
The act of pressing one of the buttons can be very satisfying, providing a moment for you to reflect upon your experience.
Emotional Interaction
A good place to start understanding how emotions affect behavior.
AND
Is to examine how people express themselves and read each other’s expressions.
Emotional Interaction
This includes understanding the relationship between
- Facial expressions
- Body language
- Gestures
- Tone of voice
Emotional Interaction
One example:
When people are happy, they typically smile, laugh, and relax their body posture.
When they are angry, they might shout, gesticulate, tense their hands, and screw up their face.
Emotional Interaction
Emotional skills, especially the ability to express and recognize emotions, are central to human communication.
Emotions can be very simple, short-lived or complex and long- lasting.
Emotional Interaction
There are TWO (2) types of emotion that researchers have described:
1. Automatic
2. Conscious
Emotional Interaction
Automatic emotions happen rapidly, typically within a less than a second but it may disappear very quickly.
On the other hand..
Conscious emotions, develops slowly and it disappears slowly as well.
They are often the result of a conscious cognitive behavior.
Such as weighing the odds, reflection, or contemplation.
Emotional Interaction
Understanding how human’s emotional aspect works, provides insights and consideration on how to design User Experiences.
Emotional Interaction
Anthony Ortony et al.’s (2005) model of emotional design showing three levels: visceral, behavioral, and reflective.
Source: The illustration and text are from Figure 1.1 of Norman D. A. (2004) Emotional Design: We love (or hate) everyday things. New York: Basic Books.
Emotional Interaction
One way of using the model is to think about how to design products in terms of the three levels.
- Visceral Design
- Behavioral Design
- Reflective Design
Emotional Interaction
Visceral Design
Refers to making products feel, look, and sound good.
Emotional Interaction
Behavioral Design
The usability of the product and how the users are going to use it.
Emotional Interaction
Reflective Design
Refers to consideration of the meaning and personal value of a product in a particular culture.
Expressive Interfaces and Emotional Design
Designers use a number of features to make an expressive interface.
Emojis, sounds, colors, shapes, icons, and virtual agents are used to create an emotional connection with the user.
Expressive Interfaces and Emotional Design
The smiling icon conveyed a sense of friendliness, inviting the user to feel at ease and even smile back.
The appearance of the icon on the screen was also meant to be reassuring, indicating that the computer was working.
Expressive Interfaces and Emotional Design
Other ways of conveying expressivity include the following:
- Animated icons (for example, a recycle bin animating on how filled the bin is.)
- Sonifications indicating actions and events (such as a clicked sound when a button is pressed. Or a ding sound when a file is transferred successfully.)
Expressive Interfaces and Emotional Design
Other ways of conveying expressivity include the following:
- Vibrotactile feedback, such as distinct smartphone buzzes that represent specific messages from friends or family.
Expressive Interfaces and Emotional Design
When the look and feel of an interface is pleasing and pleasurable.
For example:
Through beautiful graphics or a nice feel or the way that the elements have been put together.
People are likely to be more tolerant and prepared to wait a few more seconds for a website to download.
Annoying Interfaces
In many situations, interfaces may inadvertently elicit negative emotional responses, such as anger.
This typically happens when something that should be simple to use or set turns out to be complex.
Annoying Interfaces
The most common examples are remote controls, printers, digital alarm clocks, and digital TV systems.
Annoying Interfaces
Getting a printer to work with a new digital camera.
Trying to switch from watching a DVD to a TV channel.
Changing the time on a digital alarm clock in a hotel.
This actions can be really ANNOYING sometimes.
Annoying Interfaces
Developers are aware of these usability problems.
And several methods have been created to help the novice user
get set up and become familiarized with a technology.
Annoying Interfaces
These methods include pop-up help boxes and contextual videos.
Another approach to helping users has been to make an
interface appear friendlier as a way of reassuring users.
Especially those who were new to computers or online banking.
Annoying Interfaces
Interfaces, if designed poorly, can make people sometimes feel insulted, stupid, or threatened.
The effect can be to annoy them to the point of losing their temper.
Annoying Interfaces
There are many situations that cause such negative emotional responses.
These include the following:
- When an application doesn’t work properly or crashes.
- When a system doesn’t function according to what the user wants it to do.
- When user expectations are not met.
- When a system does not provide enough or relevant information to let the user know what to do.
Annoying Interfaces
There are many situations that cause such negative emotional responses.
These include the following:
- When error messages pop up that are not clear and obstructive.
- When the appearance of an interface is too noisy, garish, gimmicky.
- When a system requires a user to go through multiples steps just to achieve a simple objective.
Annoying Interfaces
There are many situations that cause such negative emotional responses.
These include the following:
- Websites cluttered with many text and graphics, makes it difficult to locate desired information.
- Flashing animations, specically flashing advertisements banners that covers the whole area of the screen.
Annoying Interfaces
There are many situations that cause such negative emotional responses.
These include the following:
- Too much automatic playing of audio/sound effects or video contents.
Persuasive Technologies and Behavioural Change
A diversity of techniques has been used at the interface level to draw people’s attention to certain kinds of information.
In an attempt to change what they do or think.
Persuasive Technologies and Behavioural Change
Pop-up ads, warning messages, reminders, prompts, personalized messages, and recommendations
Are some of the methods that are being deployed on a computer or smartphone interface.
Persuasive Technologies and Behavioural Change
For example:
Amazon’s one-click mechanism that makes it easy to buy something on its online store.
Recommender systems that suggest specific books, hotels, restaurants, and so forth, that a reader might want to try based on their previous purchases, choices, and taste.
Persuasive Technologies and Behavioural Change
Amazon one-click
Persuasive Technologies and Behavioural Change
The various techniques that have been developed have been
referred to as persuasive design.
They include enticing, cajoling, or nudging someone into doing
something through the use of persuasive technology.
Persuasive Technologies and Behavioural Change
Technology interventions have also been developed to change people’s behaviors in other domains besides commerce.
Including safety, preventative healthcare, fitness, personal relationships, energy consumption, and learning.
Persuasive Technologies and Behavioural Change
For example:
Apple Watches, Fitbit devices (Health/Fitness devices)
Persuasive Technologies and Behavioural Change
Earlier example with Health Monitoring Devices.
The emphasis is on changing someone’s habits or doing something that will improve an individual’s well-being through monitoring their behavior.
Introduction to Interface Types
When considering how to solve a user problem, the default
solution that many developers choose to design is an app that can run on a smartphone.
It is hardly surprising, therefore, to see just how many apps there are in the world.
In December 2018, Apple, for example, had a staggering 2 million apps in its store, many of which were games.
Introduction to Interface Types
Despite the ubiquity of the smartphone app industry, the web continues to proliferate in offering services, content, resources, and information.
A central concern is how to design them to be interoperable across different devices and browsers.
Which takes into account the varying form factors, size, and shape of smart watches, smartphones, laptops, smart TVs, and computer screens.
Introduction to Interface Types
Interface Types
There are different types of interfaces that have been developed. These includes:
1. Command
2. Graphical
3. Multimedia
4. Virtual reality
5. Web
6. Mobile
7. Appliance
Interface Types
There are different types of interfaces that have been developed. These includes:
8. Voice
9. Pen
10. Touch
11. Gesture
12. Haptic
13. Multimodal
14. Shareable
Interface Types
There are different types of interfaces that have been developed. These includes:
15. Tangible
16. Augmented reality
17. Wearables
18. Robots and drones
19. Brain-computer interaction
20. Smart
Interface Types
Let’s take a look at each of the Interface Type and understand how each of it can be applied to user design.
Interface Types
Command-Line Interfaces
Early interfaces required the user to type in commands that were typically abbreviations.
Another way of issuing commands is by pressing certain combinations of keys (such as Shift+Alt+Ctrl).
Interface Types
Command-Line Interfaces
Some commands are also a fixed part of the keyboard, such as delete, enter, and undo.
While other function keys can be programmed by the user as specific commands (for instance, F11 commanding print action).
Interface Types
Command-Line Interfaces
Were largely superseded by graphical interfaces that incorporated commands.
Such as menus, icons, keyboard shortcuts, and pop- up/predictable text commands as part of an application.
Interface Types
Command-Line Interfaces
Users find them easier and faster to use than equivalent menu- based systems.
User also prefer command-line interfaces for performing certain operations as part of a complex software package, such as for CAD environments.
Interface Types
Command-Line Interfaces
System administrators, programmers, and power users often find
that it is much more efficient and quicker to use command languages such as Microsoft’s PowerShell.
Interface Types
Command-Line Interfaces
Microsoft Windows
PowerShell
Interface Types
Graphical User Interfaces
Also known as GUI.
Opens up new possibilities for users to interact with a system.
Information are presented and represented within a graphical interface.
Interface Types
Graphical User Interfaces
The original GUI was called a WIMP (windows, icons, menus, pointer)
Interface Types
Graphical User Interfaces
The basic building blocks of the WIMP are still part of the modern GUI used as part of a display, but they have evolved into a number of different forms and types.
Interface Types
Graphical User Interfaces
For example:
There are now many different types of icons and menu.
These includes audio icons and menus, 3D animated icons, and even tiny icon-based menus that can fit onto a smartwatch screen.
Interface Types
Graphical User Interfaces
Let’s discuss more about WIMP basic building blocks.
Primarily:
- Window Design
- Icons
- Menus
Interface Types
Graphical User Interfaces
Window Design
Windows were invented to overcome the physical constraints of a computer display, enabling more information to be viewed and tasks to be performed on the same screen.
Multiple windows can be opened at any one time.
Interface Types
Graphical User Interfaces
Window Design
For example:
Web browsers, word processing documents, photos, and slideshows.
Enabling the user to switch between them when needing to look at or work on different documents, files, and apps.
Interface Types
Graphical User Interfaces
Menu Design
Interface menus are typically ordered across the top row or down the side of a screen using category headers as part of a menu bar.
Interface Types
Graphical User Interfaces
Menu Design
Interface Types
Graphical User Interfaces
Menu Design
Source from: https://uxdesign.cc/under-the-microscope-user-testing-mobile- menus-36ac941cbf94
Interface Types
Graphical User Interfaces
Icon Design
Icons were used to represent objects as part of the desktop metaphor, namely, folders, documents, trashcans, inboxes, and outboxes.
The assumption behind using icons instead of text labels is that they are easier to learn and remember, especially for non-expert computer users.
Interface Types
Graphical User Interfaces
Icon Design
Icons have become a pervasive feature of the interface.
They now populate every app and operating system and are used for all manner of functions besides representing desktop objects.
Interface Types
Graphical User Interfaces
Icon Design
Class Activity
Graphical User Interfaces
Sketch simple icons to represent the following operations to appear on a digital camera screen:
- Turn image 90-degrees sideways.
- Crop the image.
- Auto-enhance the image.
- More options.
Interface Types
Multimedia
As the name implies, combines different media within a single interface.
Namely, graphics, text, video, sound, and animation that links them together with various forms of interactivity.
Interface Types
Multimedia
Users can click links in an image or text that triggers another media such as an animation or a video.
From there they can return to where they were previously or jump to another media source.
Interface Types
Virtual Reality
Has been around since the 1970s when researchers first began developing computer-generated graphical simulations to create..
“the illusion of participation in a synthetic environment rather than external observation of such an environment”. (Gigante, 1993, p. 3)
Interface Types
Virtual Reality
The goal was to create user experiences that feel virtually real when interacting with an artificial environment.
Images are displayed stereoscopically to the users.
Most commonly through VR headsets and objects within the field of vision can be interacted with via an input device like a joystick.
Interface Types
Virtual Reality
Gaming in an
Virtual Reality
Interface
Interface Types
Website Design
Early websites were largely text-based, providing hyperlinks to different places or pages of text.
Much of the design effort was concerned with the information architecture, that is..
How best to structure information at the interface level to enable users to navigate and access it easily and quickly.
Interface Types
Website Design
The goal of web design has been to develop sites that are not
only usable but also aesthetically pleasing.
Getting the graphical design right, therefore, is critical.
Interface Types
Website Design
The use of graphical elements (such as background images, color, bold text, and icons)
Can make a website look distinctive, striking, and pleasurable for the user when they first view it.
Also to make it readily recognizable on their return.
Interface Types
Website Design
Web designers now have a number of languages available to design websites, such as Ruby and Python.
HTML5 and web development tools, such as JavaScript and CSS, are also used.
Libraries, such as React, and open source toolkits, such as Bootstrap, enable developers to get started quickly when prototyping their ideas for a website.
Interface Types
Mobile Design
Mobile devices have become pervasive, with people increasingly using them in all aspects of their everyday and working lives—
including phones, fitness trackers, and watches.
Interface Types
Mobile Design
For example, they are now commonly used in,
- Restaurants to take orders.
- At car rental agencies to check in car returns.
- In supermarkets for checking stock, and on the streets for multiplayer gaming.
Interface Types
Mobile Design
Smartphones can also be used to download contextual information by scanning barcodes in the physical world.
Consumers can instantly download product information by scanning barcodes using their iPhone when walking around a supermarket, including allergens, such as nuts, gluten, and dairy.
Interface Types
Mobile Design
Scanning QR code using our
Smartphone camera to retrieve
Information.
Interface Types
Appliances
Appliances include machines for everyday use in the home.
For example, washing machines, microwave ovens, refrigerators, toasters, bread makers, and smoothie makers.
Interface Types
Appliances
Washing Machine
Panel
Source from: https://blog.bellinghamelectric.com/blog/how-long-does-a-washing-machine-take
Interface Types
Voice User Interfaces
A voice user interface (VUI) involves a person talking with a spoken language app.
Such as a search engine, a train timetable, a travel planner, or a phone service.
Interface Types
Voice User Interfaces
It is commonly used for inquiring about specific information or issuing a command to a machine.
Hence, VUIs use an interaction type of command or conversation, where users speak and listen to an interface rather than click on, touch, or point to it.
Interface Types
Voice User Interfaces
Siri and Bixby
Interface Types
Pen-Based Devices
Enable people to write, draw, select, and move objects on an interface using light pens or styluses.
Capitalizing on the well-honed drawing and writing skills that are developed from childhood.
Interface Types
Pen-Based Devices
They have been used to interact with tablets and large displays, instead of mouse, touch, or keyboard input, for selecting items and supporting freehand sketching.
Interface Types
Pen-Based Devices
Surface Pro X and the
Stylus Pen
Interface Types
Touchscreens
Single touchscreens, used in walk-up kiosks such as ticket machines or museum guides, ATMs, and cash registers (for instance, restaurants), have been around for a while.
Interface Types
Touchscreens
Single touchscreens, works by detecting the presence and location of a person’s touch on the display; options are selected by tapping on the screen.
Interface Types
Touchscreens
Single touchscreen
ATM
Source from: https://admetro.com/news/next-generation-atm-way/
Interface Types
Touchscreens
Multitouch surfaces, on the other hand, support a much wider range of more dynamic fingertip actions, such as swiping, flicking, pinching, pushing, and tapping.
They do this by registering touches at multiple locations using a grid.
Interface Types
Touchscreens
This multitouch method enables devices, such as smartphones and tabletops, to recognize and respond to more than one touch at the same time.
Interface Types
Touchscreens
Zooming in and out
on an Ipad Pro
Interface Types
We will continue on the other 10 remaining Interface Types on the next lesson.
That’s all for today!
If you have any questions, please feel free to reach out to me at this email.
Reading
Textbook:
Sharp, H., Preece, J., & Rogers, Y. (2019). Interaction Design:
Beyond Human-Computer Interaction (5th ed.)
Reference:
Topic 7 – Interfaces in Depth: GUIs / NUIs – 1
END OF LESSON
