Está en la página 1de 170

| 3

table o f co ntents
Courses / Students / Faculty — p.4

Section 1: Research — p.7

Section 2: Research Synthesis — p.29

Section 3.1: Industrial Design / Concept Development — p.35

Section 3.2: Industrial Design / Final Concepts — p.61

Section 4.1: Interaction Design / Methodology — p.113

Section 4.2: Interaction Design / Touch-Screen User Interface — p.139

Section 4.3: Interaction Design / Non-Touch User Interface — p.153


4|

IDUS 42 1 : Projec t G oals

With the product creation process becoming more integrated with Practices in Industrial Design worked closely with students
business strategy planning, tomorrow’s designers will need to from IACT 720, Interactive Product Design developing netbooks
be able to discover unarticulated opportunities and rapidly for three main target groups: 7-11 years of age • 12-15 years
transform them into breakthrough product concepts. Central to of age • 16-18 (+) years of age
this process is an understanding of the customer. The students The students analyzed existing technology, conducted com-
will look at how the design of experiences can determine prod- petitive and peripheral market research, as well as in depth
uct attributes that lead to innovative solutions. The students contextual research with the different target groups. Diverse
will create human-centered concepts from primary research that concepts were explored, usability testing was conducted and
satisfy people’s explicit and implicit needs for useful, usable final designs were build to previously developed specifications.
Verena
and exciting new products. Solutions are presented in form of 3D computer renderings as
Paepcke-Hjeltness
Over a ten week period students of IDUS 421, Commercial well as full scale volume models.

Brad Bryan Zarni Colin Trevor Liz


Fenning Hemenway Ko Martin McKay McKibbon

Mason Cody Julian Win Gunter


Pfau Rexrode Romero Tangsakulsuthaporn Watkins

F r e e s c a l e /SCA D
C o u r s e s / S t u d e n t s / Fa c u l t y
| 5

IACT 720

The following course goals articulate the general The following course outcomes indicate competencies
objectives and purpose of this course: • To under- and measurable skills that students develop as a
stand the implications of designing for a digital result of completing this course: • Explore and
medium • To look towards the future of interface develop creative, exploratory interactive solutions
design, where standard widgets are no longer relied to complex, non-linear problems • Draw connections
upon and traditional interface paradigms are rejecte between current technological trends and futuristic
• To think analytically about interaction design in visions for interactive product design • Develop
the future • To visually document an interactive physical and interactive designs that mesh cohe-
design process sively to create an all encompassing interactive
David
design product.
Malouf

Matt Charlie Jill Wei Hsin Alex Quianru


Cole Gongora Graves Lai Wang Zhang

F r e e s ca l e /SCA D
C o u r s e s / S t u d e n t s / Fa c u l t y
6|
| 7

sectio n 1

research
ganizers
Palm original
Clam Shell Cover

Talking Dictionary

meras
SLR

Palaroid

Camera Recorder

Cell Phone Cam

Webcam

rm/music
Ipod
Walkman
Tape/ Cassette
Mini Disk
SD Card
DVD player
8|

freescale
research

Along with the initial presentation of


the project parameters, Freescale also
provided a wealth of market data, and
target user investigations. The research
provided by Freescale was reviewed and
mined for any opportunities or jump-off
points for our own research.

F r e e s c a l e /SCA D
Sec tion 1: Research
| 9

opportunities

Form/Function Personalization Comprehension

• Remove association with laptops • Color/pattern to communicate with • “Understanding Linux” feature
• Expression of style user group -Startup
-Operation
• Optimize accessories to users -Customization
-Storage -Programs
-Battery Life
-Optical Drive
-Internet access type
Mobile
Devices
Applications

• Application distribution center

Netbooks

Human Factors
• Keyboard size
• Key/switch placement
• Touchpad/button feel
• Overall dimensions
• Weight distribution
Laptops

F r e e s ca l e /SCA D
Sec tion 1: Research
10 |

A study of current and former tech use was


current/former done to see trends in handheld devices. We
looked at video games and mobile phones
portable devices from the early 90s as well as today’s
everyday devices to gain insight on the
ergonomics and user understanding of
successful devices.

video game
Gameboy (Nintendo)

Game gear with speakers

Tamakachi

Tiger

PSP

mobile
Clamshell

Slider

Touch Screen

Candy bar

Scissor

Triptic

F r e e s c a l e /SCA D
Sec tion 1: Research
| 11

organizers
Palm original

Clam Shell Cover

Talking Dictionary

cameras
SLR

Palaroid

Camera Recorder

Cell Phone Cam

Webcam

alarm/music
Ipod
Walkman
Tape/ Cassette
Mini Disk
SD Card
DVD player
CD player

F r e e s ca l e /SCA D
Sec tion 1: Research
12 | Media in the Home

- The typical U.S. 8-to-18-year olds live in a house


hold media equipped with three TV sets, three
video players, three radios or radio players, two
game consoles, and a personal computer.

- Television is the most ubiquitous personal


medium among children, but far from the only one.

- The percentage of personal media is positively


media in
related to children age and device dimension.

the home

- The typical U.S. 8-to-18-year olds live


in a house hold media equipped with three
TV sets, three video players, three radios
or radio players, two game consoles, and
a personal computer.

- Television is the most ubiquitous per-


sonal medium among children, but far from
the only one.

- The percentage of personal media is


positively related to children age and
device dimension.

F r e e s c a l e /SCA D
Sec tion 4 .1: Interac tion Design / Methodology
| 13

- The table
that new m
and video g
as TV.

- Total med

- As childre
audio medi
related med

media - Media Mu
new genera
exposure

- The table provides little support for


speculation that new media, such as com-
puters, the Internet, and video games, are
displacing such older media as TV.

- Total media exposure increased.

- As children grow older, they are exposed


to more audio media and computer but less
television-related media.

- Media Multitasking is the normal behav-


ior for new generation children.

F r e e s ca l e /SCA D
S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
14 |

web design trends 2009

Embossing Font Replacement Carousels (slideshows) One-page Layouts

Rich User Interfaces Modal Boxes Introduction Blocks Multi-column Layouts

PNG Transparency Media Blocks Out-of-the-box layouts Huge Illustrations & Vibrant Graphics

Big Typography Magazine Look More White Space Social Design Elements

F r e e s c a l e /SCA D
Sec tion 1: Research
| 15

web design trends 2009

Speaking Navigation Author Icons Watercolor Badges

Dynamic Tabs Icons & Visual Clues Handwriting Price Tags

Large Search Boxes Tag Index Retro & Vintage Ribbons

Category Visuals Illustrations in Blog Posts Organic textures, tiles & photographic backgrounds

F r e e s ca l e /SCA D
Sec tion 1: Research
16 |

fashion trends 2009

Context Focus on accessories


Imagine a familiar yet strange • Women. Tech or romantic glasses.
dreamlike world. Mixes periods Bubble necklace. Wide belt with
together in an anachronistic way. wavy design. Soft tote. Draped
Revamp vintage yet fall for the messenger bag. Translucent mules
grace of the ephemeral. Invent a and sandals. Floral men’s shoes.
modern techno romanticism.
• Men. Straw hat with ribbon. Bow
Colors tie. Printed floppy bow-style tie.
Tomorrowland An urban mood, in pale, bleached Acid drop sneakers.
and artificial colors, teamed with
the softness of grey-cast neutrals,
and crossed by grating flashy
colors.

Context Focus on accessories


Dare to take up the challenge • Women. Tribal design sculpture
of modern times. Build a bold jewelry. Bandeau belt in metallic
and creative future like the leather. Chrome leather clutch bag.
architecture of cities such as Heavy-sole sandal in raw leather,
Power Full Shanghai or Dubai. A new lesson in thick-heeled lace-up shoe. Platform
luxury and glamour. gladiator sandal.

Colors • Men. Cuff links. Braces for slim


Mysterious and night-time shadows jeans. Maxi tote in anodized
and austere faux blacks that leather. Mercurized-look oxfords.
catch the light are enriched by Metallic leather, canvas and rubber
shimmering glints. Livened up by sneakers
vivid accents of electric light.

F r e e s c a l e /SCA D
Sec tion 1: Research
| 17

fashion trends 2009

Context Focus on accessories


Give classics a new look through • Women. Shades with striped
color. Create interactions between frames. Necklace between scarf and
worlds and looks. Go for urban jewelry. Charm necklace. Ethnic
elegance with active sportswear, ribbon belt. Clutch bag with
virtual images and exotic bracelet strap. Tote with graphic
influences. A redefinition of urban beaded motif. Plastic and leather
Electrochoc codes. sandal. Wedge sneaker.

Colors
• Men. Printed bandanna and sun
Saturated brights, sulphur,
hat. Printed maxi tote. “Frogman”
electric blue, flashy orange, purple
leggings, color ed or printed
pink to twist with color ed greys
oxfords, canvas and leather
and classics. To wear in pop or
sneakers with day-glo accent.
cubist style color blocks.

Classic Chic Casual

F r e e s ca l e /SCA D
Sec tion 1: Research
18 |

accessory trends 2009 materials & assembly trends 2009

1. Tough economic conditions will force greater


efforts to reduce cost and improve product
effectiveness through accelerated design
engineering. Value engineering processes took a
back seat when business was booming. Now efforts
will be redoubled to find more efficient assembly
systems and more cost-effective materials.

2. Injection molding will gain more attention as


a design tool, for plastics, metals and ceramics.
Advances in materials, simulation and processing
technology make injection molding more feasible
for difficult (e.g. high temperature) applications.
There will be growing emphasis on molders who offer
design support and advanced technology, as other
molders fall by the wayside.

3. Weight reduction efforts in cars will get far


more serious as OEMs such as General Motors finish
materials engineering for electric cars, such as
the Chevy Volt. The short-term winners will be
known materials solutions (e.g., forged aluminum
wheels) rather than exotic and very expensive
solutions (e.g., large scale use of carbon fiber
composites).

4. Medical engineering will rise in importance


