Scad_netbooks_ Processbook

| 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.

and exciting new products.

Solutions are presented in form of 3D computer renderings as

Over a ten week period students of IDUS 421, Commercial

well as full scale volume models.

Brad Fenning

Bryan Hemenway

Zarni Ko

Colin Martin

Trevor McKay

Mason Pfau

Cody Rexrode

Julian Romero

Win Tangsakulsuthaporn

Gunter 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

Verena Paepcke-Hjeltness

Liz McKibbon

| 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 Malouf

design product.

Matt Cole

Charlie Gongora

Jill Graves

Wei Hsin Lai

Alex Wang

Quianru 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 • Expression of style

• Color/pattern to communicate with user group

• “Understanding Linux” feature -Startup -Operation -Customization -Programs

• Optimize accessories to users -Storage -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 |

current/former portable 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

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

| 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 related to children age and device dimension.

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 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 exposure

- Media Mu new genera

- The table provides little support for speculation that new media, such as computers, 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 behavior 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

Tomorrowland

Colors

tie. Printed floppy bow-style tie.

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.

Power Full

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,

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

Electrochoc

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

codes.

sandal. Wedge sneaker.

Colors Saturated brights, sulphur, electric blue, flashy orange, purple pink to twist with color ed greys and classics. To wear in pop or cubist style color blocks.

Classic

Chic

• Men. Printed bandanna and sun hat. Printed maxi tote. “Frogman” leggings, color ed or printed oxfords, canvas and leather sneakers with day-glo accent.

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). 2009’s shoe trends are all about making a statement. The biggest trends to hit the runway were • fetish-inspired shoes • fringing • reptile skin • architecturally-inspired

4. Medical engineering will rise in importance as OEMs continue to move away from low-margin manufacturing. The troubles in the car industry received huge press in 2008, but this is a trend established more than 20 years ago. 5. The Japanese companies will lead in new

Jewelery in the 2009 collections took many and various forms. There were a few common threads amoung them, however, including

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

engineering applications for plastics using natural feedstocks in place of hydrocarbons. Sixty per cent of the interior components of Toyota’s 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.

