HCI 2014 (3 of 10): Design Models and Methodologies

transcript

Master on Software Engineering :: Human-Computer Interaction

Dr. Sabin-Corneliu Buraga – www.purl.org/net/busacodesign models & methodologies

Human-Computer Interaction

Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco

“Machines certainly can solve problems,store information, correlate,

and play games – but not with pleasure.”

Leo Rosten

Developing digital products

product as functionalityversus

product as information

mainly in the Web context

Alan Cooper et al., About Face (3rd Edition), 2007

Reality

Software engineering is mainly focused onthe communication between applications

and developers or between teams of developers

Reality

Human-Computer Interactionconsiders the communication with the user

Reality

Interface design requiresan important development effort

Reality

Interface design represents 50% of…

design timeimplementation time

maintenance timesource-code volume

Necessity

Within the design processes, we’ll need to employ:

theoriesmodels

frameworks

Rogers, 2007

Necessity

Theory

gives a (rigorous, formal) clarificationof certain aspects regarding a phenomenon

Necessity

simplifies a given aspect about interactionin order to facilitate choosing and/or evaluating

alternatives of design

Necessity

Framework

denotes a set of interconnected conceptsand/or a set of specific problems regarding HCI

Aspects concerning the UI design

involved disciplines & persons (Challis Hodge)

Aspects concerning design

Interaction Design

story creatingstory telling

story creating & telling used in the context of prototyping

Sensorial Design

conventional interaction

Sensorial Design

conventional interaction

graphic design, illustration & photographysound design, musical performance, vocal talents

videography, cinema

Sensorial Design

natural interaction

Sensorial Design

natural interaction

tactile designolfactory design

kinosthatic design…

Sensorial Design

natural interaction

new paradigms & expectationsaugmented and virtual reality, physical computing, etc.

the role of sensorial design in the automotive industry

initiatives: CarPlay (for iOS) and MirrorLink (works with Android devices)

case study

Task-centered interface design

focused on the developer’s (producer’s) goals:easiness of implementation, the use of technology, etc.

ignores the user – e.g., usability

creating a feature-centric software:many – never used – features

mammoth applications

encouraged by the classicalsoftware engineering methodologies

User-centered interface design

software must please, help, protect the user

design must consider the user expectations

applications must simplify the humans’ tasks

the user is automatically “opted in”

courtesy of Patricia Saravesi (2014)

“User experience and interface design in the context of creating software represents an approach that

puts the user, rather than the system,at the center of the process.

This philosophy, called user-centered design,incorporates user concerns and advocacy fromthe beginning of the design process and dictates

the needs of the user should be foremostin any design decisions.”

MSDN, User Interface Design & Development section

User model versus implementation model

the most simple model must be adopted

Alan Cooper, 1995, 2007

When a model is adopted,a certain perspective is considered

perspectives:system

dialogue (interaction)tools (computer as a tool)

environment (computer as a partner)

System perspective

a Gelstalt view of the whole application

System perspective

interaction is taking place in a standard,pre-defined (sometimes rigid) format

“I am thinking about something much more important than bombs. I am thinking about computers.” – John von Neumann (1946)

System perspective

too often, user mental model is ignored

“Demanding that users register or log in before they can use an app or see Website information has high interaction cost.” – Raluca Budiu (2014)

www.nngroup.com/articles/login-walls/

login wall

potential customers have no way of knowing if they are

interested in a certain available product/service

case study

Dialogue perspective

both user and computer are seen as partnersof a certain conversation

communicative behavior similar to the human one

http://tinyurl.com/8xz8prs

reported by @johnbreslin

texthypertext

direct manipulationpictures & illustrations

gesturesemotional factors

factors concerning the choose of a dialogue type(Stefan Trausan-Matu, 2000):

information categoryimages, numbers, names, relationships,…

context: data visualization

for other examples, visit http://firsttimeux.tumblr.com/

information structurelimited set of values, lists of pairs (name, value), graphs,…

designed by Dr. Stefan Negru (2014)

information structure

datainformationknowledge

user profile and preferencesage, abilities, ethnicity, social aspects, etc.

remember personas?

activity type + concurrency(collaborative) work, leisure, real-time task,…

contextspatial, temporal

Touch-based interaction

hand obstructioninaccuracy of tapping

lack of haptic feedbackmulti-touch issues

www.slideshare.net/pankorho/touch-uis-are-quite-different