2009’s shoe trends are all about making a state-
as OEMs continue to move away from low-margin
ment. The biggest trends to hit the runway were
manufacturing. The troubles in the car industry
received huge press in 2008, but this is a trend
• fetish-inspired shoes • fringing
established more than 20 years ago.
• reptile skin • architecturally-inspired
5. The Japanese companies will lead in new
engineering applications for plastics using
Jewelery in the 2009 collections took many and
natural feedstocks in place of hydrocarbons. Sixty
various forms. There were a few common threads
per cent of the interior components of Toyota’s
amoung them, however, including
new hybrid will be made from plant-based plastics.
• geometric shapes • exotic/ethnic inspirations Parts include scuff plates, headliners, and seat
• rich colours • prominent stones/gems cushions.

F r e e s c a l e /SCA D
Sec tion 1: Research
| 19

gaming trends 2009

1. Tinkering in games 2. Networked experiences (game communities) for nichés


Game editors and users tool for altering the game world will become more Niché products and online game communities targeted to specific target groups
common on the web and in games. There are several ideas focusing on color- (based on demographics, interests etc.) are being put together. When talking
ing or drawing and games utilizing the camera. PS EyePet will be one of the about niché users, keep in mind that in an online environment niché can eas-
most visible embodiments of this but there are also lots of other concepts ily be a lot of people. There are 400M broadband users in the world and there
utilizing the same idea. This will be the time when camera interface takes are ~137M active online community accounts out there. When looking at the
off. Coloring is another “coming up strong” thing. total number of registered users e.g. in Shanda games (700M) or SL (16M) it
seems that the users are starting to find their place in the online worlds.

3. Revenue models and payment methods diversify


Online (game) communities are no longer about the number of registered 4. Massive competitive co-op FPSs (and potentially other genres)

users but about [this is] living. Where as earlier the number of regis- There seem to be a need for scalable co-op games - something in between

tered users was highlighted, now the focus is on stickiness, value for “playing with friends” and MMOs. Resistance 2 is one example of a shared

the users, uniqueness and interactivity. Online communities are intro- experience and collaborative gaming in a scalable and/or flexible game

ducing dual (Habbo.com, GuppyLife.com) or triple currencies (whirled. environment.

com). Time spent and activity in increasingly relevant.

F r e e s ca l e /SCA D
Sec tion 1: Research
20 |

photo journals
Photo Journals are a form of tool kits
that we developed. It consists of a jour-
nal, and a Disposable Camera. The journal
is used to document communication behav-
ior of students during their daily life.
It is also used for them to leave comments
and suggestions in it. The camera is used
take photos of these specific moments to
visually understand the methods of com-
munication and lifestyle.

F r e e s c a l e /SCA D
Sec tion 1: Research
| 21

Customization plays a good role in the test


subjects. Signs of personalization could be seen
on their id cards to the photo journal that we
handed out to them. They were all decorated in
a unique style. But sometimes you can see some
similarity in terms of styling which signifies
that they do things in groups and how trends are
followed by groups and not just individuals.
Pictures of personal belongings like the DS shows
of personalization also where there was a decal on
it. A creation of a personal internet avatar was
also seen in the photos.

F r e e s ca l e /SCA D
Sec tion 1: Research
22 |

There were several notes and scribbles written


on the photo journals. There were also photos
of the subjects personal belongings that have
scribbles and drawings on them. This shows
that the subjects like to write notes and
comments or even draw on items in proximity.

There were several comments on the journals


stating that everyone meet during the
beginning of the day at the homeroom to
socialize and the other places were also in
the lunchroom and at the playground. These
areas are where multiple people interact and
collaborate with each others to perform tasks
or play games.

F r e e s c a l e /SCA D
Sec tion 1: Research
| 23

A text book with a phone beside it was


seen in the photos. This indicate that the
subjects keeps in contact with friends
closely via mobile phone while studying or
doing school activity at home. They also
have instant messengers like gtalk that they
use to communicate to their friends and the
computers that they use are on study tables
making it possible for them to communicate
with their friends while studying.

There were pictures of announcements and notices and


bus schedules displayed on a tv screen in class.
This shows that information was fed to the subjects
digitally via the tv by the school.

F r e e s ca l e /SCA D
Sec tion 1: Research
24 |

show your bag

As part of our contextual research of


the middle school students, we wanted to
find out what these students carried on
a daily basis. We asked the students to
empty the contents of their bags, and sort
the contents by different characteristics.
We looked for similarities between the
contents of their bags and the responses
they gave us.
We discovered during this research,
that the students at Coastal Middle School
were not allowed any electronics, but did
Revelation: The show your bag
typically carry a thumb drive.
session revealed tendencies We also found that students were lim-
and characteristics of this ited to the type and style of backpack
user group that would remain they could carry, so most of their per-
unseen in a typical question sonalization was found on their IDs for
and answer session. the school. Students would add buttons,
pins and different lanyards to their IDs.
They would also sometimes keep notes,
house keys, tickets and other keepsakes
in their ID holders.
Students liked to scribble and draw on
themselves and on the outside of their
notebooks.

F r e e s c a l e /SCA D
Sec tion 1: Research
| 25

F r e e s ca l e /SCA D
Sec tion 1: Research
26 |

high school session timesheet

3:00 — Introduction
— Briefly explained what we are meeting for

3:05 — Explain your Journal


— What is used to communicate
• Chalk board on kitchen counter to write notes.
(Gets erased by family cat)
• Dry erase board for daily tasks
(homework and chores)
• Relay messages between friends
(Like the game “telephone”)
• “ I hate Facebook ”

3:20 — Post-It
— Post likes/dislikes and interesting
information for features
Likes
• Foreign Language app
• Draws/ doodles while waiting for the
computer to start
• Planner with Alarm Reminder
• User created content input (art/sketches)
• Visual internet bookmarks
• Display incoming messages
• Volume control/mute
• Color customization with original in
(black, white, grey)
• Basic features Easily accessible
• Cargo Pocket size (small and cute)

F r e e s c a l e /SCA D
Sec tion 1: Research
| 27

high school session timesheet

Dislikes
• Slides
• Viruses
• Internet spam
• Startup speed
• Phones (too small)
• Durability (on screens)
• Login (Hard to remember)
• Reading on Screens

3:50 — Form Factor exercise