| 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 users but about [this is] living. Where as earlier the number of registered users was highlighted, now the focus is on stickiness, value for the users, uniqueness and interactivity. Online communities are introducing dual (Habbo.com, GuppyLife.com) or triple currencies (whirled.

4. Massive competitive co-op FPSs (and potentially other genres) There seem to be a need for scalable co-op games - something in between “playing with friends” and MMOs. Resistance 2 is one example of a shared experience and collaborative gaming in a scalable and/or flexible game 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 journal, and a Disposable Camera. The journal is used to document communication behavior 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 communication 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

Revelation: The show your bag session revealed tendencies and characteristics of this user group that would remain unseen in a typical question and answer session.

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

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 typically carry a thumb drive. We also found that students were limited to the type and style of backpack they could carry, so most of their personalization was found on their IDs for 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.

| 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

E

16-18 19+

n

t

d

MP

L

research synthesis

target age groups 12 - 15

16 - 18

19+

12 - 15 findings:

findings:

findings:

• • • • • • •

• • • •

• • • • •

Identify with Parents. Begin to become individuals. Mostly about fun. Less focused (short attention span). Music (what parents/ older siblings listen to). • Transported by parents. • Fewer mobile possessions.

opportunities: Portability. Modular. “Cute” / Versatile (small). Identification (Accessories, etc.). Options (interface). Organization (time management). Creative programs. Durable

opportunities: • • • •

• • • •

Larger form factor Customizability (color options) Productivity focus (accessories) Social interaction (study help) - Flash card generator - Foreign language help Reference software (encyclopedia) Media storage (memory expansion) Style > Durability Investment

Self Reliant College / Job / Family Survival Fashion (interest dependent on income/lifestyle)

opportunities: • • • • • • •

Reference software Professional (minimal / modern) Not a clamshell Travel (lightweight) Video output (option?) Communication Data / organization

EXA

MP

L E

• • • • • • • •

Form own identity Independent (work, responsibility) Curious School focus (future) Values Possessions (works for them) Fashion / Brand Recognition Carries around more stuff

AGE

sectio n 2

E

een

EXA

AGE

16-18 19+

| 29

30 |

target age groups 12 - 15

16 - 18

19+

12 - 15 findings:

findings:

findings:

• • • • • • •

• • • •

• • • • •

Identify with Parents. Begin to become individuals. Mostly about fun. Less focused (short attention span). Music (what parents/ older siblings listen to). • Transported by parents. • Fewer mobile possessions.

opportunities: • • • • • • • •

Portability. Modular. “Cute” / Versatile (small). Identification (Accessories, etc.). Options (interface). Organization (time management). Creative programs. Durable

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

Form own identity Independent (work, responsibility) Curious School focus (future) Values Possessions (works for them) Fashion / Brand Recognition Carries around more stuff

opportunities: • • • •

• • • •

Larger form factor Customizability (color options) Productivity focus (accessories) Social interaction (study help) - Flash card generator - Foreign language help Reference software (encyclopedia) Media storage (memory expansion) Style > Durability Investment

Self Reliant College / Job / Family Survival Fashion (interest dependent on income/lifestyle)

opportunities: • • • • • • •

Reference software Professional (minimal / modern) Not a clamshell Travel (lightweight) Video output (option?) Communication Data / organization

| 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

LE

Split angel keyboard Reg.Keyboard

split keyboard

EXAM

PL

E

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

EXAM

PL

E

Touch Screen

12-15 19+

AGE

12-15 16-18

Split side way

dual screen

AGE

AGE

All Ages

| 33

swivell

EXA

tablet

N/A

EXA

AGE

L

E

Rotate Screen

MP

AGE

MP LE

Only Screen

16-18 19+

16-18 19+

Wall Mount Hand Held

flip screen

EXA

MP

L

E

slide-out screen

EXA

MP

L

AGE

AGE

E

16-18 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 factor 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 factor 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: • 9” X

tioning.

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,

Car Cigarette lighter,

Calender,

Internet,

Ports: • USB (2), Memory Card (SD, CF), Power Cord 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

Weather

| 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 Camera

Acrylic Screen Cover / Stand F r e e s c a l e /SCA D Section 3. 2: Industrial Design / Final Concepts

1.

3.

2.

4.

Selectable Hot Key Side

Custom Fabric Insert

| 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

Slide Cover

Touch Ink Screen Off

Touch Ink Screen On

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

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

Leather Cover Protector

Magnetic Clip

| 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: vIEWINg NEW ENTRIES

RESOLuTION: 800 x 600

ITERATION: 1.0

LAST uPDATED BY: mATTHEW COLE

LAST uPDATED: 30.04.2009

COMMENTS

Write comments here.

nbox er delete

spam

position reset

new

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

manage friends customize Uptationummy

— 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… tuesday, april 7, 2009 thursday friday sunday monday tuesday wednesday

settings

Met num — dolobortis nos nonsequis acin vulpute modo Sit vel dolorem zzriliquam at, vel do eugueri… word spreadsheet presentation add edit delete processor

saturday

Met num — dolobortis nos nonsequis acinJoseph vulpute modo Sit vel dolorem zzriliquam at, 1 2 vel do eugueri… 3

4

2 Subject: Late Art • Time: 2:30 - 4:00 pm mom: late meetingat, vel do eugueri… joseph: late artvulpute modo Sit vel dolorem Met num — dolobortis nos nonsequis acin Mom, art class is going to run late this zzriliquam afternoon, to-do

message

youtube

5

6

julien: game joseph: rank test so I’ll just catch a ride with Emily and her dad.

7 going to drop drop me 8 off at karate, They’re

9

3

10

11

clock camera web music 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

Met num — dolobortis nos nonsequis acin vulpute modo Sit vel dolorem zzriliquam at, vel do eugueri… 12

13

14

Joseph

15

16 web browser

dad: work trip

17

18

Xero ea commy — nim iureetuerIbh ercipsuscip el estie Atie facilit laor sum nim nis nim iure velit … adam: comic swap Subject: Rank Test • Time: 5:00 - 6:00 pm

dad: work trip

video chat browser share Oh, I thought I would remind you that tonight’s karate class will be Met num nonsequis acinmyvulpute modo Sit vel dolorem zzriliquam 23 at, vel do eugueri…24 19— dolobortis nos20 21 22 GREEN BELT RANK TEST!!! Just a reminder. ;)