discussion

perceptual blindness“How do I close this pop-up?”

Tools perspective

users (need to) have full and continuous controlover all tools provided by the computer and

with their help want to accomplish their goals

software as a tool

www.designinginteractions.com/downloads/DesigningInteractions_2.pdf

Environment perspective

computer is considered as a communication environment between persons

(e.g., via e-mail, chat, social applications,…)

the process of communication is the same,even if software and/or types of interaction are different

proliferation of multi-platform (mobile) Web applications

able to integrate social networks

How about design values?

http://noisydecentgraphics.typepad.com/design/images/2008/03/11/yourproduct.jpg

Design values

EthicalPurposefulPragmatic

Elegant

Alan Cooper et al., 2007

Design values

Ethical (helpful)

do no harm, improve human situations

discussion

Design values

Purposeful (useful, usable)

help users achieve their goals and aspirations

accommodate user contexts & capacities

Design values

user expectations regarding the interface (Peter Morville)

discussion

Design values

Pragmatic (viable, feasible)

help organizations achieve their goals

accommodate business and technical requirements

Design values

Elegant (efficient, artful, affective)

represent the simplest complete solution

possess internal(self-revealing, understandable) coherence

appropriately accommodate/stimulatecognition and emotion

Dr. Sabin-Corneliu Buraga – www.purl.org/net/busacohttp://pinterest.com/zimmatore/elegant-ui-design/ http://androidniceties.tumblr.com/

skeuomorphism versus flat design

Design values

“A visual bug seen by all your customers might domore damage to your program’s reputation

than a rarely occurring crashing bug.”

Windows UX Guidelines, MSDN

Design values

“An application is powerfulwhen it enables its target users to realize

their full potential efficiently.”

Windows UX Guidelines, MSDN

Design models and methodologies

Models & Methodologies

Using “classical” software engineering methodologies

cascadespiral

RAD – Rapid Application Development…

User-centered design methodologies

GUIDELUCID

STUDIOconcerning usability – ISO 13407

pro-duct

mea-sure

iterative design methods are preferredlean startup method (Eric Ries, 2011)

Methodologies

Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011

bottom to top conceptual framework

each plane is dependent on

the planes below it

Methodologies

Agile design methodologies

many factors of uncertainty

work is organized into the smallest possible batch size in order to quickly launch the product

Models & MethodologiesUX activities occurring during

the course of a single sprint

example

Lynn Pausic (2012)

Agile development & Lean UX shared goals

shorten the time to marketworking software over comprehensive documentation

collaboration over negotiationresponding to change over following a plan

Lean UX vs. Agile UX (Marcin Treder, 2013)

Lean UX processes

Will Evans & Jacklyn Burgan, Intro to Agile and Lean UX (2013)http://www.slideshare.net/jacklynburgan/intro-leanux-turnerfinal

John Whalen, Implementing Lean UX (2013)http://www.slideshare.net/johnwhalen/uxpa-2013-implementing-lean-ux

Figure out: who it’s for?interviews, personas, design target

What can the user do that wasn’t possible before?

activity map, concept drawing, storyboards

What features does the user need for that?

sticky notes, sketches,whiteboarding

Sketch it, (prototype it), then build it

“fake it, then make it”

Lean UX

Lean UX = design thinking + agile + lean startup principles

for details, see Amrita Aviyente, Agile + Lean Startup principles + Lean UX (2013)

http://www.slideshare.net/amritacaviyente/agile-lean-uxfinal

UCD (user-centered design)

Lean UX

learn from users learn from users

no agile concepts uses agile concepts

no validating hypothesis validating hypothesis

no way to measure design outcomes

measure design outcomes

Methodologies could be based on certain models

conceptual models for designing a Web interfaceRobert Baxley, 2003

QOC (Questions, Options, Criteria)Maclean et al., 1991

questions regarding design key issues

possible options to response to each question

evaluation criteria – e.g., ergonomics, accessibility, preferred interaction method,… – concerning every option

question:How user could pick a location for flower delivery?

discussion

options:listbox, combobox, textfield, using a map,…

discussion

options:listbox, combobox, textfield, using a map,…

criteria:efficiency, keyboard-only interaction, using gestures, etc.

discussion

example: QOC for touch-based interaction with a patient monitoring applicationA. Berila, A. Bulai, C. Chiric & M. Plesca, 2012

patientmo.wordpress.com

