USER EXPERIENCE IN INTERACTIVE MULTIMEDIA APPLICATIONS

dr. Matevž Pogačnik dr. Jože Guna University of Ljubljana, Slovenia Belgrade, September 2014 © Laboratory for Telecommunications, Faculty of Electrical Engineering

USER EXPERIENCE

Lessons learnt from the industry and academics

© Laboratory for Telecommunications, Faculty of Electrical Engineering

WHAT IS „UX“

„User experience (UX) is an approach to product development that incorporates direct user feedback throughout the development cycle (human-centered design) in order to reduce costs and create products and tools that meet user needs and have a high level of usability (are easy to use).“ https://uxpa.org/resources/about-ux http://www.allaboutux.org/ux-definitions © Laboratory for Telecommunications, Faculty of Electrical Engineering

A LOOK IN THE PAST

© Laboratory for Telecommunications, Faculty of Electrical Engineering

INTERFACES • People have been using interfaces for „thousands of years“ – – – – –

Traffic signs, billboards, … Different devices A door handle Touch screen on the mobile phone …

© Laboratory for Telecommunications, Faculty of Electrical Engineering

INTERFACES (2)

© Laboratory for Telecommunications, Faculty of Electrical Engineering

INTERFACES (3)

© Laboratory for Telecommunications, Faculty of Electrical Engineering

EARLY USER INTERFACES ON ELECTRONIC DEVICES • Command-line • Text-based • Graphical user interfaces • Development of computer technology brought us advanced graphical user interfaces – Mass usage

© Laboratory for Telecommunications, Faculty of Electrical Engineering

CMD VS. GUI

© Laboratory for Telecommunications, Faculty of Electrical Engineering

EARLY GRAPHICAL USER INTERFACES • Xerox Star Workstation- 1981 • Apple/Macintosh - 1984 • Windows 1.0 - 1985 • New concepts – Mouse, cursor, menu, …

© Laboratory for Telecommunications, Faculty of Electrical Engineering

MODERN MM END USER DEVICES • • • •

PC Game console (smart) TV Set-top-box

• Tablet • Mobile phone

performance WIRED

WIRELESS mobility

11 © Laboratory for Telecommunications, Faculty of Electrical Engineering

USER EXPERIENCE VS. USABILITY • Usability of a Product is a measure of success, efficiency and satisfaction, through which a typical end user can reach a given goal under certain conditions and in a certain environment. • User experience – no special goals; Emotional rewarding is more important than success or efficiency,

© Laboratory for Telecommunications, Faculty of Electrical Engineering

1

USER CENTERED DESIGN

© Laboratory for Telecommunications, Faculty of Electrical Engineering

THE „FLOW“ … flow – the state (optimal experience) in which people are so involved in an activity that nothing else seems to matter; the experience itself is so enjoyable that people will do it even at great cost, for the sheer sake of doing it.“ (M. Csikzentmihalyi)

© Laboratory for Telecommunications, Faculty of Electrical Engineering

THE USERS Who are your users? What are their needs and expectations? User target group -> user persona

From Latin persōna (“mask; character”). © Laboratory for Telecommunications, Faculty of Electrical Engineering

DESIGN VS. FUNCTIONALITY

© Laboratory for Telecommunications, Faculty of Electrical Engineering

TESTING - THE PRODUCT Test the product or service NOT the user Include the user It is not „black magic“, should be as simple as possible, but used as necessary, and often

Zero users = zero insight Jakob Nielsen, http://www.nngroup.com/articles/w hy-you-only-need-to-test-with-5users/ © Laboratory for Telecommunications, Faculty of Electrical Engineering

GOLDEN RULES

"Everything should be made as simple as possible, but not simpler." Albert Einstein

“The golden rule of design: Don’t do to others what others have done to you. Remember the things you don’t like in software interfaces you use. Then make sure you don’t do the same things to users of interfaces you design and develop.” Tracy Leonard (1996) © Laboratory for Telecommunications, Faculty of Electrical Engineering

RULES OF DESIGN User in control Reduce the cognitive load Consistency

© Laboratory for Telecommunications, Faculty of Electrical Engineering

USER IN CONTROL 1. 2. 3. 4. 5.