26

hulu

27

28

29

30

25

ny times

bbc

7

114 |

Synthesis: Research from the middle school sessions resulted in a wealth of data on how, why and with what these users are interacting with technology.

contextual inquiry 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 visualizations of patterns found in the contextual inquiry that reveal how users engage with a product and, in the case of the netbook, 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 surefire methodology in maintaining and focusing 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

7:00 AM

Student A got up and dressed up. Then, she checked the text massages on her phone when she was taking breakfast.

Findings:

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.

8:00 AM

She went to gym to play volleyball at the first class.

9:00 AM

She took Social Studies class. But, she felt so boring that she passed noted and whispered with her classmates.

The group users are only allowed to use cell phone before and after school time.

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

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 this class, so she started to draw a logo for student club

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

Passing notes is a typical way of communicating with each other during class time.

They have less opportunities to socializewith friends because limit break time.

| 117 2:00 PM

School time was over. She was excited to take the school bus to go home.

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.

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.

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.

Findings:

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

Use of media (music) and a desire for entertainment are a big part of te students’ after-school experience.

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 technologybased devices this user group interacts with at home.

Desktop

Wii

PlayStation Portable

MP3 Players

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

PlayStation

DVD Players

Flash Drive

Portable Phone

Electric Guitar

Nintendo DS

Cell Phones

TV

Digital Camera

Stereo

Laptop

| 119 bedroom

home

cellphone

computer

mp3 player

tv

stereo

wii

public space cellphone watches before bed

nds digital camera electric guitar laptop jumpdrive

plays games listens to music

mp3 player digital camera

talks & texts talks & texts listens to music

pratices homework & internet

takes pictures of friends

user a school announcements

loads homework for school

school

texts friends

classwork classroom takes lessons

video camera

car cellphone mp3 player

tv computer

listens to music

electric guitar turns in homework

jumpdrive

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 Soulja Boy

Nike

Myspace Miis

Adult Swim

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

Facebook

CSI Starbucks

YouTube

Abercrombie & Fitch

Anime

| 121

sports Michael Phelps / The Colts (football) / soccer

Red Bull Starbucks Hollister Abercrombie Aeropostale Rocca Wear Adidas Pac Sun Rue 21

books

Twilight / Steven King / Sci Fi / Fantasy / Nancy Drew

internet

youtube / myspace / facebook / flickr

games

Wii (Tennis, Boxing, Mario Kart) / NDS

tv movies music

Secret Life of an American Teenager / House / CSI / American Idol / anime Twilight / anime Peramore / Soulja Boy / Evanescence / 80s Metal / Led Zeppelin

entertainment

brands user a

activities

communication

piano pratice guitar practice dance class teacher’s assistant volleyball baseball

texting phone facebook myspace skype 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 generate 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 potential 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

joseph wright

/// Two-Parent Household /// 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 Miis /// Watches Discovery Channel and Surviorman /// Myspace for Socializing /// World of Warcraft Online

One Brother and one younger sister

“No doubt about it, if I could be a superhero I’d be Wolverine!” Joseph lives in a coastal city in the eastern part of the U.S. His father, Robert, works at a local hospital and usually works late. He has an older brother, Julian, 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. She makes sure her family has home cooked meals, that the kids get to their different activities on time, and that the house is always in order. Their family lives in a suburban neighbor that is full of other families. Joseph has a daily routine during the week that includes a home cooked breakfast, bus rides and school. After his homework 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 customizing 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”.