— What size/shape is favored
• Smaller is better (cute //Cargo pocket size)
• Prefer squared shapes (afraid of edges being
damaged //fits easily in backpack)
• Start small //add hardware components later
• Removable carrying handles
• What keyboard/screen is favored
— Larger keyboard
— Touch screen
— 2 finger typers
— Detachable keyboard with stand free screen
— Screen protector

4:30 — Played with actual Netbooks


• “ How do you turn it on “ : (
• Loved the screensavers // also liked the
Start-up screen
• Loved the HP Button to return to the Home Screen

F r e e s ca l e /SCA D
Sec tion 1: Research
16-18

E
n 19+ | 29

EXA
MP
L
AGE
sectio n 2

research

E
target age groups

12 - 15 16 - 18 19+
synthesis

12 - 15
findings: findings: findings:
• Identify with Parents. • Form own identity • Self Reliant
• Begin to become individuals. • Independent (work, responsibility) • College / Job / Family
• Mostly about fun. • Curious • Survival
• Less focused (short attention span). • School focus (future) • Fashion (interest dependent
• Music (what parents/ • Values Possessions (works for them) on income/lifestyle)
older siblings listen to). • Fashion / Brand Recognition

een
• Transported by parents. opportunities:
EXA
• Carries around more stuff
• Fewer mobile possessions.

opportunities:

• Portability.
opportunities:


Larger form factor
Customizability (color options)




Reference software
Professional (minimal / modern)
Not a clamshell
Travel (lightweight)
MP
L AGE


Modular.
“Cute” / Versatile (small).
• Productivity focus (accessories) •

Video output (option?)
Communication 16-18

E
• Social interaction (study help)
• Identification (Accessories, etc.). - Flash card generator • Data / organization



Options (interface).
Organization (time management).
Creative programs.


- Foreign language help
Reference software (encyclopedia)
Media storage (memory expansion)
19+
• Durable • Style > Durability
• Investment
30 |

target age groups

12 - 15 16 - 18 19+

12 - 15
findings: findings: findings:
• Identify with Parents. • Form own identity • Self Reliant
• Begin to become individuals. • Independent (work, responsibility) • College / Job / Family
• Mostly about fun. • Curious • Survival
• Less focused (short attention span). • School focus (future) • Fashion (interest dependent
• Music (what parents/ • Values Possessions (works for them) on income/lifestyle)
older siblings listen to). • Fashion / Brand Recognition
• Transported by parents. • Carries around more stuff opportunities:
• Fewer mobile possessions.
opportunities: • Reference software
opportunities: • Professional (minimal / modern)
• Larger form factor • Not a clamshell
• Portability. • Customizability (color options) • Travel (lightweight)
• Modular. • Productivity focus (accessories) • Video output (option?)
• “Cute” / Versatile (small). • Social interaction (study help) • Communication
• Identification (Accessories, etc.). - Flash card generator • Data / organization
• Options (interface). - Foreign language help
• Organization (time management). • Reference software (encyclopedia)
• Creative programs. • Media storage (memory expansion)
• Durable • Style > Durability
• Investment

F r e e s c a l e /SCA D
S e c t i o n 2 : R e s e a r c h Sy n t h e s i s
| 31

alternate target niches

Engineer Type Traveler (Business / Leisure)

Soccer Mom Business Executive

Non-Profit Organization In The Field (Contractor)

Government (Survival / Military) Hometown All-Star

Recent College Graduate Economy - minded Individual

“Beta” Mom

F r e e s ca l e /SCA D
S e c t i o n 2 : R e s e a r c h Sy n t h e s i s
32 |

form factor
ideas

clam shell EXA


MP
AGE

LE
Split angel keyboard
12-15
19+
Reg.Keyboard

split keyboard EXAM


PL
E AGE
Split side way
12-15
16-18

dual screen EXAM


PL AGE
All Ages

E
Touch Screen

F r e e s c a l e /SCA D
S e c t i o n 2 : R e s e a r c h Sy n t h e s i s
| 33

swivell EXA
MP
L
AGE

N/A
16-18
Rotate Screen

E
19+

tablet EXA
MP AGE
16-18

LE
Only Screen 19+
Wall Mount

Hand Held

EXA
flip screen MP
L
AGE

E
slide-out screen EXA
MP AGE
L
16-18

E
19+

F r e e s ca l e /SCA D
S e c t i o n 2 : R e s e a r c h Sy n t h e s i s
34 |

F r e e s c a l e /SCA D
Sec tion 6 .1: Interac tion Design / Methodology
| 35

sectio n 3 .1

industrial design
concept
development
36 |

brad fenning — ideation

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
| 37

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
38 |

bryan hemenway — ideation

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
| 39

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
40 |

zarni ko — ideation

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
| 41

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
42 |

colin martin — ideation

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
| 43

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
44 |

trevor mckay — ideation

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
| 45

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
46 |

liz mckibbon — ideation

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
| 47

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
48 |

mason pfau — ideation

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
| 49

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
50 |

cody rexroe — ideation

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
| 51

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
52 |

julian romero— ideation


| 53

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
54 |

win tangsakulsuthaporn — ideation

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
| 55

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
56 |

gunter watkins — ideation

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
| 57

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
58 |

usability
testing

User testing was done with a focus on the


16-18 and 19+ age groups. Each form fac-
tor concept was developed into a 3D test
model. During the usability testing each
participant was asked to interact with the
test model and fill out a protocol on the
parameters of size, position, usability,
and readability of key aspects of the
designs. The protocols were evaluated and
synthesized in order to recognize trends
and opportunities within each form fac-
tor design.

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
| 59

F r e e s ca l e /SCA D
Sec tion 3.1: Industrial Design / Concept Development
| 61

sectio n 3 . 2

industrial design
final concepts
62 |

brad
fenning

Age Range:
• 15-18
• 19 +

Features:
• Compact Size (6.5” x 4.5” x 1.1”)
• 6” x 4” Touchscreen
• Sliding keypad
• 2 Hidden USB 2.0 Ports
• 1 Ethernet Port
• QWERTY Keyboard

Accessories:
• Interchangeable Keypad Grips
• Screen Protector
• Extended Battery

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 63

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
64 |

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 65

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
66 |

bryan
hemenway
Age Range:
• 19 +

Users:
• Soccer Moms

Size:
tioning.
• 9” X 7”

Features:
• Rotating acrylic flip open screen cover / stand.
• Easy access, touch hot keys, with choice of left
or right positioning.
• Color Variation LEDs.
• Top Mounted Camera, with LED indicator light.
• Speakers.
• Easy to spot, Power Button.
• Customizable Leather Insert on back.

Accessories:
• Changeable Cover Protector
• Straps
• Flat keyboard and mouse
• Changeable Grips
• Wall Mount
• Fridge Mount (wall with
magnetic attachment)

Color Options (Body): 6


• Black, Pewter, Mocha, Deep red, White, Silver.

Rear Fabric Options:


• Leather (Black, Brown, Deep Red)
• Knit (Burberry)
• Logo (Luis Vitton, Coach)

Hot Keys: 5
• Camera, Photos, Calender, Internet, Weather

Ports:
• USB (2), Memory Card (SD, CF), Power Cord
Car Cigarette lighter,
Mounting Options:
• Wall Mount, Fridge Mount (wall with
magnetic attachment), Car Cigarette
lighter, Desk / Table top.

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 67

Netbook Kitchen Environment

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
68 |

eatures: Features
1. Speakers
Camera
2. Acrylic Screen
Cover/Stand
3. Selectable
Hot-key
Shortcuts
4. Custom Fabric
Inserts

Speakers
1. 3. Selectable Hot Key Side
Camera

Acrylic Screen 2. 4.
Cover / Stand Custom Fabric Insert

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 69

Color Options
Body

LED

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
70 |

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 71

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
72 |

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 73

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
74 |

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 75

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
76 |

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 77

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
78 |

colin
martin
Age Range:
• Early 20s — Mid 50s
• Anyone who’s job is highly mobile

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 79

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
80 |

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 81

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
82 |

trevor
mckay
Age Range:
• 19 +

Size:
• 10” X 6” X 0.56”

Features:
• 7” x 5” Screen Size (Touchscreen)
• two 0.9” X 5” Ink touch screen
• Multi Color LED lights
• Cover protector
• Web cam
• Speakers
• Side Grip
• Security/Memory USB Card
• Wireless and bluetooth
• Hidden Ports:
• 2 USB Ports
• 1 VGA
• 1 Ethernet Port
• Power port
• Intergraded stand

Accessories:
• Changeable Cover Protector
• Straps
• Flat keyboard and mouse
• Changeable Grips
• Wall Mount
• Fridge Mount (wall with
magnetic attachment)

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 83

LED Light Touch Ink Screen Off Touch Ink Screen On

Slide Cover USB Ports

Integrated Stand

Ethernet

VGA

Power

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
84 |

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 85

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
86 |

julian
romero

Age Range:
• 19 +

Size:
• 10” X 6” X 0.56”

Features:
• Touch Screen Keyboard
• Integrated Mouse
• Multi Color LED lights
• Leather Cover Protector
• Speakers
• Side Grip
• Bluetooth Connection on
• 2 USB Ports
• Integrated Stand

Accessories:
• Customizable Cover Protector
• Customizable Colorways
• Flat Keyboard and Mouse
• Strap Connection on for
Transportability

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 87

Touchscreen Keyboard

Bluetooth Connectivity

Integrated Stand

Flats Screen

Mouse

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
88 |

Strap Connection Leather Cover Protector Magnetic Clip

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 89

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
90 |

liz
mckibbon

Age Range:
• 10-13
• 15-18

Features:
• Asymmetrical, one-handed grip
• 6” x 4” touch screen
• Dual USB ports
• Usable in portrait or landscape view
orientation
• Minimal, lightweight design
• Gently angled at-rest view

Accessories:
• Music Lover Set
• Sports Case
• Gaming Set

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 91
Hardware buttons; quick access to
most often used applications.

LED notification for messages

Built-in webcam

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
92 |

Age Range:
• 10-13
• 15-18

Accessories:
• Two part shell case
• Tinted front case to ease glare
• Caribeaner to clip on a bag, clothing,
or other surface
• Bands on reverse provide an option of
‘hanging‘ like a photo frame

Features:
• Touch through polycarbonate case
provides screen access, even when closed
• Form fitting clamshell design
• Stretchable band keeps two part
hardshell case together.

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 93

Caribeaner

Slightly tinted
case top

Rubber closure

Form fitted base

Straps for hanging and


additional support

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
94 |

Age Range:
• 10-13
• 15-18

Accessories:
• Two part shell case
• Detachable speakers
• Straps for easy transport

Features:
• Touch through polycarbonate case
provides screen access, even when closed
• Form fitting clamshell design
• Detachable speakers provide increased
volume on or off ofthe device
• Easy-to-open, sliding clasp keeps
kit secure

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 95

Form fitting bottom part Sliding Clasp Removable speakers Hinged opening

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
96 |

Age Range:
• 10-13
• 15-18

Accessories:
• Two part shell case
• Gamer mouse/controller
• Stylus and stylus clip

Features:
• Touch through polycarbonate case
provides screen access, even when closed
• Form fitting clamshell design
• Wireless controller mouse can be used
in mouse orientation or controller
orientation
• Stylus is easily accessible for
quick sketching
• Easy-to-open, sliding clasp keeps
kit secure.

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 97

Storage area for memory


cards or headphones

Mouse/controller

Stylus with snap-in groove


built into the case

Flattened ‘joystick‘
navigation pad

Double sided for video game grip

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
98 |

mason
pfau

Age Range:
• 15-18
• 19 +

Features:
• Compact Size (7.3” x 4.5” x 1.2”)
• 6” x 4” Screen Size (Touchscreen)
• Dual-Pivot Screen: Tablet or
Clamshell orientation
• 3 USB Ports
• 1 Ethernet Port
• Full-Function Keyboard

Accessories:
Interchangeable units plug into base
• Battery Life Extender
• Optical Disk Drive
• External Hard Drive

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 99

Connection Plug for accessories

USB and Network ports on back

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
100 |

Left Click

Display Flip for


left/right hand users
(closest to edge)

Right Click (closest to screen)

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 101

Color Options

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
102 |

cody
rexroe

Age Range:
• 13-19

Size:
7.5”x 5x 1”

Features:
• SD micro ID Card
• Slide qwerty key board
• 4 usb drives
• Camera
• Speakers
• Ethernet port

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 103

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
104 |

win
tangsakulsuthaporn

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 105

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
106 |

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 107

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
108 |

gunter
watkins

Age Range:
• 15-18
• 19 +

Features:
• Ergonomic form focused on hand
function & portability.
• A redesigned QWERTY thumbing keyboard
• 6” x 4” (touch screen)
• 5.75” x .5” status (touch screen)
• Compact size: (6.5” x 4.5” x 1.4”)
• Dual USB 2.0 ports with
• Optional connection upgrades

Accessories:
• Interchangeable skins for the units:
grips, keypads, and shell

Hardware Add-ons:
• Port Expansion Upgrade
• Optical Disk Drive

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 109

USB ports on back

Status Alert screen Screen

Webcam

Track Pad

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
110 |

Ergonomic form focused on hand


function & portability

Hard key navigation directly to your:


traffic, weather, e-mail , calendar,
music, Contacts, and internet

Redesigned QWERTY thumbing keyboard

F r e e s c a l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 111

Color and Material options


are limitless. Every
feature is completely
customizable.

F r e e s ca l e /SCA D
Section 3. 2: Industrial Design / Final Concepts
| 113

sectio n 4 .1

interaction design
methodology
CALENDAR: RESOLuTION: ITERATION: LAST uPDATED BY: LAST uPDATED: 7
vIEWINg NEW ENTRIES 800 x 600 1.0 mATTHEW COLE 30.04.2009

COMMENTS

Write comments here.

nbox
erdelete spam new

position reset
calendar
Xero ea commy — nim iureetuerIbh ercipsuscip el estie Atie facilit laor sum nim nis nim iure velit …

Uptationummy
manage friends customize — niamcon sequis dolestrud tat autate aiIm adigna consendiam in esse magna acid…

april Emily
2009Walls — Don’t forget that art class will run late tomorrow! 1You’re welcome to ride home with my…
sunday monday
tuesday,
tuesday
april 7, 2009wednesday thursday friday saturday
settings Met num — dolobortis
word spreadsheetnos nonsequis acin vulpute modo Sit vel dolorem zzriliquam at, vel do eugueri…
presentation
processor add edit delete

Met num — dolobortis nos nonsequis acinJoseph


vulpute modo Sit vel dolorem
1 zzriliquam at,
2 vel do eugueri… 3 4

2 Subject: Late Art • Time: 2:30 - 4:00 pm


Met num — dolobortis nos nonsequis acin
joseph: late artvulpute modo Sit vel dolorem
Mom, art class is going to run late this zzriliquam
mom: late meetingat, vel do eugueri…
afternoon,
joseph: rank test julien: game
so I’ll just catch a ride with Emily and her dad.
5 6 7 going to drop drop me
8 off at karate, 9 3 10 11
to-do clock camera web music They’re
Met num — dolobortis nos nonsequis acin vulpute modo Sit vel dolorem zzriliquam at, vel do eugueri…
so could you bring my gi when you meet me
there. That way I don’t
sarah: recitalhave to haul it to school. dad: work trip dad: work trip
Met num — dolobortis nos nonsequis acin vulpute modo Sit vel dolorem zzriliquam at, vel do eugueri…
12 13 14
Joseph
15
web browser
16 17 18

Xero ea commy — nim iureetuerIbh ercipsuscip el estie Atie facilit laor sum nim nis nim iure velit …
adam: comic swap
dad: work trip Subject: Rank Test • Time: 5:00 - 6:00 pm
message video chat browser share Oh, I thought I would remind you that tonight’s karate class will be
Met num 19— dolobortis nos20
nonsequis acinmyvulpute
21 modo Sit vel dolorem
22 zzriliquam 23
GREEN BELT RANK TEST!!! Just a reminder. ;)
at, vel do eugueri…24 25

26 27 28 29 30 ny times bbc

youtube hulu
114 |

Synthesis: Research from


the middle school sessions
resulted in a wealth of data
on how, why and with what contextual
inquiry
these users are interacting
with technology.

Contextual inquiry is a user-centered


research process that entails meeting
the user in the environment where the use
of a product would be performed. Beyond
a simple interview, contextual inquiry
requires focused observations and note
taking of interview subjects as they are
performing tasks or answering questions.
These notes are then mined and analyzed
for pertinent data and information that is
then synthesized into contextual design
models. These models serve as visualiza-
tions of patterns found in the contextual
inquiry that reveal how users engage with
a product and, in the case of the net-
book, how they would potentially use it.
Beyond this, the design models serve as
a set of guideposts for the development
of the next steps in interaction design:
personas and scenarios. But in the end,
contextual inquiry can be seen as a sure-
fire methodology in maintaining and focus-
ing on the design axiom: the user is not
like me.

F r e e s c a l e /SCA D
Sec tion 4 .1: Interac tion Design / Methodology
| 115

Cultural Model: For this age group, they are usually


interested in entertainment, activities and information.
They are mostly affected by their friends and outside
information to get the information. However, because of
the restrictions of digital device use at school, they
usually can go online by phone or home computer out of
school time. This eliminates the opportunity to use the
portable digital devices in classroom environments.

F r e e s ca l e /SCA D
S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
116 |

6:00 AM Student A got up and dressed up. Then, she


checked the text massages on her phone when
she was taking breakfast. Findings:

7:00 AM She was waiting for school bus’s coming, and


she arrived in school at 7:20. She talked with
her classmates about TV show she had watched
last night before class.

The group users are only allowed


to use cell phone before and
8:00 AM She went to gym to play volleyball at the after school time.
first class.

9:00 AM She took Social Studies class. But, she felt


so boring that she passed noted and whispered
with her classmates.

10:00 AM She took English Language of Art class.

Passing notes is a typical way


of communicating with each other
during class time.
11:00 AM She went to lunch with her classmates. They
were talking and relaxing during lunch time,
which was her most exciting moment in all
school time.

12:00 PM She started to take Math class.

1:00 PM It was Science class time. She felt boring in They have less opportunities to
this class, so she started to draw a logo for socializewith friends because
student club limit break time.

F r e e s c a l e /SCA D
Sec tion 4 .1: Interac tion Design / Methodology
| 117

2:00 PM School time was over. She was excited to take


the school bus to go home.
Findings:

3:00 PM She stayed in her bedroom and listened to music.

4:00 PM She stayed in her bedroom and felt a little bored.


They have less opportunities to
socialize with friends because
of limited break times.

5:00 PM She turned on the computer and surfed the


internet, played games and chatted with
friends online.

6:00 PM She checked messages on the phone and called


her friends back.

7:00 PM She had dinner with her family. Use of media (music) and a desire
for entertainment are a big part
of te students’ after-school
experience.

8:00 PM She started her homework.

9:00 PM After she finished her homework, she was


allowed to watch TV for a while.

10:00 PM She was ready to go to sleep. Before that,


she checked her voicemail again. A small amount of entertainment
(TV) is indulged in before bedtime.

F r e e s ca l e /SCA D
S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
118 |

Artifact Model ­
— Home: The
research revealed a broad
snapshot of what technology-
based devices this user group
interacts with at home.

Desktop PlayStation TV

Wii DVD Players Flash Drive Digital Camera

PlayStation Portable Portable Phone Electric Guitar Stereo

MP3 Players Nintendo DS Cell Phones Laptop

F r e e s c a l e /SCA D
Sec tion 4 .1: Interac tion Design / Methodology
| 119

bedroom home
public space
cellphone computer
cellphone
mp3 player tv watches mp3 player
stereo wii before bed
digital camera
nds talks
digital camera plays & texts
electric guitar games
talks
laptop & texts
listens
jumpdrive to music listens
to music

pratices
homework takes pictures
of friends
& internet user a
school
announcements
loads homework
for school school

texts classwork
friends classroom
takes tv
lessons
computer
video camera
car
electric guitar
listens
cellphone to music turns in jumpdrive
mp3 player homework

Flow Model: This model illustrates the what and where of device use for this particular user group.
Restrictions imposed by schools dramatically reduce which devices the user can bring into the classroom.
All devices the user brings outside his/her home “live” in the user’s room, which precludes a familiarity
and sense of closeness to these devices. A device that enables the most “room activities” to find their
way into other physical spaces the user frequents would be welcomed.

F r e e s ca l e /SCA D
S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
120 |

Artifact Model ­
— Interests:
Compiling interests for this user
group begins to reveal subtitles
of the individuals’ loyalties and
unspoken influences.

Twilight Red Bull Hollister Co.

Discovery Channel
Facebook
Nike
Soulja Boy

Myspace CSI
Miis Starbucks

Adult Swim YouTube Abercrombie & Fitch Anime

F r e e s c a l e /SCA D
Sec tion 4 .1: Interac tion Design / Methodology
| 121

Red Bull sports Michael Phelps / The Colts (football) / soccer


Starbucks books Twilight / Steven King / Sci Fi / Fantasy / Nancy Drew
Hollister
internet youtube / myspace / facebook / flickr
Abercrombie
Aeropostale games Wii (Tennis, Boxing, Mario Kart) / NDS
Rocca Wear
tv Secret Life of an American Teenager / House / CSI / American Idol / anime
Adidas
Pac Sun movies Twilight / anime
Rue 21 music Peramore / Soulja Boy / Evanescence / 80s Metal / Led Zeppelin

brands entertainment

user a

activities communication

piano pratice texting


guitar practice phone
dance class facebook
teacher’s assistant myspace
volleyball skype
baseball IM
passing notes

Interest Model: This model illustrates and organizes the things this user group finds important in their
lives. Brand awareness is only nominally present for electronics/technology. Some interests are influenced
by pop culture, while others are influenced by parents’ tastes and interests. There is some overlap
between communication and entertainment for this age group. Texting and communication through webcams
(skype) are heavily used by this age group. And, as to be expected, entertainment weighs heaviest in
interests for this age group.

F r e e s ca l e /SCA D
S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
122 |

Ever-present: Personas are


printed out and hung in the
studio as a constant reminder
of for whom we’re designing.

personas
Information gleaned from the contextual
inquiry process is then used to gener-
ate a persona. A persona is more than
a “target audience” breakdown or a set
of demographic characteristics, it is
a hypothetical person that represents a
real user and their interests, lifestyle,
habits, hobbies, etc.
These personas are then used as litmus
tests against which both design groups
scrutinize their designs. If a design
can’t feasibly exist in a personas world,
then the design is most likely off-base.
As our contextual research focused
on the junior high age group (a group
less fleshed out in the initial Freescale
research), our resulting personas are
reflections of these users and other poten-
tial individuals that are within their
social realm who would use this product.

F r e e s c a l e /SCA D
Sec tion 4 .1: Interac tion Design / Methodology
| 123

lifestyle
/// Idyllic Family Life /// Jokster
/// Comic Lover /// Draws Often
/// Active and Confident
p r i m a ry p e r s o n a
relationship
/// Two-Parent Household

joseph wright /// Two Siblings /// Many Friends


/// Family Out-Of-Town

12 years old /// 7th grade student entertainment


Household with both parents /// Loves X-Men /// Plays Wii & Make
One Brother and one younger sister Miis /// Watches Discovery Channel and
Surviorman /// Myspace for Socializing
/// World of Warcraft Online
“No doubt about it, if I could be
a superhero I’d be Wolverine!” technology uses
/// Education (Word Processor)
/// Communication (Cellphone, Texts,
Joseph lives in a coastal city in the eastern part of the U.S. His father, Robert, Myspace, Facebook) /// Entertainment
works at a local hospital and usually works late. He has an older brother, Julian, (Cellphone MP3 Player)
that is 15 years old and a younger sister, Sarah, this is nine. Joseph’s mother,
Susan, works to ensure that everything in her house runs like a well-oiled machine. communication goals
She makes sure her family has home cooked meals, that the kids get to their different /// Family (Cellphone) /// Friends
activities on time, and that the house is always in order. Their family lives in a (Cellphone, Texts, Myspace, Facebook,
suburban neighbor that is full of other families. Joseph has a daily routine during Gaming)
the week that includes a home cooked breakfast, bus rides and school. After his home-
work in the evenings he likes to watch TV, read his comics, work on his drawings, get
online, or play Wii. He usually spends a good amount of his time online either custom-
izing his avatar, talking with friends or cousins who lives out of town, playing games
like World of Warcraft, or watching videos on YouTube. While doing these activities
he is usually listening to music and texting with friends. Joseph is a good student,
but occasionally gets in trouble because he draws in class when he should be paying
attention. He is incredibly outgoing and is always joking with friends. His mom makes
him takes Taekwondo to stay active, Joseph doesn’t complain too much about the lessons
because he feels it will improve his superhero “combat skills”.

F r e e s ca l e /SCA D
S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
124 |

lifestyle
/// Working Mother /// Family-
Centered/// Plays Tennis, Jogs
and Swims/// Exercises Often s ec o n da ry p e r s o n a
On-the-go Lifestyle

relationship
/// Mother of Three /// Wife of 14 Years susan wright
/// Parents Live Far Away
39 years old /// Accountant
/// Social Activities With Friends
Married for 14 years /// 3 Children
Graduated from Business school
entertainment
Income - $124,000 a year
/// Family Time

technology uses
/// Work (DELL Laptop) /// Communication Creating comfortable home
(Cellphone, Homephone, Email, Facebook) life for her family...
/// Family (Television, Stereo, Digital
Camera)

