Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left...
-
Upload
robert-compton -
Category
Documents
-
view
213 -
download
0
Transcript of Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left...
![Page 1: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/1.jpg)
Razorfish, Germany
Case Study:
Audi
![Page 2: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/2.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/3.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/4.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/5.jpg)
5Schematics
![Page 6: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/6.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/7.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/8.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/9.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/10.jpg)
10
![Page 11: Razorfish, Germany Case Study: Audi 2 1. Schematics (wireframes) 2. Jumping Boxes 3. Right vs. Left Navigation.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/11.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/12.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/13.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/14.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/15.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/16.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/17.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/18.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/19.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/20.jpg)
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.](https://reader035.fdocuments.us/reader035/viewer/2022070305/5514cb9c55034693478b4cd2/html5/thumbnails/21.jpg)
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)