technology uses /// Education (Word Processor) /// Communication (Cellphone, Texts, Myspace, Facebook) /// Entertainment (Cellphone MP3 Player)

communication goals /// Family (Cellphone) /// Friends (Cellphone, Texts, Myspace, Facebook, Gaming)

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 /// FamilyCentered/// Plays Tennis, Jogs and Swims/// Exercises Often On-the-go Lifestyle

relationship /// Mother of Three /// Wife of 14 Years /// Parents Live Far Away /// Social Activities With Friends

entertainment /// Family Time

technology uses /// Work (DELL Laptop) /// Communication (Cellphone, Homephone, Email, Facebook) /// Family (Television, Stereo, Digital Camera)

communication goals /// Family (Cellphone, Homephone, Email) /// Friends (Cellphone, Facebook)

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

s ec o n da ry p e r s o n a

susan wright 39 years old /// Accountant Married for 14 years /// 3 Children Graduated from Business school Income - $124,000 a year

Creating comfortable home life for her family... Susan Wright is a 39 year old woman who works for a small financial consulting company. Since graduating from the business school in 1999, she has been doing accounting 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 biggest 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 entertainment, 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.

| 125

lifestyle

s ec o n da ry p e r s o n a

emily walls 13 years old /// 7th Grade Student Single-Father Household /// One Older Brother

13-year-old, soft-spoken dreamer and aspiring guitarist

/// Music Lover /// Influenced by Father’s Tastes/// Naturally Accomplished Student /// Quiet Observer /// Fringes The Group

relationship /// /// /// ///

Single-Father Household Mother Lives Several States Away One Older Brother Tight-Knit, Small Circle of Friends

entertainment /// /// /// ///

Reading SciFi & Horror Paperbacks Listens to Music on iPod Bands on youtube and Myspace Buffy and Angel on The WB

technology uses Emily wakes up around 6:15 am every morning and checks her cellphone for any texts she may have missed from her friends while she was asleep. After breakfast, her Emily’s dad drives her to school while Emily listens to Led Zeppelin on her iPod. Before homeroom starts, Emily spends a little time talking to her best friend Meredith, then 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 is picked up by her father after class, she texts her friend Stacy (on the cellphone she left in her dad’s car), who lives down the street from her, to see if she wants to hang out when she gets home from school. When Stacy comes over to Emily’s house, 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 homework 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.

/// Education (Word Processor) /// Communication (Cellphone, Texts, Myspace, Facebook, Skype) /// Entertainment (iPod, youtube, Myspace, Facebook, TV)

communication goals /// Family (Cellphone, Myspace, Skype) /// Friends (Cellphone, Texts, Myspace, Facebook)

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 personas 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. Like most mornings he wants to check his MySpace and email account, however his Mom is on the family computer checking her email and work schedule so Joseph will not be able to use the computer before school. After breakfast Joseph catches the bus to school. Joseph is frantic when he arrives at school because he did not have time to finish the science homework that he is suppose to discuss in class. After a discouraging morning, Joseph heads to lunch with his class. As he eats he wishes he had something to sketch on, because he has a few new ideas for the comic book characters he is working on. The rest of the day is pretty boring. The classes continue like they always do; the teacher lectures, and the students listen. After school Joseph stays for a late art class and catches a ride home with his friend Emily at 4:30. When he gets home, Joseph’s mother is angry with him, because he didn’t let her know about the late art class. She expected him at 3:30 and has been incredibly worried. After a little argument, they have to rush out the door to get to his karate class. On the way to the class Joseph remembers that today is his karate rank test. His mother gets upset again, because she is unprepared to record the event. Joseph is also a little disappointed because he wanted to show off his professional “combat skills” to his friends. After the frenzied day, Joseph’s mother, Susan, has to heat up leftovers for supper because she didn’t have a meal planned. The family, except for Robert, the father, eats together. After supper Joseph runs into the living room to watch Survivor Man, but his sister Sarah beat him to the remote and started watching American Idol. He decides to try to get on the computer to play World of Warcraft, but his mom is on it catching up with friends and work. At this point, he decides to just finish his math homework and go to bed. On the way to school the next day, Joseph realizes that he forgot to finish his book report for English when one of the students mentions it on the bus.

