Week 6 User Experience Interactive Process & Practice Design - - PowerPoint PPT Presentation

▶
week 6
SMART_READER_LITE
LIVE PREVIEW

Week 6 User Experience Interactive Process & Practice Design - - PowerPoint PPT Presentation

Dec 04, 2023 189 likes •672 views

Spring 2018 ar589.github.io Week 6 User Experience Interactive Process & Practice Design User experience is something you design. Useful Factors Usable Desirable that influence Valuable user Findable Accesible experience

slide-1
SLIDE 1

Spring 2018 — ar589.github.io

Week 6 Interactive Design

User Experience Process & Practice

slide-2
SLIDE 2

User experience is something you design.

slide-3
SLIDE 3

Valuable Useful Credible Findable Usable Accesible Desirable

Factors that influence user experience

slide-4
SLIDE 4

A successful design helps the user achieve their goals.

slide-5
SLIDE 5

Give the user the appropriate information at the appropriate time.

slide-6
SLIDE 6

The Process

slide-7
SLIDE 7

Research Interviews Strategy Content Information Architecture Prototyping Interface Design Interaction Design

Understand Plan Design

slide-8
SLIDE 8

Understand

slide-9
SLIDE 9

What do we need to know?

  • What is the content?
  • What is the competitive landscape?
  • Who is the audience?
  • What is the goal?
slide-10
SLIDE 10

Do Your Research First

slide-11
SLIDE 11

Become an Expert

  • Get as invested as you can in the content.
  • Audit any existing copy and imagery.
  • Check out related communities online.
  • Read as much as you can.
slide-12
SLIDE 12

Basic Assumptions

  • The user is an actual person.
  • They are looking for something specifjc.
  • They don’t know anything about the content.
  • They have more important things to do.
slide-13
SLIDE 13

Understand the Audience

slide-14
SLIDE 14

A designer’s most important skill is asking good questions.

slide-15
SLIDE 15

User Interviews

  • What are their motivations?
  • What is their background?
  • What do they care about?
slide-16
SLIDE 16

Strategize a Solution

slide-17
SLIDE 17

Find where the user’s needs and the content overlap.

slide-18
SLIDE 18

Make Recommendations

  • Document fjndings
  • Present a plan
  • Build consensus
slide-19
SLIDE 19

Avoid Pseudo Science

slide-20
SLIDE 20

Document Your Findings

  • Make a concrete deliverable that you

can refer back to.

  • This will remind you of the goals and

be a guiding light for later decisions.

slide-21
SLIDE 21

Plan

slide-22
SLIDE 22

Anyone can make a thing. Designers make the right thing.

slide-23
SLIDE 23

Figure out what you have to work with.

slide-24
SLIDE 24

Content Strategy

  • Identify what already exists.
  • Connect goals to information.
  • Use content to it’s maximum efgect.
  • Propose new content to support your goals.
slide-25
SLIDE 25

Map it out.

slide-26
SLIDE 26

Information Architecture

  • Build a mental model of your content.
  • Your site should be intuitive and organized

in a way that anticipates the user’s needs.

  • Get users to content as quickly as possible.
  • Navigation is a powerful storytelling tool.
slide-27
SLIDE 27 CONTACT /contact ABOUT /about HOME thestantonfoundation.org CANINE WELFARE /canine K9 UNIT /k9-unit CURRENT PARTICIPANTS /participants HOW TO APPLY /apply AFTER THE PARK OPENS /opening SUBMISSIONS /submissions FAQ /faq RESOURCES /resources MUNICIPAL DOG PARKS /municipal-dog-parks MOBILE ADOPTION VANS /adoption-vans NEXT GEN RESEARCH /next-gen-research DESIGN GRANT /design-grant CONSTRUCTION GRANT /construction-grant FOUNDATION REVIEW /foundation-review TOWN REVIEW /town-review INTERNATIONAL/NUCLEAR SECURITY /security FIRST AMENDMENT/ INFORMED CITIZENS /informed-citizens

Municipal Dog Parks Program

http://thestantonfoundation.org/canine/municipal-dog-parks
slide-28
SLIDE 28 N Y Sign Up Sign In Delete Save Domains Image Transforms Enter Credit Card Account Update Credit Card Domain First Run Domain List Add Domain Edit Domain Select Plan N Y Subscribed to any plan? N Y Has Domains? N Y Has Domains? Change Card Change Plan Cancel Plan Rescue Account Update Email/PW Has at least one domain? Y Subscribed to Transformer Plan? Delete Save IT First Run IT List Add IT Edit IT N Y Has Image Transforms? N Y Has Image Transforms? N Flash: Card Updated “Pre-deletion” Flash: Plan Updated Flash: Info Updated
slide-29
SLIDE 29

Design is how it works.

slide-30
SLIDE 30

Prototyping

  • Start building a “wireframe” in HTML / CSS

