Top Banner
Razorfish, Germany Case Study: Audi
22

Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

Mar 27, 2015

Download

Documents

Robert Compton
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

Razorfish, Germany

Case Study:

Audi

Page 2: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

2

1. Schematics (wireframes)

2. „Jumping Boxes“

3. Right vs. Left Navigation

Page 3: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

3Schematics

Documents separate & independent

Problem: Traceability

Changes & updates inefficient

Version control problematic

Page 4: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

4Schematics

Solution: Adobe GoLive

Sitemap and schematics linked 1:1 Components = modular construction WebDAV server

– concurrent work on schematics– remote access by client

Cross Platform: PC and Mac; HTML

Convergence of deliverables

Page 5: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

5Schematics

Page 6: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

6Schematics

Disadvantages Site file grew to 30+ mb Unstable, crashed Sitemap tool is suboptimal Didn‘t get team buy-in

Overall GoLive met our expectations, but is the wrong tool for the job

Underscores need for an IA tool

Page 7: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

7

1. Schematics (wireframes)

2. „Jumping Boxes“

3. Right vs. Left Navigation

Page 8: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

8Jumping Boxes

Users surf with different window sizes

Problem: Variable Browser Sizes

One screen size Web design

Right navigation must be visible

Page 9: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

9Jumping Boxes

Three page layouts offered – S, M, L

from 640x480 to 1024x768

Automated Layout

Fulfilled CI constraints

Brand: “Vorsprung durch Technik”

Page 10: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

10

Page 11: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

11Jumping Boxes

Disadvantages Technically difficult to implement Usability problems? Not needed for all page types

A complex solution for a simple problem

Page 12: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

12

1. Schematics (wireframes)

2. „Jumping Boxes“

3. Right vs. Left Navigation

Page 13: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

13Right vs. Left Navigation

Right navigation = Audi as innovator

Challenge: Competitive Difference

Smoother interaction with

scrollbar

Greater focus on content

Subjectively accepted by users

Page 14: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

14Right vs. Left Navigation

2 prototypes: 1 left & 1 right navigation

64 users: 2 groups

External Test: www.SirValuse.de

Part 1 – Six tasks were timed

Part 2 - Eye movement analysis

Part 3 - Interviews

Page 15: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

15Right vs. Left Navigation

Time

Tasks

1 2 3 4 5 6

R

L

Significant

Part 1 - Hypothesis

Page 16: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

16Right vs. Left Navigation

Time

Tasks

1 2 3 4 5 6

RL

NoSignificance

Part 1 - Results

Page 17: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

17Right vs. Left Navigation

Method: www.MediaAnalyzer.com

User rapidly coordinate clicks with where they look

Part 2 – Eye movement

Hypothesis:

right navigation > focus on content

Page 18: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

18Right vs. Left Navigation

Results: Stronger focus on content

Page 19: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

19Right vs. Left Navigation

Do you like the right navigation?

Part 3 – Interview

: |: ) : (7 23 2

Page 20: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

20Right vs. Left Navigation

„Normal” methods with 25 participants

Subsequent Usability Test

Corroborated findings of first test

No difficulties with a right navigation

Positive subjective response

Only 1 commented on right navigation

Page 21: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

21Right vs. Left Navigation

Conclusions Users are ambidextrous in terms of

navigation position

Consistency and learnability

People expect that websites vary

Interaction given by design and

layout, not prior expectations

(Affordance)

Page 22: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.

Razorfish, Germany

Thank You

[email protected]