Joseph wakes up Monday morning, and before he even gets out of bed is able to check his MySpace and email accounts with his new netbook [opportunity for accessories]. As he is checking his MySpace account he gets a reminder about his late art class from Emily. He sends a notice to his mother’s calendar through their “family” widget so that she will know that he will be at school late, and will be catching a ride to karate class with Emily. He also asks her to bring his karate gi so he doesn’t have to lug it around school all day. After getting ready for school, Joseph runs downstairs, grabs a few pieces of bacon, says bye to his mom, kisses her on the check, and heads for the bus. Susan, Joseph’s mother, smiles as he runs out the door. She is in the kitchen on her netbook organizing the meals and grocery list for the week, and is thinking about all the time she is saving with this new “grocery” widget. The time it saves will allow her to do a little extra for the family game night on Thursday. Just then, she notices the addition Joseph made to her calendar, and she giggles when she sees that he has attached one of his newest cartoons to personalize the message. She loves it when he does that. While on the bus Joseph and his friends start to talk about their karate class. In the discussion about ranks, Joseph is reminded that his rank test for his green belt is that night. He opens his netbook and sends another notice to his mom’s calendar. He knows his mother remembered the event, but loves any chance to bring attention to the fact that he’s almost a GREEN belt. Since his mom doesn’t have to be at work for another hour, Joseph figures she is probably still online catching up on work emails and finalizing her to-do list. While on the netbook, Joseph receives a notice from his mom reminding him to finish his science homework. “Ooooh yeah,” Joseph says, and rushes to finishes his homework for science class before they get to school. Excited by the presentation he just finished for science 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 netbook into “school/airplane mode” [what terminology are we going to use here]. When it’s Joseph’s time to present in class, he hooks his netbook to the projector and blows the class away with his cool science presentation. Delighted by how well his presentation was received, Joseph triumphantly heads into the lunchroom with his class. While in the lunchroom, Joseph sketches in his netbook. He is working on a new personalized exterior for it. While he is sketching he decides to shows off his newest comic book characters to his friends at the table. His buddy Adam walks by, sees the new characters, and tells Joseph he just drew the perfect armor that work look awesome on the ninja character. Adam grabs his netbook locks it into Joseph’s and they work together to test out and edit the new gear. Later that day in social studies he is able to use his netbook to do group work. All the students think the group work makes the class so much more fun [opportunity for accessories]. After staying late for art class, Joseph rides to karate class with Emily and her dad. While on the way to karate Joseph uses his netbook to share a new band with Emily and her dad, because he knows they are both into music [opportunity for accessories]. Emily loved the music so Joseph emailed her the link to their page on MySpace. Joseph gets to karate class just in time to change into his karate gi and set up his netbook to record his rank test [opportunity for accessories]. The footage will be uploaded so that his friends can check it out. Joseph is so excited to show off his “skills”. When they get home, Susan starts supper. She has her netbook set up by the stove displaying a recipe she found for fajitas [opportunity for accessories]. Joseph’s loves fajitas! Susan found the recipe after she realized how excited Joseph was about the green belt. She wanted to cook something special to celebrate Joseph’s progress. While looking at the recipes she gets a notice from her husband, Robert. He says that he will be late, but to

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