communication goals Susan Wright is a 39 year old woman who works for a small financial consulting com-
/// Family (Cellphone, Homephone, Email) pany. Since graduating from the business school in 1999, she has been doing accounting
/// Friends (Cellphone, Facebook) work in this company. However, she also thinks that family life is a more significant
part in her entire life. She has married for 14 years, and had three kids. Her big-
gest interest is to cook delicious food for her families and to enjoy family time.
The children’s education is a big priority for Susan and she appreciates each child’s
individual personality. Moreover, Susan does not really indulged in new technology
and electronics, but she has a couple of digital devices for her work and entertain-
ment, such as a DELL laptop for easily working in different places, a Nikon D40 for
traveling, and Sony Home stereo for creating happy family time, etc.. Furthermore,
Susan tends to introduce new digital technology or devices to her kids, because she
believes that learning the knowledge of new technology is helpful to expand their
vision, improve their studying skills and stimulate their creative thinking. Also, she
encouages her kids to communicate with their friends online, but she is concerned that
surfing internent too much will take up their study time. She strongly believes that
the main duty for children at that age is to concentrate on studying. Another thing
is that children at that age haven’t had the ability to tell what is good or what is
bad when they are surfing Internet.

F r e e s c a l e /SCA D
Sec tion 4 .1: Interac tion Design / Methodology
| 125