with real content as soon as possible.

  • Iterate until you are confjdent in the structure
  • f your design.
slide-31
SLIDE 31

Action Design

slide-32
SLIDE 32

Reconnect to the Goals

  • Tie design decisions like color, art direction,

and typography back to your strategy.

  • Visual design can be emotional.

Don’t let that derail your process.

  • Involve stakeholders to build consensus.
slide-33
SLIDE 33

Create an informed look and feel.

slide-34
SLIDE 34 midnight #333030 slate #68646e evergreen #456632 sprig #6da843 cloud #ffffff P U R E & S I M P L E G A R D E N I N G D E S I G N E D F O R Y O U R H O M E perfectly designed Minimal, pared-back, and clean, this direction turns the dial up on health, clean eating, organic lifestyle, and removing excess like waste, packaging, and shipping with a secondary focus on design. Lots of white space, straightforward typography, a simple, refined color palette of predominantly black, white, and green with highlights of orange. Photos with dark backgrounds and dramatic close-ups or overhead shots of plants. made in the USA Scandia Regular

Aa Bb Cc Dd Ee

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Pressura Mono Regular

Aa Bb Cc Dd Ee

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
slide-35
SLIDE 35

Natural & Wholesome

Familiar and authentic, this look and feel has a heavy focus on nature, outdoors, and gardening balanced by modern elements.

What will you grow?

Friendly slab serif headlines paired with a clean, modern sans serif for body copy. A soft, neutral color palette and photos that make use of natural lighting with background textures like concrete and wood. PRODUKT REGULAR

Aa Bb Cc Dd Ee

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 GRAPHIK REGULAR

Aa Bb Cc Dd Ee

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Petal #f7c2a1 Clothesline #f2f2e4 Pebble #e9cb99 Soil #484443 Stone #7c8185 Pond #a9c7c7 Grove Orange #f68526 DIY BY DESIGN

USA

M A D E I N THE
slide-36
SLIDE 36 W A L S H E I M P R O R E G U L A R

Aa Bb Cc Dd Ee

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 W A L S H E I M P R O M E D I U M

Aa Bb Cc Dd Ee

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Bold graphic elements borrowed from nutrition labels paired with a bright, saturated color palette and a modern, quirky typeface. Light and airy photography with natural textures or white - but not isolated - backgrounds. Active, energetic, and humanist, this style highlights food with a slight focus on cooking — the ultimate result of gardening. K A L E #4a6637 G I N G E R #ebefd4 P A P A YA #f38363 C H A R C O A L #484443 S T E E L #7c8185 G R O V E O R A N G E #f68526 G R E E N A P P L E #68b045 H A R V E S T S T O R I E S Get growing.

Fresh and Vibrant

M A D E I N T H E U S A
  • M
A D E I N T H E U S A
  • 7C8185
slide-37
SLIDE 37

Pure and Simple

P E R F E C T LY D E S I G N E D Minimal, pared-back, and clean, this direction turns the dial up on health, clean eating, organic lifestyle, and removing excess, with a heavy focus on design. Evergreen #456632 Papaya #f38363 Grove Orange #fc8620 Gardening designed for your home. Lots of white space, friendly typography, and a refined color palette
  • f black, greens, and a mix of both warm and cool neutrals with
highlights of orange balance high-end design with approachability. Photos with dark or white backgrounds and full-frame close-ups of plants create a dramatic but natural scene. S C A N D I A R E G U L A R

Aa Bb Cc Dd Ee

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 S C A N D I A M E D I U M

Aa Bb Cc Dd Ee

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 M A D E I N T H E U S A Midnight #333030 Natural #e6d8b8 Twine #f2f2ef Sprig #68b045 Slate #68646e
slide-38
SLIDE 38

Design an intuitive system.

slide-39
SLIDE 39

Create a World

  • Build a consistent visual language that

the user can understand.

  • Create hierarchy to move the user through

content effjciently.

  • Use design elements to draw attention

to the most important pieces of content.

slide-40
SLIDE 40

Add Impact

  • Make the most out of the assets you create.
  • Drive home your point with clear calls to action.
slide-41
SLIDE 41

Things to Remember

slide-42
SLIDE 42

Simple > Complex

slide-43
SLIDE 43

The details are key to a good user experience.

slide-44
SLIDE 44

Bring others along for the ride.

slide-45
SLIDE 45

Be respectful

  • f the user.
slide-46
SLIDE 46

Assignment 2

slide-47
SLIDE 47

Movie App Interface

Create a responsive multi-page experience that will guide a user through selecting from a list of movies and purchasing tickets.

Due March 23

slide-48
SLIDE 48

Design Challenge

Start thinking about your goals for your app and document your process.

  • Defjne your audience and consider their intent.
  • Create a sitemap of your website.
  • Create a content inventory.
  • Build out the structure of your app in HTML.