keep the dinner warm. He also sends a message to both Susan and Joseph saying that he had received the footage from the rank test and that he is so proud of Joseph’s progress. Joseph, who is sitting at the kitchen table with his netbook, working on his homework, looks over to his mother with a big smile on his face. “I’m glad Dad has finally figured out how to use that old computer of his,” Joseph jokes. Sarah, Joseph’s sister, hears all the commotion and runs to the kitchen to see the footage they are discussing. She links her netbook to Joseph’s and watces the video. While linked together she shows Joseph a problem she has with her homework and asks for his help. The two work together to address the problem [opportunity for accessories]. When the fajitas are ready, Susan asks Joseph to message his brother Julian to tell him supper is ready. Julian is riding bikes with friends in the neighborhood, and Joseph can see from their “family” widget that Julian is just around the block. Joseph is the only person Julian allows to “see” his whereabouts. In a few moments Julian arrives, and the family has a happy dinner together, talking about the day’s events. Susan makes sure to leave her netbook open so that Robert can be video conferenced in and not miss anything. During supper Susan reminds everyone about family game night on Thursday. Everyone is very excited, especially now that Joseph has his new netbook. Having one more netbook linked in with the rest will make the gaming experience even better [opportunity for accessories]! Pumped up about game night, Joseph heads to his room to play games on his netbook after supper. While he is playing, one of his friends pops up in Skype to remind him about a book report that is due the next day. Joseph video conferences with him about the project and also asks him a few questions about a girl he likes. Before finishing the book report, Joseph checks his MySpace account to see if anyone has posted any comments about his karate footage. After briefly talking with a few of his friends, Joseph finishes his paper, watches an episode of Adult Swim online and heads to bed.

| 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

Starting on paper: Using the deconstruction of the scenario as guideposts for behavior and features, we began sketching concepts for the user interface.

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

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 particular 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 individually and served as launching pads for the more involved designs we constructed as two separate groups. The different approaches each student took helped to informed more well-rounded interfaces in the subsequent designs.

| 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 9

Alex Wang: This UI design focused on the playful interface and social network.

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

In the design,

balloons represent the different applications and people icons represent the user and the user’s

MAY

friends. By connecting balloon with balloon or balloon with people icon, the user can have the interesting using experience in different combination of applications and social networking.

9

9

- Science Homework - Test

- Late Art Class (need to notice mom)

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

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

| 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

? Josh

Megan

Julian

Keyla eyyylaa

Family Scie Sc ienc nce e Cl Club ub Science

Guitar G uitar p pals als Daniel

Kara Karate K arate te 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

NETBOOK USER INTERFACE FREESCALE

PROJECT: CLIENT:

HOmE SCREEN

RESOLuTION: 800 x 600

ITERATION: 1.0

LAST uPDATED BY: mATTHEW COLE

LAST uPDATED: 30.04.2009

2

COMMENTS

Write comments here. 2 1

1

3

box center clean-up boxes

3

inbox

position reset

select all

delete

spam

5

new

Xero ea commy — nim iureetuerIbh ercipsuscip el estie… Uptationummy — niamcon sequis dolestrud tat autate ai… files

settings

word processor

spreadsheet

presentation

calendar

to-do

clock

camera

web music

inbox

message

video chat

web browser

share

family

youtube

hulu

Emily Walls — Don’t forget that art class will run late tom… Met num — dolobortis nos nonsequis acin vulpute modo…

2

6

5

3

web browser

ny times

bbc

6

4

2

4

4

1

1 2

NETBOOK USER INTERFACE FREESCALE

PROJECT: CLIENT:

CALENDAR: vIEWINg NEW ENTRIES

RESOLuTION: 800 x 600

ITERATION: 1.0

LAST uPDATED BY: mATTHEW COLE

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.

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 screen. Pressing and flicking in any surrounding space with one’s finger will accomplish the same task.

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 user determine which boxes they think they will use the most and in what order. Dragging the icon from this space removes it.

3

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 select box, all delete spamis indicated new space also “activates” which box the box color becoming bright. “deactivated” boxes grow shaded.

4

Any box can be resized by dragging the bottom left corner.

inbox box center

clean-up boxes

position reset

settings

7

COMMENTS

Write comments here.

the idea of a search center being the primary way of locating what a user is looking for. This UI present a true interface that could be moved