lifestyle
/// Music Lover /// Influenced
by Father’s Tastes/// Naturally
Accomplished Student /// Quiet Observer
/// Fringes The Group
s ec o n da ry p e r s o n a
relationship
/// Single-Father Household

emily walls ///


///
Mother Lives Several States Away
One Older Brother
/// Tight-Knit, Small Circle of Friends
13 years old /// 7th Grade Student
Single-Father Household /// One Older Brother
entertainment
/// Reading SciFi & Horror Paperbacks
/// Listens to Music on iPod
13-year-old, soft-spoken dreamer /// Bands on youtube and Myspace
and aspiring guitarist /// Buffy and Angel on The WB

technology uses
/// Education (Word Processor)
Emily wakes up around 6:15 am every morning and checks her cellphone for any texts she
/// Communication (Cellphone, Texts,
may have missed from her friends while she was asleep. After breakfast, her Emily’s
Myspace, Facebook, Skype)
dad drives her to school while Emily listens to Led Zeppelin on her iPod. Before
/// Entertainment (iPod, youtube,
homeroom starts, Emily spends a little time talking to her best friend Meredith, then
Myspace, Facebook, TV)
reads her Twilight Saga paperback until time for roll call. In second period, she
uses her flashdrive to turn in a short essay she wrote for English class. When Emily communication goals
is picked up by her father after class, she texts her friend Stacy (on the cellphone /// Family (Cellphone, Myspace, Skype)
she left in her dad’s car), who lives down the street from her, to see if she wants /// Friends (Cellphone, Texts, Myspace,
to hang out when she gets home from school. When Stacy comes over to Emily’s house, Facebook)
they spend the afternoon browsing through Youtube videos and checking out bands on
Myspace. After Stacy leaves, Emily replies to her mother’s Myspace message and has a
brief conversation on Facebook chat with Meredith. After dinner, Emily does her home-
work on the desktop PC in the living room and saves her work on her flashdrive. After
homework, Emily watches a re-run of Angel on the WB then gets ready for bed. Before
falling asleep, Emily texts back and forth with Meredith about possibly having her
stay over on Friday night.

F r e e s ca l e /SCA D
S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
126 |

Reading between the lines: After


a scenario is written, it is
poured over to determine what a
product needs to do to meet the
goals of its intended users.

scenario
After developing personas, our next step
was develop a scenario. On the surface, a
scenario is simply a story. However, it’s
function in interaction design is to begin
the visualization process of how a product
would be utilized by an intended user.
We developed a scenario using our per-
sonas in an effort to begin to recognize
what our design would need to include
to meet these users’ goals. After the
scenario was written and refined, we then
deconstructed the story, developing an
extensive chart of task flows. The task
flows mined from the scenario are then used
as primary guideposts for the ideation
process of our designs.

F r e e s c a l e /SCA D
Sec tion 4 .1: Interac tion Design / Methodology
| 127

without netbook with netbook


Joseph wakes up Monday morning and starts his morning routine. Joseph wakes up Monday morning, and before he even gets out of
Like most mornings he wants to check his MySpace and email bed is able to check his MySpace and email accounts with his
account, however his Mom is on the family computer checking her new netbook [opportunity for accessories]. As he is checking
email and work schedule so Joseph will not be able to use the his MySpace account he gets a reminder about his late art class
computer before school. After breakfast Joseph catches the bus from Emily. He sends a notice to his mother’s calendar through
to school. Joseph is frantic when he arrives at school because their “family” widget so that she will know that he will be at
he did not have time to finish the science homework that he is school late, and will be catching a ride to karate class with
suppose to discuss in class. After a discouraging morning, Emily. He also asks her to bring his karate gi so he doesn’t
Joseph heads to lunch with his class. As he eats he wishes he have to lug it around school all day. After getting ready for
had something to sketch on, because he has a few new ideas for school, Joseph runs downstairs, grabs a few pieces of bacon,
the comic book characters he is working on. The rest of the day says bye to his mom, kisses her on the check, and heads for the
is pretty boring. The classes continue like they always do; the bus. Susan, Joseph’s mother, smiles as he runs out the door.
teacher lectures, and the students listen. After school Joseph She is in the kitchen on her netbook organizing the meals and
stays for a late art class and catches a ride home with his grocery list for the week, and is thinking about all the time
friend Emily at 4:30. When he gets home, Joseph’s mother is she is saving with this new “grocery” widget. The time it saves
angry with him, because he didn’t let her know about the late art will allow her to do a little extra for the family game night
class. She expected him at 3:30 and has been incredibly worried. on Thursday. Just then, she notices the addition Joseph made to
After a little argument, they have to rush out the door to get her calendar, and she giggles when she sees that he has attached
to his karate class. On the way to the class Joseph remembers one of his newest cartoons to personalize the message. She loves
that today is his karate rank test. His mother gets upset again, it when he does that.
because she is unprepared to record the event. Joseph is also While on the bus Joseph and his friends start to talk about
a little disappointed because he wanted to show off his profes- their karate class. In the discussion about ranks, Joseph is
sional “combat skills” to his friends. reminded that his rank test for his green belt is that night.
After the frenzied day, Joseph’s mother, Susan, has to heat He opens his netbook and sends another notice to his mom’s cal-
up leftovers for supper because she didn’t have a meal planned. endar. He knows his mother remembered the event, but loves any
The family, except for Robert, the father, eats together. After chance to bring attention to the fact that he’s almost a GREEN
supper Joseph runs into the living room to watch Survivor Man, belt. Since his mom doesn’t have to be at work for another hour,
but his sister Sarah beat him to the remote and started watch- Joseph figures she is probably still online catching up on work
ing American Idol. He decides to try to get on the computer to emails and finalizing her to-do list. While on the netbook, Joseph
play World of Warcraft, but his mom is on it catching up with receives a notice from his mom reminding him to finish his science
friends and work. At this point, he decides to just finish his homework. “Ooooh yeah,” Joseph says, and rushes to finishes his
math homework and go to bed. On the way to school the next day, homework for science class before they get to school.
Joseph realizes that he forgot to finish his book report for Excited by the presentation he just finished for science
English when one of the students mentions it on the bus. class, Joseph runs into school, flashes his ID [opportunity for

F r e e s ca l e /SCA D
S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
128 |

accessories and/or a connection to netbook], and switches his keep the dinner warm. He also sends a message to both Susan and
netbook into “school/airplane mode” [what terminology are we Joseph saying that he had received the footage from the rank
going to use here]. When it’s Joseph’s time to present in class, test and that he is so proud of Joseph’s progress. Joseph, who
he hooks his netbook to the projector and blows the class away is sitting at the kitchen table with his netbook, working on
with his cool science presentation. his homework, looks over to his mother with a big smile on his
Delighted by how well his presentation was received, Joseph face. “I’m glad Dad has finally figured out how to use that old
triumphantly heads into the lunchroom with his class. While in computer of his,” Joseph jokes. Sarah, Joseph’s sister, hears
the lunchroom, Joseph sketches in his netbook. He is working all the commotion and runs to the kitchen to see the footage
on a new personalized exterior for it. While he is sketching they are discussing. She links her netbook to Joseph’s and wat-
he decides to shows off his newest comic book characters to his ces the video. While linked together she shows Joseph a problem
friends at the table. His buddy Adam walks by, sees the new she has with her homework and asks for his help. The two work
characters, and tells Joseph he just drew the perfect armor together to address the problem [opportunity for accessories].
that work look awesome on the ninja character. Adam grabs his
When the fajitas are ready, Susan asks Joseph to message his
netbook locks it into Joseph’s and they work together to test
brother Julian to tell him supper is ready. Julian is riding
out and edit the new gear.
bikes with friends in the neighborhood, and Joseph can see from
Later that day in social studies he is able to use his netbook
their “family” widget that Julian is just around the block.
to do group work. All the students think the group work makes
Joseph is the only person Julian allows to “see” his whereabouts.
the class so much more fun [opportunity for accessories].
In a few moments Julian arrives, and the family has a happy din-
After staying late for art class, Joseph rides to karate class
ner together, talking about the day’s events. Susan makes sure to
with Emily and her dad. While on the way to karate Joseph uses
leave her netbook open so that Robert can be video conferenced
his netbook to share a new band with Emily and her dad, because
in and not miss anything. During supper Susan reminds everyone
he knows they are both into music [opportunity for accessories].
about family game night on Thursday. Everyone is very excited,
Emily loved the music so Joseph emailed her the link to their
especially now that Joseph has his new netbook. Having one more
page on MySpace.
Joseph gets to karate class just in time to change into his netbook linked in with the rest will make the gaming experience
karate gi and set up his netbook to record his rank test [oppor- even better [opportunity for accessories]!
tunity for accessories]. The footage will be uploaded so that Pumped up about game night, Joseph heads to his room to play
his friends can check it out. Joseph is so excited to show off games on his netbook after supper. While he is playing, one of
his “skills”. his friends pops up in Skype to remind him about a book report
When they get home, Susan starts supper. She has her netbook that is due the next day. Joseph video conferences with him
set up by the stove displaying a recipe she found for fajitas about the project and also asks him a few questions about a
[opportunity for accessories]. Joseph’s loves fajitas! Susan girl he likes. Before finishing the book report, Joseph checks
found the recipe after she realized how excited Joseph was about his MySpace account to see if anyone has posted any comments
the green belt. She wanted to cook something special to celebrate about his karate footage. After briefly talking with a few of his
Joseph’s progress. While looking at the recipes she gets a notice friends, Joseph finishes his paper, watches an episode of Adult
from her husband, Robert. He says that he will be late, but to Swim online and heads to bed.

