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

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



Goal

Developing digital products



Goal

Developing digital products

product as functionalityversus

product as information

mainly in the Web context



Goal

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

Model

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.






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

etc.

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

discussion



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





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



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




Using “classical” software engineering methodologies

cascadespiral

RAD – Rapid Application Development…




User-centered design methodologies

GUIDELUCID

STUDIOconcerning usability – ISO 13407



ideas

build

pro-duct

mea-sure

data

learn

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

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




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






possible options to response to each question

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



QOC

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

discussion



QOC


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

discussion



QOC


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

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

discussion



QOC

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




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




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

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

Design

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