User Experience Design

Lecture 2 – School of ICT

Quinton Nitidrono
[email protected]
8639355
User Experience Design
Lecture 2 – School of ICT Multiscreen UX Design: Developing for
a Multitude of Devices –Wolfram Nagel
›ISBN: 978-0-12-802729-5

Lecture 1: Introduction + Users

Lecture 2: UX Models + strategies & examples
Lecture 3: Context of use + Information Architect
Lecture 4: Device/Screen + Wireframes
Lecture 5: Interaction Design
Lecture 6: Beroepsopdracht
Lecture 7: Presentaties + Evaluatie

Quinton Nitidrono
[email protected]
8639355
 User Experience Design
Lecture 2 – School of ICT

CUBI Model
• Content
• User Goals
• Business Goals
• Interaction

UX MODELS
 User Experience Design
Lecture 2 – School of ICT

UX MODELS
 Todd Zaki Warfel’s UX Model

UX MODELS
 David Armano’s UX Model

UX MODELS
 Namahn Design in Brussels

UX MODELS
 Stephen P. Anderson UX Model

UX MODELS
 User Experience Design
Lecture 2 – School of ICT

UX MODELS USING UX MODEL

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

- In multiscreen experience design, you should take into
consideration above all: the users’ expectations.
- Moreover, there are a wide array of cultures, user types,
platforms, contexts of use, and devices that you must reconcile
and take into consideration in the concept.
- The previously discussed device, user, and context prototypes
can help to master these challenges. In this chapter, important
and helpful patterns, methods, principles, and approaches are
introduced for the development of strategy.
UX MODELS USING UX MODEL Strategies & examples
 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Important terms and concepts:

Strategies & Examples › Clarity and usability
Mobile First › Expanding the first principle
- Initially focus on the screen that offers the
least space for contents or is the most
complicated to operate
› Mobile as an opportunity for innovation
- Localization, orientation, audio input,
intuitive touch interface, camera, inclination
sensor, and other options can be intuitively
and sensibly utilized for new (mobile)
concepts
UX MODELS USING UX MODEL Strategies & examples
 User Experience Design
Lecture 2 – School of ICT

Important terms and concepts:

Strategies & Examples › Desktop already there: Mobile second (as a
Mobile First latecomer)
- Determine which relevant layouts and
layout elements are needed, which you must
focus extra attention on, and which you can
adapt directly in the code.
- Next, the breakpoints are defined, and
various device featuresare identified
(resolution, camera, etc.).

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Important terms and concepts:

Strategies & Examples › Desktop already there: Mobile second (as a latecomer)
- The interface for the small screen can be designed
Mobile First independently of the existing materials and, on this
basis, an optimization for the larger screens can then
be undertaken
quasi retroactively.
- Identify and analyze use cases. What do visitors to
the website actually want to do? What is their
focus?
- Simplify the navigation, layouts, and the existing
functionality. What can you leave out? How should
you change the layout on mobile devices?

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Important terms and concepts:

› Desktop already there: Mobile second (as a latecomer)
Strategies & Examples - Critically scrutinize interaction. Information offerings on
Mobile First touch devices are used differently. The screen area offers
less space. Thus, you must adapt the navigation and
content concept for mobile devices.
- Utilize responsive design patterns. Often, it can suffice
to work with well known and established layout patterns
and to change the arrangement of the content elements
only slightly (e.g., changing a two column layout to a one
column layout).
- Remove unnecessary elements, aggregate similar ones,
and simplify the user interface (e.g., reduce and simplify
the input fields on the contact forms).

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples Important terms and concepts:

Simultaneity › Parallel users and the second screen

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples Important terms and concepts:

Social TV › TV revolution: The smart channel
› Truly interactive TV

Classification of Social TV
› Contents layer
› Advertising layer
› Technology and the user interaction
layer
UX MODELS USING UX MODEL Strategies & examples
 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples Social TV: The 5 stages of interaction

Social TV › User to User interaction
› Moderated interaction
› Mirroring the user interactions
› Engagement of the users
› Interaction with the TV program

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

Coherence: Adaptability

- Layout adaptability
- Responsive or adaptive web design
- Layout categories and layout patterns

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

Coherence: Adaptability

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

Coherence: Adaptability

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

Coherence: Adaptability

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

Coherence: Adaptability

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

Coherence: Adaptability

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples Important terms:

Smart Content › Responsive or adaptive content
› Content first
› Flexible information and contents
› Future oriented contents
› Central data maintenance
› Separating, content, structure, and display
› Structure more important than design
› Atomic content (content modeling)
› Future content flows

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Content Strategy:
Strategies & Examples › How to do it
› Action relevant content
Smart Content › Content availability
› Innovation services
› Information visibility
› Taking the analog media into consideration

Extensibility
› Take it into consideration early
› Losing control with user generated content
› Content management
› Cross media publishing

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Strategies & Examples

Mashability Important terms:
› Using interfaces (API) intelligently
› Combination and democratization of contents
› Aggregation of contents and services
› Open news platforms
› Added value through availability

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Vragen?

UX MODELS USING UX MODEL Strategies & examples

 User Experience Design
Lecture 2 – School of ICT

Geen individuele opdracht deze week!

UX MODELS USING UX MODEL Strategies & examples Opdracht