F r e e s c a l e /SCA D
Sec tion 4 .1: Interac tion Design / Methodology
| 129

Video Scenario Screenshots: We created this video


scenario to further expand on the “day in the
life” of our primary and secondary personas. The
scenario was used to help us as we designed,
providing moments that showcased opportunity while
also encouraging us to push some of the ideas we
had been discussing.

F r e e s ca l e /SCA D
S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
130 |

F r e e s c a l e /SCA D
Sec tion 4 .1: Interac tion Design / Methodology
| 131

Deconstruction: Breaking the scenario down into


actions performed then creating task flows from
these events begins to form preliminary ideations
of what this design is going to do and to present
rough concepts of how it should do it.

F r e e s ca l e /SCA D
S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
132 |

initial ideations
After the synthesis of research and the
breakdown of our constructed personas and
scenario, we began the ideation process
for the user interface.
The first round of sketches, wireframes
and GUIs focused on fleshing out a par-
ticular moment or instance found in the
scenario in an attempt to tell as much
about the interface and its structure in
a single screen shot.
These directions were explored indi-
vidually and served as launching pads for
Starting on paper: Using the
deconstruction of the scenario
the more involved designs we constructed
as guideposts for behavior and as two separate groups. The different
features, we began sketching approaches each student took helped to
concepts for the user interface. informed more well-rounded interfaces in
the subsequent designs.

F r e e s c a l e /SCA D
Sec tion 4 .1: Interac tion Design / Methodology
| 133

Quianru Zhang: This concept attempts to create a new visual effect and using
experience for operating system by using 3D box as main characters. The four
boxes appearing on the home screen separately represent four categories of
functionality, like communication, entertainment, working space and messenger
centers. Users can go to different boxes to choose the application or staff they
want through using multi-controlling 3D mouse. Also, combination of 3D and 2D
is another feature of this concept. There is “ stage bar” to show what staff
in the box that you are working on. As this frozen moment showing, user Susan
was checking the messages from her son Joseph in family widget.

F r e e s ca l e /SCA D
S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
134 |

IACT 720 | Wireframe v.2 | April 27, 2009 | Alex Wang | P. 1

MAY

Alex Wang: This UI design focused on the playful


IACT 720 | Wireframe v.2 | April 27, 2009 | Alex Wang | P. 2
interface and social network. In the design,
balloons represent the different applications and MAY
people icons represent the user and the user’s
friends. By connecting balloon with balloon or
balloon with people icon, the user can have 9
the interesting using experience in different 9
- Science Homework
combination of applications and social networking.
- Test

- Late Art Class


(need to notice mom)

F r e e s c a l e /SCA D
IACT 720 | Wireframe v.2 | April 27, 2009 | Alex Wang | P. 4
Sec tion 4 .1: Interac tion Design / Methodology
| 135

Wei Hsin Lai This UI design focuses on the play


form and well-organized function which the
flitting cube menu and corner docks represent.
The cube menu in the center can provide different
functions on its different sides, including the
communication, settings, entertainment, education,
and family connection. By opening the corner dock,
you can organize the stuff.

F r e e s ca l e /SCA D
S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
136 |

Search Daniel
Searc

Daniel
?
Julian
Josh

Keyla
eyyylaa Family
Megan
Scie
Scienc
nce
Sciencee Cl
Club
ub
Guitar
G uitar p
pals
als
Kara
Karate
K arate
te
Daniel
BF Neighbors
School

11:12

Charlie Gongora: The concept is based on an infinite Six different kinds of categories will be found around
XY field in where everything is placed. The limits the central working area: 1. Netbook- It controls the
of the screen serve as a window to move through the preferences of the user and is where the settings of
infinite space and to zoom in and out. the netbook can be found. 2. Warehouse- It is where
Other criteria for this concept includes proxim- the files are stored. 3. People- This contains and
ity to the center as a reflection of the importance. manages the social networks. 4. Entertainment- It
The user will bring or push away elements as he/she contains software directly related to gaming, music,
needs them, and define the center as the active working etc. 5. Productivity- This contains software that is
area. The temporary elements will be placed around a not for entertainment, i.e. Powerpoint, Word, and
window that defines the working area. Photoshop. 6. Applications- This holds all software,
plus widgets.

F r e e s c a l e /SCA D
Sec tion 4 .1: Interac tion Design / Methodology
| 137

PROJECT: NETBOOK USER INTERFACE HOmE SCREEN RESOLuTION: ITERATION: LAST uPDATED BY: LAST uPDATED: 2
CLIENT: FREESCALE 800 x 600 1.0 mATTHEW COLE 30.04.2009

COMMENTS

Write comments here.


2
1 1

3 3 5
box center inbox
clean-up boxes position reset select all delete spam new

Xero ea commy — nim iureetuerIbh ercipsuscip el estie…

Uptationummy — niamcon sequis dolestrud tat autate ai…

files settings word spreadsheet presentation Emily Walls — Don’t forget that art class will run late tom…
processor

Met num — dolobortis nos nonsequis acin vulpute modo…

2 6 2
4

calendar to-do clock camera web music

3 5
web browser
inbox message video chat web share
browser

ny times bbc

family youtube hulu

6
4 4

1 1
2

Matt Cole: This iteration on the user interface


PROJECT: NETBOOK USER INTERFACE CALENDAR: RESOLuTION: ITERATION: LAST uPDATED BY: LAST uPDATED: 7
CLIENT: FREESCALE vIEWINg NEW ENTRIES 800 x 600 1.0 mATTHEW COLE 30.04.2009
ANNOTATIONS:

1 Moving the pointer to any corner or touching the corner when touch screen
operating will reveal a link for calling up the Box Center.
5 Corner icons can be dragged to the space represented by number 6 to serve as a
customizable quick links section on each box.
focused more on the accessibility of widgets and
COMMENTS

Write comments here.


2 Moving the pointer to any side will highlight that serves as an affordance to
the multi-screen feature of this interface. Clicking on the side moves to a new
6 This space at the bottom of each serves as a customizable quick links section.
Icons from the top right of each box can be dragged and dropped here, letting the idea of a search center being the primary way
screen. Pressing and flicking in any surrounding space with one’s finger will the user determine which boxes they think they will use the most and in what

of locating what a user is looking for. This UI


accomplish the same task. order. Dragging the icon from this space removes it.

3 inbox
Click and hold dragging or press and hold finger gestures will allow the boxes
to be repositioned as desired within the interface. Clicking or touching this
box center
space also “activates”
select box, which
all delete spamis indicated

bright. “deactivated” boxes grow shaded.


new box the box color becoming
lacked the concept of social networks and didn’t
clean-up boxes position reset
calendar
Xero ea commy — nim iureetuerIbh ercipsuscip el estie Atie facilit laor sum nim nis nim iure velit …

present a true interface that could be moved