— 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… tuesday, april 7, 2009 sunday monday tuesday wednesday thursday friday files

LAST uPDATED: 30.04.2009

lacked the concept of social networks and didn’t

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

manage friends customize Uptationummy

Matt Cole: This iteration on the user interface focused more on the accessibility of widgets and

Met num — dolobortis nos nonsequis acin vulpute modo Sit vel dolorem zzriliquam at, vel do eugueri… word spreadsheet presentation add edit delete processor

through.

saturday

Met num — dolobortis nos nonsequis acinJoseph vulpute modo Sit vel dolorem zzriliquam at, 2 vel do eugueri… 3 1

4

2

Subject: Late Art • Time: 2:30 - 4:00 pm mom: late meetingat, vel do eugueri… joseph: late artvulpute modo Sit vel dolorem Met num — dolobortis nos nonsequis acin Mom, art class is going to run late this zzriliquam afternoon, calendar

to-do

5

6

julien: game joseph: rank test so I’ll just catch a ride with Emily and her dad.

7 going to drop drop me 8 off at karate, They’re

9

3

10

11

clock camera web music 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

Met num — dolobortis nos nonsequis acin vulpute modo Sit vel dolorem zzriliquam at, vel do eugueri… 12

13

14

Joseph

15

16 web browser

dad: work trip

17

18

Xero ea commy — nim iureetuerIbh ercipsuscip el estie Atie facilit laor sum nim nis nim iure velit … adam: comic swap Subject: Rank Test • Time: 5:00 - 6:00 pm

dad: work trip

inbox

message

video chat browser share Oh, I thought I would remind you that tonight’s karate class will be Met num nonsequis acinmyvulpute modo Sit vel dolorem zzriliquam 23 at, vel do eugueri…24 19— dolobortis nos20 21 22 GREEN BELT RANK TEST!!! Just a reminder. ;)

26

family

youtube

27

28

29

30

25

ny times

bbc

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.

2

Icons for the users who posted events will be visible. These images are the user 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.

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

| 139

sectio n 4 . 2

interaction design touch-screen user interface

140 |

how can we use “parti” to facilitate our concept

design criteria TARGET GROUP’s ACTIVITIES

TECH OPPORTUNITY Touch screen

Customize anything they want

E Ink screen

Communication with friends by online social network

Fingerprint

Indugled in popular culture

3G Tech

Influenced by parents

Bluetooth

play video games

SENARIO

HUMAN FACTOR Screen size

Communication with family

Keyboard size Icon size of OS

Group work

PARTI

Make grocery list Doodle

MORE FUTURE POSSIBILITIES? MARKETING TREND More balanced in smartphone and laptop Google’s Cloud services Connect to different accessaries

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

Parti & the design sandwich is a structure for projects that allows designers to go form concepts to products using the tools of design. As the core interaction model, it is built in the design consideration outside of design, like technology 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 next layer of Parti is design principles that will evaluate the decisions so that all the decisions can support the central idea. The last layer is the central concept that will lead to the holistic design. As for the methodology of Parti, our Parti is based on considerations including the technology opportunities that can be applied in Netbooks, the characteristics of target groups’ desires, and market trends foreseeing the potential opportunities in the field, etc.. And then, through the filter of design decisions, we got our design principle for our operating system, easy accessibility, customization and playful, which leads to our central concept of “Global” operating system.

| 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

Customization

Key characteristics to evaluate the decisions

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 screen size 6’’ * 4”

Technology

Activities

touch screen

easy to find apps & staff

Scenario

Design Considerations Opportunities & Limitations

communication 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

Our process started on paper and led through several different iterations through wireframing and fully comped gui instances.

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

The concept of the touch-only screen interface team focused on the interaction 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 wireframes, which was the widget concept, 3D environment, social networking, and being playful. The second one was the development of the initial concept. A prototype of the concept was then further developed and tested by users. The UI design concept provides the easy accessibility in dealing with applications and stuff. It not only allows the customization of the interface appearance, but it also creates the playful using experience.