Use modes judiciously (modeless) Allow users to use either the keyboard or mouse (flexible) Allow users to change focus (interruptible) Display descriptive messages and text (Helpful) Provide immediate and reversible actions, and feedback (forgiving) 6. Provide meaningful paths and exits (navigable) 7. Accommodate users with different skill levels (accessible 8. Make the user interface transparent (facilitative) 9. Allow users to customize the interface (preferences) 10. Allow users to directly manipulate interface objects (interactive)

© Laboratory for Telecommunications, Faculty of Electrical Engineering

2. REDUCE USERS‘ MEMORY LOAD • Users are not good at memorising commands and actions 1. 2. 3. 4. 5. 6. 7. 8. 9.

Relieve short-term memory (remember) Rely on recognition, not recall (recognition) Provide visual cues (inform) Provide defaults, undo, and redo (forgiving) Provide interface shortcuts (frequency) Promote an object-action syntax (intuitive) Use real-world metaphors (transfer) User progressive disclosure (context) Promote visual clarity (organize)

© Laboratory for Telecommunications, Faculty of Electrical Engineering

3. MAKE INTERFACE CONSISTENT • Consistency is one of the most important rules – Until it still makes sense

1.

Sustain the context of users’ tasks (continuity)

2. Maintain consistency within and across products (experience) 3. Keep interaction results the same (expectations)

4. Provide aesthetic appeal and integrity (attitude) 5.

Encourage exploration (predictable)

© Laboratory for Telecommunications, Faculty of Electrical Engineering

GOOGLE „GOOGLINESS“ Focus on people—their lives, their work, their dreams. Every millisecond counts. Simplicity is powerful.

Engage beginners and attract experts. Dare to innovate. Design for the world. Plan for today's and tomorrow's business.

Delight the eye without distracting the mind. Be worthy of people's trust. Add a human touch. „Don't be evil.“

http://googleblog.blogspot.com/2008/04/what-makes-design-googley.html

© Laboratory for Telecommunications, Faculty of Electrical Engineering

WHAT MAKES A GOOD INTERFACE/PRODUCT/SERVICE

Usefulness and functionality (fulfills the goals) Easy and intuitive to use (the flow) Personal (adapts to the user and not the other way around) © Laboratory for Telecommunications, Faculty of Electrical Engineering

UX DONE RIGHT

© Laboratory for Telecommunications, Faculty of Electrical Engineering

INTERACTION MODALITIES

© Laboratory for Telecommunications, Faculty of Electrical Engineering

BASICS • Device control requires suitable input/output modules • Standard: mouse and keyboard • Interaction is to be as simple and fast as possible • The environment and target end users are important!

© Laboratory for Telecommunications, Faculty of Electrical Engineering

SIMPLICITY?

Keep It Simple & Stupid = KISS

© Laboratory for Telecommunications, Faculty of Electrical Engineering

INTERACTION MODALITY TYPES • • • • • • •

Basic (mouse, keyboard, touch screen?) Touch screen Remote controls (with movement sensors) Touchless gestures Voice control Eye tracking Mind „control“ BCI (Brain Computer Interface)

© Laboratory for Telecommunications, Faculty of Electrical Engineering

KEYBOARDS • Until now THE standard of control • Many versions and types (QWERTY, QWERTZ, AZERTY, Dvorak, ABCDE, XPeRT)

© Laboratory for Telecommunications, Faculty of Electrical Engineering

MOUSE • Also THE standard device • Mechanical, optical (IR, laser), wired, wireless,...

© Laboratory for Telecommunications, Faculty of Electrical Engineering

TOUCH SCREENS • Direct interaction • The screen knows where it was touched • Many technologies for touch sensing (resistive, surface acoustic wave, capacitive, infrared) • single touch and multi touch screens • The way and period of using the touch screen matters („gorilla arm“)

© Laboratory for Telecommunications, Faculty of Electrical Engineering

GRAPHICAL PADS • Input devices targeting work with graphical (design) software • Different types (passive, active, optical, acoustic) • Accurate, need special pens • Hybrid models - Wacom Cintiq

© Laboratory for Telecommunications, Faculty of Electrical Engineering

REMOTE CONTROLS • Radio Frequency signal (RF), Infra Red (IR) light or both • Standard (TV) remotes are mostly using IR technology • RF remotes are becoming more common, due to extended range

© Laboratory for Telecommunications, Faculty of Electrical Engineering

WII REMOTE • Mostly for gaming  • Senses acceleration in 3 –axes (X,Y,Z) • Enhanced with an optical unit to be able to identify the pointing position on the screen • Feedback (sound, light, vibration) • Useful in other domains – TV remote, gestures, tracking…

© Laboratory for Telecommunications, Faculty of Electrical Engineering

GESTURES • Active (mouse, keyboard,...) vs. passive (camera, microphone,..) input device • Interpretation of input data • gesture--> a path in 2D or 3D space with a symbolic meaning („next“, „back“, „start“, …)

© Laboratory for Telecommunications, Faculty of Electrical Engineering

WHY GESTURES? • • • • • •

A natural and intuitive mean of communication Accuracy defined by the user Useful in environments where standard approaches are less suitable Useful for people with special needs! Development of new apps A natural way of non-verbal communication

© Laboratory for Telecommunications, Faculty of Electrical Engineering

GESTURES- DEVICES- GLOVES • Gesture recognition through gloves

© Laboratory for Telecommunications, Faculty of Electrical Engineering

GESTURES- DEVICES- CAMERAS

© Laboratory for Telecommunications, Faculty of Electrical Engineering

GESTURES- DEVICES- 3D CAMERAS • • • •

In a car: identification of a passenger for activation of the airbag Device interaction Tracking (person, head,…) Face recognition

© Laboratory for Telecommunications, Faculty of Electrical Engineering

VOICE CONTROL • Spoken word is translated into a form suitable for processing • Two types: small word corpus (many users – automated phone system) or large corpus (very limited number of users, 85% recognition accuracy) • Problems: bad microphone, background noise, speech interlaping, homonymous words

© Laboratory for Telecommunications, Faculty of Electrical Engineering

EYE TRACKING • Tracking the reflection in the eyes • Fixations, fast movement between fixations, time of flight, blinking frequency,… • Cursor follows eye movement • A „click“ is represented by gazing in a position or blinking • Virtual reality, big 3D spaces, video conferencing, interface for people with disabilities

© Laboratory for Telecommunications, Faculty of Electrical Engineering

BCI • Interaction based on bio signals or direct communication brain-computer • EEG – electro-encephalography (brain waves) • EMG - electromyography (muscle signals) – OCZ NIA – NeuroSky Mindset – Emotiv

© Laboratory for Telecommunications, Faculty of Electrical Engineering

TANGIBLE UI • Communication through physical environment • Digital information represented through a physical form • Physical form represents control mechanisms, commands, tasks,…

© Laboratory for Telecommunications, Faculty of Electrical Engineering

OTHER DEVICES • • • • • •

joysticks iPod, iPad, iPhone (second screen) 3D clothing gamepads Mixers (DJs) ...

© Laboratory for Telecommunications, Faculty of Electrical Engineering

A COMBINATION OF MODALITIES • Different possibilities • Adapted GUI

© Laboratory for Telecommunications, Faculty of Electrical Engineering

REAL-LIFE EXAMPLES

Real-life examples from the industry and academics

© Laboratory for Telecommunications, Faculty of Electrical Engineering

 TV-WEB PROJECT EU SEE project: 7 partner states (Slovenia, Hungary, Austria, Croatia, Bosnia and Herzegovina, Montenegro, Serbia) and 16 partners Use the DTT capacity to deliver selected Internet content

No broadband connection needed -> local interactivity Tackle the digital divide „The aim of the TV-WEB project is to deliver Internet content to those who do not usually use Internet services and who have no broadband connection. The idea is to use the free digital terrestrial television (DTT) broadcasting frequency spectrum capacities for transmitting selected Internet content (such as news, e-services etc.) and ensure a sort of Internet experience via TV devices to certain less advantaged segments of the population, or those in rural areas without broadband access. The concept of the project differs from the services provided by technologies such as connected and Smart TV where the Internet experience is ensured by connecting the TV to the Internet.. Instead, the SEE TV-WEB project foresees delivery of Internet content to the homes solely using the DTT spectrum.“ © Laboratory for Telecommunications, Faculty of Electrical Engineering

http://www.see-tvweb.eu

TV-WEB - ARCHITECTURE

© Laboratory for Telecommunications, Faculty of Electrical Engineering

UX AND USABILITY More than 15 live pilot tests in 7 partner states Laboratory and field tests Public events and fairs (uncontrolled environment) Ux methodology used • • • • • •

Guided interview (talk aloud protocol, observation) Questionnares (the TV-WEB service and methodology evaluation) Extremely rapid usability testing approach Card sorting Personas Focus groups

© Laboratory for Telecommunications, Faculty of Electrical Engineering

TV-WEB UX PROCEDURE Guided interview

• Interviewer • Observer UX questionnare

Environment setup UX methodology questionnare © Laboratory for Telecommunications, Faculty of Electrical Engineering

PERSONAS

© Laboratory for Telecommunications, Faculty of Electrical Engineering

ENVIRONMENT SETUP

© Laboratory for Telecommunications, Faculty of Electrical Engineering

TVWEB USER INTERFACE

© Laboratory for Telecommunications, Faculty of Electrical Engineering

UX TEST IMPRESSIONS

© Laboratory for Telecommunications, Faculty of Electrical Engineering

LESSONS LEARNT Users are people; each with his/her own background, moods, and technology experience and proficiency -> these factors influence the users’ perception. The test environment setup and the procedure should help the users’ to relax as much as possible. The user interface, content and conversation should be performed in the local language and dialect. Goals and terminology used should be simple to understand. The whole procedure should not be exhausting and never frustrating. TV-WEB specific: • the simple nature of a matrix information representation in combination with the navigation concept was well accepted by a great majority of users, even the elderly and technology less proficient users; • the service itself was found interesting even for young users, who are proficient with more complicated devices and use the Internet regularly; • the importance of local content and local events was especially emphasized; © Laboratory for Telecommunications, Faculty of Electrical Engineering

 RTV SLOVENIA - RTV 4D ARRS (national science agency) project for the national RTV Multimedia app for iOS and Android, mobile phone and tablet PC, and PC portal Complete UX design and programming

UX design, methodology • Target group audience identification • Wireframe design • Graphical design • Heuristic evaluation © Laboratory for Telecommunications, Faculty of Electrical Engineering

CONCEPT WIREFRAMES

© Laboratory for Telecommunications, Faculty of Electrical Engineering

ANDROID

© Laboratory for Telecommunications, Faculty of Electrical Engineering

IOS

© Laboratory for Telecommunications, Faculty of Electrical Engineering

LESSONS LEARNT A really broad range of target audience and terminal devices -> testing is really important Less is more, application stability is crucial UX: iOS  Android  PC More than 100.000 downloads © Laboratory for Telecommunications, Faculty of Electrical Engineering

 TS TELEMEDICINE Telemedicine UX project for the national telco operator Telekom Slovenije Propose, design and test the user interface • • • •

Mobile phone Tablet PC TV (iptv set-top-box) PC web portal

Functionality • Patient specific data, personal doctor information • Sensory data input and review (e.g. body weigt, blood pressure...) • E-healt oriented portal

UX design • Focus groups • Personas • Field tests (homes for the elderly) © Laboratory for Telecommunications, Faculty of Electrical Engineering

CONCEPT WIREFRAMES

© Laboratory for Telecommunications, Faculty of Electrical Engineering

© Laboratory for Telecommunications, Faculty of Electrical Engineering

UX TESTING IMPRESSIONS

© Laboratory for Telecommunications, Faculty of Electrical Engineering

LESSONS LEARNT Target group specifics • A wide range of users • Body/cognitive impairments • Varios technology background and attitude

Abstract concepts do not work – live product demonstration is necessary If the service is considered to have the benefits for the user -> the user is willing to learn how to use it © Laboratory for Telecommunications, Faculty of Electrical Engineering

 LTFE E-CHO Own e-learning CMS E-CHO Improve the UX

© Laboratory for Telecommunications, Faculty of Electrical Engineering

 UCD approach for designing the new Multimedia course

Partnership between • Students • Parents • Professors • Industry

© Laboratory for Telecommunications, Faculty of Electrical Engineering

PERSONAS

© Laboratory for Telecommunications, Faculty of Electrical Engineering

LESSONS LEARNT UCD approaches can be successfuly applied even to the study programme design Common strategy and goals between all stakeholders are important

Appropriate promotion and marketing What is “multimedia”? Why does the market need multimedia engineers? What do the multimedia engineers do? Where they can get a job and how much they could earn? Is the degree program difficult and whether help will be provided when needed?

© Laboratory for Telecommunications, Faculty of Electrical Engineering

Multimedia degree program as an environment for personal and career development. Studying Multimedia is “cool and fun”. Multimedia is student-friendly degree program, which leads t. successful career and good life, Students gain various inter- and multidisciplinary skills and competences, which open the doors to the most successful companies in the country, Europe and the whole world.

 WUD SLOVENIA

http://worldusabilityday.org http://www.ltfe.org/aktualno/world-usability-day-slovenia-2013/ © Laboratory for Telecommunications, Faculty of Electrical Engineering

© Laboratory for Telecommunications, Faculty of Electrical Engineering

BUT...

© Laboratory for Telecommunications, Faculty of Electrical Engineering

CONCLUSIONS

© Laboratory for Telecommunications, Faculty of Electrical Engineering

GOOD UX REFERENCES https://uxpa.org/ http://www.allaboutux.org www.interaction-design.org/

http://www.measuringux.com https://www.coursera.org/course/hciucsd http://www.nngroup.com/articles/

http://www.usability.gov Books: • Steve Krug: Don't Make Me Think: A Common Sense Approach to Web Usability • Thomas Tullis, William Albert: Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics © Laboratory for Telecommunications, Faculty of Electrical Engineering

Thank You! © Laboratory for Telecommunications, Faculty of Electrical Engineering

DISCUSSION

© Laboratory for Telecommunications, Faculty of Electrical Engineering