4 Any box can be resized by dragging the bottom left corner.
Uptationummy
manage friends customize — niamcon sequis dolestrud tat autate aiIm adigna consendiam in esse magna acid…

april Emily
sunday
2009Walls — Don’t forget that art class will run late tomorrow! 1You’re welcome to ride home with my…
Met
monday
tuesday,
num — dolobortis
tuesday
nos nonsequis
april 7, 2009wednesday thursday friday
acin vulpute modo Sit vel dolorem zzriliquam at, vel do eugueri…
saturday through.
files settings word spreadsheet presentation
processor add edit delete

Met num — dolobortis nos nonsequis acinJoseph


vulpute modo Sit vel dolorem
1 zzriliquam at,
2 vel do eugueri… 3 4

2 Subject: Late Art • Time: 2:30 - 4:00 pm


Met num — dolobortis nos nonsequis acin
joseph: late artvulpute modo Sit vel dolorem
Mom, art class is going to run late this zzriliquam
mom: late meetingat, vel do eugueri…
afternoon,
joseph: rank test julien: game
so I’ll just catch a ride with Emily and her dad.
5 6 7 going to drop drop me
8 off at karate, 9 3 10 11
calendar to-do clock camera web music They’re
Met num — dolobortis nos nonsequis acin vulpute modo Sit vel dolorem zzriliquam at, vel do eugueri…
so could you bring my gi when you meet me
there. That way I don’t
sarah: recitalhave to haul it to school. dad: work trip dad: work trip
Met num — dolobortis nos nonsequis acin vulpute modo Sit vel dolorem zzriliquam at, vel do eugueri…
12 13 14
Joseph
15
web browser
16 17 18

Xero ea commy — nim iureetuerIbh ercipsuscip el estie Atie facilit laor sum nim nis nim iure velit …
adam: comic swap
dad: work trip Subject: Rank Test • Time: 5:00 - 6:00 pm
inbox message video chat browser share Oh, I thought I would remind you that tonight’s karate class will be
Met num 19— dolobortis nos20
nonsequis acinmyvulpute
21 modo Sit vel dolorem
22 zzriliquam 23
GREEN BELT RANK TEST!!! Just a reminder. ;)
at, vel do eugueri…24 25

26 27 28 29 30 ny times bbc

family youtube hulu

ANNOTATIONS:

1 Clicking on a day will open a “day detail window.” If events have been added,
the full message will be displayed here.

Icons for the users who posted events will be visible. These images are the user

F r e e s ca l e /SCA D
2
images for the users’ netbooks as well, chosen in the settings box or at the
initial setup.

3 Attached images will appear next to the event entries here.


S e c t i o n 4 . 1 : I n te r a c t i o n D e s i g n / M e t h o d o l o g y
| 139

sectio n 4 . 2

interaction design
touch-screen
user interface
140 |

how can we use “parti” to facilitate our concept

design criteria
TECH OPPORTUNITY TARGET GROUP’s ACTIVITIES
Customize anything they want
Parti & the design sandwich is a struc-
Touch screen
ture for projects that allows designers
E Ink screen Communication with friends by online social network
to go form concepts to products using the
Fingerprint Indugled in popular culture
tools of design. As the core interaction
3G Tech Influenced by parents
model, it is built in the design consid-
Bluetooth play video games eration outside of design, like technol-
ogy opportunities, marketing factors,
resources, etc.. Based on this point, the
second layer of Parti includes the best
practices and usier test, which can help
inform design decision. After that, the
HUMAN FACTOR SENARIO next layer of Parti is design principles
Screen size Communication with family that will evaluate the decisions so that
Keyboard size Group work all the decisions can support the cen-
Icon size of OS Make grocery list tral idea. The last layer is the central
PARTI Doodle
concept that will lead to the holistic
design.
As for the methodology of Parti, our
Parti is based on considerations includ-
ing the technology opportunities that
can be applied in Netbooks, the charac-
teristics of target groups’ desires, and
market trends foreseeing the potential
opportunities in the field, etc.. And then,
MORE FUTURE POSSIBILITIES? through the filter of design decisions, we
MARKETING TREND got our design principle for our operating
More balanced in smartphone and laptop system, easy accessibility, customization
Google’s Cloud services and playful, which leads to our central
Connect to different accessaries concept of “Global” operating system.

F r e e s c a l e /SCA D
S e c t i o n 4 . 2 : I n t e r a c t i o n D e s i g n / To u c h U s e r I n te r f a c e
| 141

Global
Parti
The central design idea:
creat a new using experience

Easy Accessibility Design Principle


Easy to find staff, easy to open a Application, easy to communication with others Key characteristics to evaluate
the decisions
Customization
Random to customize the interface color of OS and icon design; Customize the
organization of files and apps

Playful
Create a new using experience by playing globles to organize the staff and apps

Pattern & Best Practices


Prototyping Test

Human Factor Technology Activities Scenario Design Considerations


Opportunities & Limitations

screen size touch screen easy to find communication


6’’ * 4” apps & staff entertainment

F r e e s ca l e /SCA D
S e c t i o n 4 . 2 : I n te r a c t i o n D e s i g n / To u c h U s e r I n te r f a c e
142 |

ui design
process

The concept of the touch-only screen


interface team focused on the interac-
tion of the application and the touch
using experience. The concept has been
refined in two different stages. The first
stage was a mix of the ideas of Matt’s,
Qianru’s, and Alex’s sketches and wire-
frames, which was the widget concept, 3D
environment, social networking, and being
playful. The second one was the develop-
ment of the initial concept. A prototype
of the concept was then further developed
and tested by users.
The UI design concept provides the easy
Our process started on paper and accessibility in dealing with applica-
led through several different tions and stuff. It not only allows the
iterations through wireframing
customization of the interface appear-
and fully comped gui instances.
ance, but it also creates the playful
using experience.

F r e e s c a l e /SCA D
S e c t i o n 4 . 2 : I n t e r a c t i o n D e s i g n / To u c h U s e r I n te r f a c e
| 143

Our first iteration lacked cohesion and didn’t


give a proper understanding of the OS.

F r e e s ca l e /SCA D
S e c t i o n 4 . 2 : I n te r a c t i o n D e s i g n / To u c h U s e r I n te r f a c e
144 |

Our second round of wireframes and GUI


instances became more realized.

F r e e s c a l e /SCA D
S e c t i o n 4 . 2 : I n t e r a c t i o n D e s i g n / To u c h U s e r I n te r f a c e
| 145

After a few more tweaks, particularly


with the foldering structure of the
folder globes, we were ready to make a
working prototype for user testing.

F r e e s ca l e /SCA D
S e c t i o n 4 . 2 : I n te r a c t i o n D e s i g n / To u c h U s e r I n te r f a c e
146 |

Prototype Testing: Middle


school students interact with
a prototype comp of an earlier
iteration of the touch-screen UI.

touch screen
user testing
Time: May 20, 2009
Place: Coastal Middle School
Device: Fujitus Portable Lifebook
Testees: 7 grade students in
Coastal Middle School
Average Age: 13
Number of Students: 8

After refing the original version of Global


operating system based on touch screen,
the prototyping test was developed. The
purpose of this user test is to evaluate
the accessible usability and GUI visual
design of Global operating system. During
the process of test, each student was
assign to complete four tasks, finding
a video file, opening Word application,
finding a photo, and opening spreadsheet
application. Basically, all the tasked
assigned were very simple, which intended
User Testing
to test whether users can quickly figure
out the functionality of the system with-
out any explanation.
Time: May 20, 2009

Place: Coastal Middle School


F r e e s c a l e /SCA D
S e c t i o n 4 . 2 : I n t e r a c t i o n D e s i g n / To u c h U s e r I n te r f a c e
Device: Fujitus Portable lifebook

Testees: 7 grade students


| 147

Summary of User Test Questionnaire:


1. 1 Most students thought the test of Global
operating system was very cool.

2. Most students thought this operating system was


more convenient to find a file than conventional
operating system. However, only one student
suggested that it should add a function of folder
directory.

3. Five students thought that this operating


system provided more convenience to open a
application. However, 3 students thought it was
slightly complex but after they got used to it, it
would be pretty easy.

4. One student suggested us change GUI design more


bright colorful.

5 Icon size was basically appropriate for them.

Overall, all the students were so excited to


Global operating system, which proved that the
Global concept of operating system was successful.
However, some parted should be improved, like the
top task bar should be more noticeable due to many
students ignore it at the beginning. Touch
Protot
Touch
in Coas
Proto
in Co

Summary of User Test Questionnaire F r e e s ca l e /SCA D


S e c t i o n 4 . 2 : I n te r a c t i o n D e s i g n / To u c h U s e r I n te r f a c e

User Testing
1 Most students thought the test of Globle operating system
was very cool.
Time: May 20, 2009 Description:
148 |

final ui concept
With the insight of the user testing the final
UI concept was developed. The final concept
improved the GUI of the interface design to
be more attractive to our user gorup and it
also ameliorated the touch icons for easily
functioning.
The final concept focused on easy accessi-
bility and an organized sturcture for the files
and applications. It also kept the playful user
experience and provided the opportunities of
the customization of the interface color and
icon design.
The top user bar is the quick links for users
to search stuff, get the instant messages, com-
municate with online friends, launch the web
browser and check the calendar. It also shows
the system status and provides the settings con-
trols for the system. It can be minimized for
creating more screen space for users.
The left button opens the files globe folders.
All the data a user has, such as word documents,
movies, and photos, are organized into globe
folder the user access from this point.
The right botton opens the applications globe
folders. It is organized and functions the same
as with the file globes; the user can find and
A closeup of ‘Globe Space’. use the specific application by touching the
application globe.
The user can drag the globes and drop them
into the screen space (globe space), and it
will become the quick link for the user to use
the application or open the stuff. The user can
group the globe by their own categories and
they can also customize the appearance of the
icon or the interface color to differentiate the
different groups.

