Interface design 3: Mobile and context-aware computing. Lecture 10, Human Computer Interaction CS-C3120, Autumn 2018, Periods I+II Antti Salovaara

Interface design 3:

Mobile and context-aware

computing

Lecture 10, Human–Computer Interaction CS-C3120, Autumn 2018, Periods I+II

Antti Salovaara

Contents of the lecture

Feedback from Assignment 9 Mobile computing

Introduction to Assignment 10 How to learn more about HCI

Exam type and reading requirements

Feedback from A9

Multimodal analysis of an app for bicycle messengers

Results

Students have received feedback in the MyCourses’s comment field

Most admitted in the report that they had not been in the lecture and did not know what to do

Feedback/questions about this assignment?

Mobile computing

Learning objectives

Challenges of mobile interaction Design guidelines

Improving interaction by understanding user’s context

Challenges of mobile interaction

7 Output from

device:

Small screen

Poor audio (without headphones)

Input to device:

Low precision Low speed

Fewer input modes (no hovering, complicated “right click”) Physical context: Ambient light Ambient noise Limited attention* Social context: Interruptions by others Social awkwardness Device ecology: Connectivity and bandwidth Configuration Computing power Battery life Location Device orientation Better voice input Mobility Benefits

Corporate guidelines (from lecture #3)

Material.io (Google) Apple design guideline

General guidelines

“A Comprehensive Guide To Mobile App Design”

https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/

See next slide

Pair exercise:

Find challenge–guideline matches

Minimize Cognitive Load

Decluttering Offload tasks

Break tasks into bite-sized chunks

Use familiar screens Minimize user input Anticipate users needs Use visual weight to convey importance Avoid jargon

Make the design consistent

Put the user in control

Keep interactive elements familiar and predictable The “back” button should work properly

Meaningful error messages

Design an accessible interface

Be aware of color-blindness

Make animations optional

Make the navigation simple

Use standard navigation components

Prioritize navigation options

Don’t mix navigation patterns

Make navigation visible Communicate current location

Use functional animation to clarify navigational transitions

Be careful with using gestures in the UI

Focus on the first-time experience

Avoid sign-in walls Design a good

onboarding experience

Don’t ask for set-up information up front

Avoid asking for

permissions right at the start

10

Make your app appear fast and responsive

Concentrate on

loading content in the visible area of the screen

Make it clear when loading is occuring Offer a visual

distraction

Skeleton screens Optimize content for mobile

Make text readable and legible

Hd-quality images and the right aspect ratio Video content is

optimized for portrait mode

Find a matching challenge for each guideline

Output from device:

Small screen

Poor audio (without headphones)

Input to device:

Low precision Low speed

Fewer input modes (no hovering, complicated “right click”)

Device ecology:

Connectivity and bandwidth Configuration Computing power Battery life Physical context: Ambient light Ambient noise Limited attention Social context: Interruptions by others Social awkwardness

Minimize Cognitive Load

Decluttering Offload tasks

Break tasks into bite-sized chunks Use familiar screens

Minimize user input Anticipate users needs

Use visual weight to convey importance

Avoid jargon

Make the design consistent

Put the user in control

Keep interactive elements familiar and predictable

The “back” button should work properly

Meaningful error messages

Design an accessible interface

Be aware of color-blindness

Improving interaction by understanding

user’s context

Two ways to consider user’s context

1. Context as a data structure:

2. Context as an interactively emerging “achievement”

13 Schilit et al. (1994). Context-aware computing applications. https://doi.org/10.1109/WMCSA.1994.16

Assumptions in the 1

_{interpretation}

(“Context as a data structure”)

Context is a form of information

The necessary information can be specified in advance Contexts are stable

Context and activity are

separable CONTEXT

ACTIVITY

2. Context as an interactively emerging

“achievement”

The sociological viewpoint Context arises from activity and they are not separable Context is dynamic and

different contexts cannot be enumerated

=> {data₁, … , data_n} g context_i

15

CONTEXT ACTIVITY

Example of creation of context from

interaction

The nature of context clearly changes here, but why, and what is this about in general?

From Heritage, J. (1984). Garfinkel and Ethnomethodology. Cambridge, UK: Polity Press, p. 237.

Despite the difficulties of representing context:

How computers could use it for user’s

benefit?

17

Approach: focus on the action resources that that the device allows for users

Varying the resources offered for the user

1. Preparing resources

Predictive data search and preparation in the background

2. Optimizing resources

Intelligent selector for best wireless access point

3. Advising on the use of resources

Advisor of traffic jams and alternative driving routes

4. Manipulating resources

Automatic payments in public transportation

5. Inhibiting resources

In-car ignition interlock device

6. Finalizing resources

Intelligent hibernation in mobile phones

Salovaara, A. & Oulasvirta, A. (2004). Six modes of proactive resource management: A user-centric typology for proactive behaviors. INordiCHI 2004. https://doi.org/10.1145/1028014.1028022

Exercise: Invent more computer-based

resource adaptations

1. Preparing resources

Predictive data search and preparation in the background

2. Optimizing resources

Intelligent selector for best wireless access point

3. Advising on the use of resources

Advisor of traffic jams and alternative driving routes

4. Manipulating resources

Automatic payments in public transportation

5. Inhibiting resources

In-car ignition interlock device

6. Finalizing resources

Intelligent hibernation in mobile phones

Assignment 10

Prototyping two UIs for a music player app and planning a test for choosing between them

Marvel, a web-based prototyping tool

https://marvel app.com

A10: Prototyping two UIs for a music player

app and planning a test for choosing

between them

Simple music player for jogging

Step 1: Sketch two UI interaction alternatives with Marvel

Accordion-based interaction (demo) Swipe-based interaction (demo)

Step 2: Research design of an empirical test to choose between the two alternatives

Where + how to learn more

about HCI

Theses

Bachelor’s thesis Master’s thesis

Courses

Emergent User Interfaces CS-E4200, Period III Prof Tapio Takala

Designing Interactive Systems CSM13402 (UH), Periods III-IV Dr. Salvatore Andolina

Usability Evaluation

CS-E5210, Period IV-V Dr Antti Salovaara

Information Visualization CS-E4840, Period IV Prof Kai Puolamäki

Autumn 2019 User Research ELEC-E7890, Period I Dr Jussi Jokinen Social Media CS-E5610, Period I Prof Risto Sarvas

User-Centered Methods for Product and Service Design

CS-E4900, Perios I-II Dr Mika Nieminen

Computational User Interface Design / Engineering for Humans

ELEC-E7851 or ELEC-D7010, Period II Prof Antti Oulasvirta

User Interface Construction CS-E5220, Period II

Master’s study programs

Major in HCI at A! SCI

Extent: Long or compact major (40-65 credits) Minor (20-25 cr) More information: https://into.aalto.fi/displ ay/enccis/Human-Computer+Interaction +2018-2020 Applications: https://into.aalto.fi/displ ay/enccis/How+to+app ly 3.12.2018 – 11.1.2019 Usability School With:

Aalto ARTS (School of Design) University of Helsinki (Cognitive Science) More information: http://uschool.aalto.fi Applications: May 2019 26

Major in ICT Innovation at EIT With: Several universities across Europe More information: https://www.aalto.fi/nod e/30431 Applications: 15.11.2018 - 2.1.2019

HelsinCHI research seminar

Monthly seminar for Helsinki-area research

Each meeting has 3 presentations of ongoing (=unfinished) research

Focus on peer support

Identification of early-stage failures in research

Followed with social after-seminar meeting at Fat Lizard More information:

Next HelsinCHI: 13 December, 14-16 @ TUAS TU6 Email: https://list.aalto.fi/mailman/listinfo/helsinchi-all

Facebook: https://www.facebook.com/groups/879710005488253/

About the exam

+ recommended reading

What the exam will contain (tentatively)

Term explanations (~8 points)

What the term means

What its relevance is for HCI and UCD

Interaction design challenge (~6 points)

Formulation as a problem

Presentation of a solution method

Presentation of a method or technique (~6 points)

What the method is and what is its purpose What are its limitations

What are its strengths

Exam time and place:

10 December 17:00–20:00 @ T1 (C202)

Reading material

Lectures

Assignments

+ Online sources (see the “For Aalto users” section in MyCourses)

Course feedback survey

Contains 7 questions

3 with free-text response

Will be opened on 3 December (at latest) You will receive an email about this

Thank you!