UI/UX Design Introduction

UI/UX Design Interactive Media -> User Interface -> User Experience LESSON OBJECTIVES Introduction to the topic of UI/UX Design Understand what UI, UX, and Interactive Media is Understand how factors within Interactive Media such as User Interfaces affect the User Experience Understand the p...

UI/UX Design Interactive Media -> User Interface -> User Experience LESSON OBJECTIVES Introduction to the topic of UI/UX Design Understand what UI, UX, and Interactive Media is Understand how factors within Interactive Media such as User Interfaces affect the User Experience Understand the purpose of User Interfaces Explore different types of User Interfaces UI/UX DESIGN Term 1, Week 1-9 Ends with a group assignment due in Week 9 We look at User Interface (UI) and UX (User Experience) We will also talk about other interactive media (e.g. games, simulations etc.) but the focus will be on UI and UX Design. This encompasses the syllabus topic of - Enterprise information systems: Designing for user experience INTERACTIVE MEDIA What are some examples of Interactive Media? Interactive media: methods of communication that enables the user to interact with and influence the experience by engaging with it. Users interact by providing user inputs which affect the output that users receive. Simply put, it also refers to the different ways in which people process and share information or how they communicate with one another. Interactive media allows people to connect with others, whether that's people or organisations, by making them active participants in the media they consume through text, graphics, video, and sound. Traditional forms of media, such as television and radio, originally required no active participation. ELEMENTS OF INTERACTIVE MEDIA Unlike traditional media, interactive media is meant to enhance a user's experience. In order to do so, an interactive medium will require one or more of the following elements: Moving images and graphics Animation Digital Text Video Audio A user can participate by manipulating one or more of these elements during their experience, something traditional media does not offer. USER INTERFACE (UI) User Interface (UI): features of a product or service that a user interacts with, especially its screen design elements. The design of the UI determines the look and feel of the product/service. USER EXPERIENCE (UX) User Experience: experience that users have when interacting with a product or service. The goal of UX design is to make the user’s experience a positive one, by having interactions that are enjoyable, pleasant and efficient. Products or services can refer to objects, apps, websites, programs, household devices, and games. Within computing technology, we look at how considerations for User Experience affects the design of computing devices, apps, websites, games and other forms of interactive media. USER EXPERIENCE (UX) User Experience (UX) looks at the end-user's experience interacting with a product, system, or service. User Interface (UI) design considerations such as icons, logos, colours, layouts etc. can have a huge impact on a users' experience. UX designers often consider "How can we make the experience of interacting with a computer, a smartphone, a product, or a service as intuitive, smooth and pleasant as possible?". USER EXPERIENCE (UX) Some key considerations when working with digital products are: How intuitive (easy) is it for a user to navigate through the system (menu bars, toolbars, scroll bars, etc.) The cues that guide users to their goal Visibility of essential aspects of a task or function when needed (continue, back, save, etc.) Having a poor user interface either aesthetically with dated and static elements can negatively impact on how a user experiences the product. Alternatively, modern and easy to navigate UI elements can generate a positive user experience, increasing the likelihood of using that product or service again. UI VS UX DESIGN - similar but different roles PURPOSE OF USER INTERFACES User interfaces allows users to interact with the system’s hardware (switches, keyboards, touch screens) and software (text fields, mouse pointers, buttons). Well designed UIs let users know how they can interact with different interactive media, showing what kind of interactions are possible. Most UIs people interact with are through screens however other common forms include spoken word and physical devices. Through these interactions, users are able to have a ‘conversation’ with computer systems through exchange of signals that involve some action by the user, followed by a visual or audio signal/cue. TYPES OF USER INTERFACES - CLI, GUI, NLI User Interfaces are used to allow users to affect and communicate with computer systems and different forms of interactive media. User interfaces come in three forms: Command Line Interface (CLI) Graphical User Interface (GUI) Natural Language Interface (NLI) TYPES OF USER INTERFACES - CLI, GUI, NLI Command Line Interface (CLI) - Early UIs on computers were made using CLIs - Users can interact with computers by using the keyboard and typing in commands (e.g. help, dir) - CLIs are still used today, including windows operating systems with Command Prompt - They are also commonly used by network administrators to control servers in fields like IT - They have the advantage of not requiring as much processing power as a GUI TYPES OF USER INTERFACES - CLI, GUI, NLI TYPES OF USER INTERFACES - CLI, GUI, NLI Graphic User Interface (GUI) - GUIs act as a visual metaphor and representation of something people are more familiar with - GUIs use a screen to represent a business desk and small icons (pictures) to represent working documents - Click of a mouse or drag-and-drop functionality is a natural action and easy for users, while the mouse pointer becomes an extension of a user’s hand - GUIs and introduction of the mouse alongside it were Terms we use: considered the turning point in the mass adoption of - ‘window’ from ‘window into a document’ - ‘tab’ from ‘tabs in a folder’ computers across the globe TYPES OF USER INTERFACES - CLI, GUI, NLI Natural Language Interface (NLI) - Interaction through natural language (speech) recognition which has allowed users to control devices with their voices - Siri, Google Assistant, Alexa are examples of NLI which are linked within their systems to connect to smartphones and smart home devices to lock doors, dim the lights, set timers, or play songs - NLI can be useful for those with difficulties using a mouse or keyboard - NLIs have also been developed and improved upon using new models of Generative AI to improve their functionality QUESTIONS - Write answers in your books 1) What is a benefit of interactive media compared to traditional media? 2) Explain the difference between UX and UI design. 3) Looking at the mobile application interface below, outline why the screen to the right creates a better user experience than the one on the left. Refer to at least 2 key elements. Identify Explain Recognise and Relate cause and effect. name. Make the relationships between things evident. Provide why and/or how. CASE STUDY - UI and product success A UI design is rarely a finished product and is usually subject Apple explored the use of touch screens for a tablet product to change and improvement over many iterations. These (iPad). Through the process, CEO Steve Jobs identified the improvements can be due to changes in trends and an advantage of touch interfaces within mobile phones, attempt to modernise (make current) designs, or through the removing the problems of physical keys taking up space and addition of new functionality and features. the awkwardness of multiple nested menus for navigation. They released the iPhone in 2007. Radical changes and approaches to UI can lead to dramatic shifts in the market and society. Considering the example of While not the first touchscreen phone, the design and UI of the mobile phone’s shift from keyboards and nested menus the iPhone was superior with its revolutionary approach to UI with physical keys to touch based screens. Blackberry phones and UX design. The phone enabled users to take photos, play had a full QWERTY keyboard with tiny keys, while the Nokia music, send and receive emails, browse the web, send and 3310 had four letters for each key accessible through receive text messages, record notes, perform calculations, repeated presses. and receive voicemail. Questions 1. What major UI feature was the trigger for the development of the smartphone? 2. Explain how the need to deliver websites and applications on different devices affects Motorola DynaTAC 8000X Nokia 3310 Blackberry Sony Ericsson P800 Apple iPhone UI design. EXTENSION ACTIVITIES Once finished, watch these videos to gain additional knowledge and understanding of some of the topics discussed: Why do command lines still exist: https://youtu.be/Q1dwzi5DKio (~5 mins) UI/UX/Product designer: https://youtu.be/Vs4LZM1oirM (~3 mins) Good vs Bad UI Design: https://youtu.be/94_PId8TIaA (~9 mins) Improving UI Designs: https://youtu.be/XhdLvVmUjTQ (~5 mins) GLOSSARY OF KEY TERMS User Interface (UI): The means by which a user interacts with a computer, software application, or system. It includes the layout, design, and elements that allow users to input commands and receive feedback (e.g. buttons, menus, icons, and other visual elements). User Experience (UX): The overall experience a user has when interacting with a product or service, particularly in terms of how enjoyable or efficient the interaction is. UX design focuses on understanding user needs, behaviours, and motivations to create intuitive and satisfying experiences. Interactive Media: Digital content that allows users to engage and interact with the information or environment. This includes elements like animations, video games, websites, and applications that respond to user inputs, providing a dynamic and engaging experience.