| 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 to test whether users can quickly figure out the functionality of the system without any explanation.

User Testing

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

Touch Protot

students ignore it at the beginning.

Touch in Coas Proto

in Co

F r e e s ca l e /SCA D Summary of User Test Questionnaire 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 accessibility 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, communicate with online friends, launch the web browser and check the calendar. It also shows the system status and provides the settings controls 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 A closeup of ‘Globe Space’.

as with the file globes; the user can find and 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

HP MINI1000 Widget desktop

designs gave us ideas about the rules of organizing, style, and communication. How to combine the friendly usability, attractive style, and clear social networking would be a big portion of the design consideration.

More attractive but complicated

Market Trend 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 netbook. Not only it can bring the powerful function to the mobile device but also can store the data

OLPC sugar OS Graphic communication

safely. However, the biggest feature of cloud computing is to rely on the access of internet. How to apply this opportunity but make up the limitation would be a big concern for design. Design consideration and criteria

Easy to learn but for younger age group

From the user and market aspects, we included the opportunity and limitation into the design consideration. 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 complete 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

Benefits 1. Securely save data in the cloud. 2. Low-cost way to load and go.

Eye OS

G.ho.st Virtual Computer

Disadvantages Need to access the internet to get the functionality and rely on the speed of 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 User aspect – o Customization and personalization. o Communication with different tools. o Desire for control and privacy Market aspect – Trend: Cloud computing

Limitation Need to access the internet to utilize the function - work in the local machine and transit the information later Most functions are similar to smartphone - Make the function more valuable and effective 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 expectations an object with different language other than a “baby laptop.” High Mobility and power is what the users read and perceive with this model. The second model was a Velcro equipped field, in which different elements (windows, 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 intentionality (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 prototype of the latter concept was then further developed and tested by users. Finally, a system called Air OS was developed after the evaluation of the findings in the user testing. Air OS not only allows high connectivity 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

12:39 PM May 11

85%

3G

Settings

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 user’s applications, widgets, tools and documents, and Settings; where the user could personalize the desktop and customize the items

Us e

games, music, etc , Tools & Storage; that housed

r

the users messaging methods, social networks, p to

Settings

sk

De

c iva Pr

y

l nta rte ls 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!

Hey Joseph!

Recent Favs:

Recent Favs:

Sphere Manager

Web

Sphere

People

Apps

Stuff

Search

12:39 PM May 11

Hey Joseph!

85%

3G

Web

Sphere

People

Apps

Stuff

85%

12:39 PM May 11

Search

Hey Joseph!

Recent Favs:

3G

Recent Favs:

Family

Sphere Manager

Science Work Host

Henry

Tom

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

Web Search

Sphere

People

Apps

Stuff

12:39 PM May 11

85%

3G

Web Search

Sphere

File

People

Apps

Web

Stuff

Video

Music

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

162 |

user testing

Here a student from Coastal Middle School is maneuvering through the Sphere OS. She uses “My People” corner dock at the top left of the screen to find the person she wants to message.

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

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 intentions of their actions. Secondly, the users were asked to send a message to their mothers through the system. The last part of the usability test allowed the user to interact and play with the “sphere” functionality of the system.

| 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. 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:

PowerPoint

Dictionary

Library

Video Recorder

a. People b. Applications c. Stuff d. Multitask/collaborative spaces

12:39 PM May 11

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

85%

3G

| 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

Applications

Web

166 |

Family Calendar

Search

85%

12:39 PM May 11

3G

New Space

Add People

Add Application

Sphere

People

Apps

Web

Stuff

Search

12:39 PM May 11

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

Sphere

People

Apps

85%

Stuff

3G

Add Stuff

Search

12:39 PM May 11

85%

3G

| 167

Documents

Recent

Microsoft Word

Search

Format

Help

Family Calendar

Pandora

Calculator

Contacts

Camera

PowerPoint

Dictionary

Excel

YouTube

Library

Video Recorder

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