Iterative design may employ usersin the different phases of the project

these persons could evaluate UIin early stages of development

from idea to the final software product

Prototyping

overall view of the user interface

Prototyping

proposes a design solution

no full functionality required

Prototyping

could be dynamic

provides ways for experimentation

Prototyping

attract users in the development process

might have an important role in testing

Prototyping

adapted from Amrita Aviyente, 2013

fidelity tool

paper prototype paper + pencil

low – clickable wireframe OmniGraffle, Gliffy, MS Visio, UXPin

medium Axure RP, Adobe Illustrator

high code (e.g., HTML + CSS + JS)

paper prototype of main page for www.info.uaic.ro

(Sergiu Dumitriu, Marta Gardea, Sabin Buraga, 2006)

Original Twitter Concepthttp://www.flickr.com/photos/jackdorsey/182613360/

Storyboard

describing the manner of presenting information,without any functionality

http://storyboardcentral.blogspot.com/

A. Stanciu, I. Schiopu, A. Grigoriu, I. Lazar (2011) – aisquared.wordpress.com

Storyboard

in the Web context, it usually consists of wireframes

Wireframe

provides a general view of the structure of interfaceand relationships between pages

wireframe-based design

Wireframe

created in the first stage of the project

gives instructions to both designers and programmers regarding the interface look & behavior

conceptual page layouts

Dr. Sabin-Corneliu Buraga – www.purl.org/net/busacoA. Stanciu, I. Schiopu, A. Grigoriu, I. Lazar (2011) – aisquared.wordpress.com

Mockup

provides a low-fidelity – full-size or scaled – prototype:paper illustration, screenshot,…

Mockup

provides a low-fidelity – full-size or scaled – prototype:paper illustration, screenshot,…

used for demonstration, teaching, evaluation

mockups for a geolocation-based recommender system

A. Stanciu, I. Schiopu, A. Grigoriu, I. Lazar (2011) – aisquared.wordpress.com

Mockup

several examples of available software tools:Balsamiq Mockups – www.balsamiq.com

HotGloo – www.hotgloo.com

MockFlow – mockflow.com

Mocking Bird – gomockingbird.com/mockingbird/

Moqups – moqups.com

Proto.io – http://proto.io/

Interface assistants (wizards)

help users to dynamically create the interface

interactive prototyping

Case study #1:designing a Web interface for Apricado Music

http://jeff.io/posts/user-interface-wireframes

Step 1: paper prototype (sketch)

signup form

step 2: wireframe

Step 3: design mockup

step 3: design mockup

step 4: implementation

real Web interface (HTML+CSS)

Case study #2:UI design for an iPhone applicationable to manage personal expenses

Andrei Potorac, 2011

storytelling – includes useful notes for designer/developer

from mockup to UI prototype – using the iPhone emulator

For further information:

Philipp Schroeder, “Sketching, Wireframing, Prototyping –How to Be Agile & Avoid Half-Baked UX” (2012)

http://www.ustream.tv/recorded/25221096

Craig Brewster, “Lean UX in practice” (2013)http://wp.me/pV32M-aU

Necessity of specific HCI guidelines and standards

to assure the quality of user interface

Standards

Imposed by (inter)national organisms

examples:ISO 9241

W3C Standards StUX (Standards for User Experience)

Guidelines

Provides details and design suggestions

Could list abstract principles to be usedin early stages of UI development

May resolve certain design conflicts

Guidelines: examples

BBC GEL (Global Experience Language)GNOME HIG – Human Interface Guidelines

Samsung Smart TV UX Guideline UX Design Guidelines for Windows Phone

iOS Human Interface GuidelinesWeb Content Accessibility Guidelines

ARIA (Accessible Rich Internet Applications)context: Web Accessibility Initiative – www.w3.org/WAI/

case study

GNOME HIG: usability principles

Design for peopleDon’t limit your user base

Create a match between your application & the real worldMake your application consistent

Keep the user informedKeep it simple and pretty

Put the user in controlForgive the user

Provide direct manipulation

for details, read https://developer.gnome.org/hig-book/3.10/

case study

Principles for Designing Apps for Samsung TV

SimplicityClarify

User ControlConsistency

FeedbackAesthetic Considerations

see also https://www.samsungdforum.com/UxGuide/

case study

“Conclusion”

aspects regarding UI designfrom methodologies to guidelines

next lecture:information architecture & design patterns