F r e e s c a l e /SCA D
S e c t i o n 4 . 2 : I n t e r a c t i o n D e s i g n / To u c h U s e r I n te r f a c e
| 149

Files Folder Globes Widget Task Bar Globe Space App Folder Globes

F r e e s ca l e /SCA D
S e c t i o n 4 . 2 : I n te r a c t i o n D e s i g n / To u c h U s e r I n te r f a c e
150 |

One tap reveals widget task bar items. One tap activates thumb buttons.

A double tap opens globe folders. Tapping globe folders reveals contents.

F r e e s c a l e /SCA D
S e c t i o n 4 . 2 : I n t e r a c t i o n D e s i g n / To u c h U s e r I n te r f a c e
| 151

Tapping and holding thumb buttons reveals globe folder editing options. Draggin an app globe from the globe folder puts a copy on the globe space.

Apps can be opened by tapping an app globe.

F r e e s ca l e /SCA D
S e c t i o n 4 . 2 : I n te r a c t i o n D e s i g n / To u c h U s e r I n te r f a c e
sectio n 4 . 3

interaction design
non-touch
user interface

Pandora Calculator

PowerPoint Dictionary

Library Video Recorder

12:39 PM May 11 85% 3G


154 |

Current Netbook UI design


ASUS Eee PC
Tab menu desktop further research
Easy to access but not interesting Current Netbook UI
By observing the current Netbook UI design, we
can get more insights to establish the design
principle. We selected three different examples,
including ASUS Eee PC, HP MINI 1000, and OLPC.
They all represented different focus on UI. These
designs gave us ideas about the rules of organiz-
HP MINI1000 ing, style, and communication. How to combine the

Widget desktop friendly usability, attractive style, and clear


social networking would be a big portion of the
design consideration.

Market Trend
More attractive but complicated There is no doubt that the cloud computing is a
future trend. Although it is still developing, it
shows a great potential to be applied in the net-
book. Not only it can bring the powerful function
to the mobile device but also can store the data
safely. However, the biggest feature of cloud com-

OLPC sugar OS puting is to rely on the access of internet. How


to apply this opportunity but make up the limita-
Graphic communication tion would be a big concern for design.

Design consideration and criteria


From the user and market aspects, we included the
Easy to learn but for younger age group opportunity and limitation into the design consid-
eration. The biggest issue will be considering the
needs of users and the usability of UI design. For
the design criteria, we came out six points to
follow. Those rules helped us to develop the com-
plete concept of operating system for our target.

F r e e s c a l e /SCA D
S e c t i o n 4 . 3 : I n t e r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
| 155

Market Trend - Cloud Computing

Cloud Computing

iCloud Jolicloud Eye OS G.ho.st Virtual Computer

Benefits Disadvantages

1. Securely save data in the cloud. Need to access the internet to get the
functionality and rely on the speed of
2. Low-cost way to load and go. internet.

3. Offer many value-added capabilities


without download the software.

F r e e s ca l e /SCA D
S e c t i o n 4 . 3 : I n te r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
156 |

Design Consideration & Design Criteria

Opportunity Limitation
User aspect – Need to access the internet to utilize the function
o Customization and personalization. - work in the local machine and transit the
o Communication with different tools. information later
o Desire for control and privacy
Most functions are similar to smartphone
Market aspect – - Make the function more valuable and effective
Trend: Cloud computing than others

Design Consideration

Design Criteria
1. Unique point to differ from other competitor (netbook and smart phone).
--- Cloud computing (new for netbook)
---- Video capabilities, presentation tools, sketching capabilities (differ from smart phone)
2. One structure that can be varied for different target (tween, soccer mom)
--- Play form for young market
3. Unique layout approach that is user friendly and well-organized with a clear hierarchy of information and people.
4. Focus on communication functionality
5. Customized and personalized capabilities

F r e e s c a l e /SCA D
S e c t i o n 4 . 3 : I n t e r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
| 157

user
testing

Two models were tested with the users. The


first was an enlarged scale smart phone
with a purpose to record the user’s expec-
tations an object with different language
other than a “baby laptop.” High Mobility
and power is what the users read and per-
ceive with this model.
The second model was a Velcro equipped
field, in which different elements (win-
dows, pointers and other shapes) of an
interface were given to the user. The
users were then asked to manipulate these
elements to create their ideal GUI. The
users express the necessity send and
receive information and updates from the
people they are working with, and the use
of the computer by activities implying
multitasking and different intentional-
ity (productive, social or entertainment
activities), and connection with people.

F r e e s ca l e /SCA D
S e c t i o n 4 . 3 : I n te r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
158 |

ui design
process

The non-touch screen interface team based


its concept on people connecting through
activities that share information, or
“stuff.” The concept has been refined in
four different stages. The first one is a
mix of the ideas of Wei-Hsin and Charlie’s
wireframes. The second stage was the
development of the initial concept, and
the third was called Sphere OS. A pro-
totype of the latter concept was then
further developed and tested by users.
Finally, a system called Air OS was devel-
oped after the evaluation of the findings
in the user testing.
Air OS not only allows high connectiv-
ity and sharing of information, but it
also proposes the use of collaborative and
multi-tasking spaces and activities that
reflect today’s necessities of the netbook
users. It also proposes an innovative
approach of graphical user interfaces.

F r e e s c a l e /SCA D
S e c t i o n 4 . 3 : I n t e r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
| 159

12:39 PM May 11 85% 3G

Settings

12:39 PM May 11 85% 3G

This was the first rough of the user interface


the non-touch group created as a team. It used a
corner docking system that categorized the user’s
information into People; that housed the users
favorite people broken down in to folders like
“School Friends” and “Family”, You; that housed
the users messaging methods, social networks,
games, music, etc , Tools & Storage; that housed
re

p
Us

Settings
to
the user’s applications, widgets, tools and De
sk
c y
iva
documents, and Settings; where the user could Pr
l
nta
rte ls
personalize the desktop and customize the items Pa ontro
C

within the docks.

F r e e s ca l e /SCA D
S e c t i o n 4 . 3 : I n te r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
160 |

F r e e s c a l e /SCA D
S e c t i o n 4 . 3 : I n t e r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
| 161

Hey Joseph! Recent Favs: Hey Joseph! Recent Favs:

Sphere Manager

Web Sphere People Apps Stuff Web Sphere People Apps Stuff
12:39 PM May 11 85% 3G 12:39 PM May 11 85% 3G
Search Search

Hey Joseph! Recent Favs: Hey Joseph! Recent Favs:

Family Sphere Manager


Science Work
Host Tom Henry

Public
Joseph :
Which topic do you want to
choose?
Henry :
I don’t know.... Tom?
Tom:
How about Frog?

Tom
Henry
Oh...I found a picture of Frog. I just
put in the share space

Picture File Web Video Music

Web Sphere People Apps Stuff Web Sphere People Apps Stuff
12:39 PM May 11 85% 3G 12:39 PM May 11 85% 3G
Search Search

F r e e s ca l e /SCA D
S e c t i o n 4 . 3 : I n te r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
162 |

user testing
After refining the Sphere OS, a prototype
of the operational system was developed.
The interface was tested by boys and girls
from the Costal Middle School in Savannah,
GA. The average age of the user was 12
years. The facilitators of the usability
testing asked various questions about the
GUI and asked the students to complete a
few tasks within the prototype to test
certain aspects of the operating system.
The users were first asked to explore
the system and then talk about the inten-
Here a student from Coastal
Middle School is maneuvering
tions of their actions. Secondly, the
through the Sphere OS. She uses users were asked to send a message to
“My People” corner dock at the their mothers through the system. The
top left of the screen to find last part of the usability test allowed
the person she wants to message. the user to interact and play with the
“sphere” functionality of the system.

F r e e s c a l e /SCA D
S e c t i o n 4 . 3 : I n t e r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
| 163

Findings:
1. The users rarely attempted to activate the
corner docks.

2. They found alternative paths to communicate.


The user oftentimes when to the “recent favs” on
the upper right corner and a collaborative sphere
called “family stuff ”.

3. The spheres were more of a target for the user


than the set interface elements.

4. The user only found the search bar after


maneuver through other elements in the interface.

5. Most of the other GUI elements were clear and


used easily by the user.

6. Once the role of the corner docks was


understood, the user had no problem using the
structure to complete the required tasks.

7. Most users mentioned two different aspects of an


interface they said would make the experience more
productive: right click and the file menu.

Overall, the Sphere concept was successful. The


users embraced the concept of a collaborative
space. However, many elements in the GUI needed to
be presented more clearly.

F r e e s ca l e /SCA D
S e c t i o n 4 . 3 : I n te r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
164 |

Pandora Calculator

final concept
With the insight of the user testing a new
system was developed. The Air OS system.
PowerPoint Dictionary The Air Os is a return and refine version
of the old operational systems and that
present a central active working area
and four different categories around that
make emphasis in “people connected in
activities through applications” the four
categories are:

a. People
Library Video Recorder
b. Applications

c. Stuff

d. Multitask/collaborative spaces

12:39 PM May 11 85% 3G

F r e e s c a l e /SCA D
S e c t i o n 4 . 3 : I n t e r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
| 165

F r e e s ca l e /SCA D
S e c t i o n 4 . 3 : I n te r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
166 |

Applications

Family Calendar

Search 12:39 PM May 11 85% 3G

New Space

Add People

Add Application

Web Sphere People Apps Stuff


Web Sphere People Apps Stuff Add Stuff

Search 12:39 PM May 11 85% 3G


Search 12:39 PM May 11 85% 3G

F r e e s c a l e /SCA D
S e c t i o n 4 . 3 : I n t e r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
| 167

Documents Recent Format Help

Microsoft Word Family Calendar Pandora Calculator

Contacts Camera PowerPoint Dictionary

Excel YouTube Library Video Recorder

Search 12:39 PM May 11 85% 3G

F r e e s ca l e /SCA D
S e c t i o n 4 . 3 : I n te r a c t i o n D e s i g n / N o n -To u c h U s e r I n te r f a c e
thank you

También podría gustarte