Core77

Final design by Mason Pfau

UI Touchscreen design for a netbook aimed at tweens

I'm a professor at the Savannah College of Art & Design (SCAD), where I've taught Interaction Design (IxD) in the Industrial Design department for two quarters now. One of the things that attracted me to SCAD was the high number of corporate sponsored classes there—companies often approach SCAD with a project they feel would benefit from a student perspective. Usually, we then take the project and restructure an existing class that maps to the sponsor's goals and objectives. I truly believe that projects grounded in reality are more compelling educationally, as they provide truer constraints for the students.

Last quarter I had the privilege of teaching a class sponsored by Freescale Semiconductor. Freescale produces computer chips in various categories—the market segment that approached us was the mobile market, whose chips are used in many of the cellphones and other mobile products in high circulation today, including Blackberry and Asus. Specifically, Freescale makes an architecture of CPUs known as ARM. Significantly different from the Intel x86 architecture CPUs that run almost all desktop, laptop and netbook class personal computing systems, ARM attempts to compete against Intel's ATOM CPU chipset. Atom is currently being used in two classes of devices: the netbook (like the HP Mini and Asus Eeee Pc) and Mobile Internet Devices (MID). ARM differs from the Intel Atom in that it runs cooler (saving space because they don't need a fan), uses less power (offering extended battery life or a smaller battery), and can't run Microsoft Windows. All three of these qualities offer both industrial design and interaction design opportunities.

Freescale conducted extensive research with existing non-Windows netbooks and learned that both the user interface and form factor issues co-mingle in these devices. They approached our industrial design department and asked us to work on concepts that address these issues for specific markets: tweens, teens and soccer moms.

There were two sponsored courses that participated in this project. My class was a graduate introduction to interactive product design while the other course was a 4th year undergraduate studio on professional practice and process taught by Professor Verena Paepcke-Hjeltness. What follows is our class' process for developing the initial framework and vision for a new graphical user interface to run on top of an existing operating system (like Linux) that can take advantage of an ARM CPU chipset on something akin to a netbook or a smartbook. Though this case study will focus on the work of my class, there was much collaboration between the two courses' students, influencing the final outcomes of both.

School bag exercise

Beginning with Research
For the first third of the project the two courses worked very closely together on research, which is a core part of SCAD's Industrial & Interaction Design programs.

We initially concentrated on the tween market (age 11-14), conducting research through a classroom of 20 students at a local middle school. There were a few methods of research we used with this group. Outright ethnography, while desirable, was not feasible given our constraints and the age of the subjects. Instead we focused on accessing students primarily in their school environment where we constructed a series of exercises.

On our first visit to the school we divided the students into three groups and conducted the following exercises:

School Bag
We asked students a series of questions to be answered by an item in their school backpack. We then took pictures of the collection of each question.

One of the most interesting findings was that in this school students didn't have lockers and are required to carry everything they need for the day in one bag that must be either mesh or transparent vinyl/plastic. The other interesting discovery was that no electronics were allowed to be brought to school by students except for USB thumb drives, which they used to bring in school work or transfer materials between school computers (library & classroom).

Three main ways students expressed themselves in school was through jacket tops over their uniforms, stickers on their bags and lanyards they use to carry their photo IDs around their necks. There was also a lot of personal expression on book covers.

Middle schooler's photo journals

Photo Journal with Interview
There were two pieces to this research method. The first were the journals themselves. Students were presented with a custom journal and a disposable film camera. They were asked to take pictures of 'communication' and then write down what they took a picture of. Then, after they were done they brought back their journals and were put in groups and for an interview.

This type research yielded the richest insights into this group, giving us significant information about their lives outside of school. We began to understand better their perception of technology and how productivity and play very much intertwine. They are very electronically social and don't distinguish between electronic friends and physical friends, but rather through physical proximity. This means they know where the people they communicate with are, and, whether the relationships were purely virtual, purely physical or somewhere in between; it is the geographic distance that seemed most meaningful to them. We also learned that though almost all of them had computers at home, most didn't have a computer of their own, even when there were multiple computers in the home. We found this odd. They almost all had cellphones, though, and used cellphones for private communication, especially through texting. Lastly, from the journal itself we learned of that the ability to express oneself is an important part of all the designs, and collaboration (not just communication) is commonplace, like doodling.

Conducting research on-site

Usability Test
This was our least useful research method. We placed a group of students in front of two different brands of netbooks using different types of Linux operating systems. What turned out to be most interesting was the usability of the physical controls of the netbooks, which was quite informative for the ID students.

What we found was that many of the students for both devices actually had a hard time just turning the darn things on. But once they did, when left to explore they immediately ran to the web browser. When asked what other types of applications they might want, they really couldn't think of anything. Even if there were plug-ins that they used like video and audio they thought of these as part of the web browser itself, which to them is just a gateway to the internet. Furthermore, having physical controls for things like volume were sorely missing from these two devices.

Media exposure and age research

Media, Brand and Other Explorations
During the initial research phase (before our first presentation to Freescale), we also looked into areas that didn't include direct interaction with end-users. A group of students did a study of various trends in design: gaming, fashion, web, and television.

While Freescale placed "netbooks" as a device somewhere in between a mobile device and a laptop, our analysis suggested that "netbooks" should be a completely new category. This would be like game consoles which are not on that continuum of mobile devices to laptops at all.

The students doing this analysis also highlighted some interesting facts about the relationship between age and exposure and use of media. There is a huge leap in media exposure of all types when youth turn about 10 years of age, decreasing again as they get older. This meant that it is right at the tween age (one of our core demographic targets) that media awareness and media consumption really takes off and where sophisticated tools & services around media consumption could have heavy impact.

Human Factors
Finally, a group of students investigated the physical ergonomics within this age group, especially concerning the use of smaller devices. They discovered that a conventional small clamshell laptop is most comfortably used lying down in bed with the device on the thigh when the knees are kept up.

High School Students
We conducted a similar photo journal and interview session with high school students. Because these studies occurred after the official presentation of research to the client, this work did not get the same level of modeling. One set of models for the high school students was completed by the ID students, but the IxD class chose to concentrate fully on the middle school students for their design scenarios.

Post-Research Split
After the research presentation the classes split up almost completely, except for specific time periods where collaboration on a consultive level was necessary or advantageous.

Market Analysis

Form factor analysis

Industrial Design Results
Each group proceeded with their own methods for moving from research to design. The industrial designers entered a period that they called "Synthesis." This is a process where concepts are hashed out through group and individual brainstorming, generating design guidelines and criteria directly from the research (either through direct analysis or through inspiration).

Two artifacts came out of this process. The first was an analysis of the markets. The second was a visualization of the possible form factor types and the criteria used to define each type.

Sketches by Colin Martin

Ideation
After the synthesis phase, the designers dove deep into sketching and ideation within the form factors and market breakdowns they defined. Sketching was done first on paper in high volume and low fidelity, followed by mostly foam-based 3D sketch models that communicated key aspects of the final design (usually outside the final materials, colors, and finishes).

These 3D sketch models were taken back to the research subjects and run through a series of simple usability and feedback sessions. Since there was no software running, true task flow analysis could not be done, but important feedback on all the designs were integrated into the final products.

Final Renderings (CAD and Appearance Models)
When looking at these components, it is important for people to see how the physical ecosystem can have deep impacts on interaction design. For example, one core aspect that emerged from the research was the creation of an identification system to be embedded by education authorities, to help monitor and control the use of these devices within the institutional environment. In our public school, this would have been a key requirement for the device to be integrated well into the middle school student's life.

Visualization of design and interaction ecosystem

One student in particular, Win Tangsakulsuthaporn, thoroughly investigated the core aspects of this ID/IxD eco-system. He produced a model to communicate an area where he saw a rich opportunity space, which clearly demonstrates the need for interaction design to be partnered with industrial design, rather than running parallel to it, in order to give the complete interaction design ecosystem the attention it deserves.

IxD research

Interaction Design Results
The Interaction Design class concentrated on developing a netbook for tweens, where our richest data lay. We applied to the data a series of standard and custom models based on the Contextual Inquiry process as outlined in the book, Contextual Design, by Hugh Beyer and Karen Holtzblatt.

Some of the less traditional models led to some of the more interesting feedback. For example, Matthew Cole (MFA Student, Graphic Design) invented his own model that presented a matrix of interests that Tweens had within our study.He discovered the following:

• Brand awareness is only nominally present for elctronics/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

Here's a summary of our cultural findings from the student process book (what we delivered to the sponsor, Freescale, at the end of the project):

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.

I would add that this limits the school's opportunities and abilities to be a major contributor to student's social, entertainment and communication space.

Cultural model by Wei-Shin Lai

Flow model by Matthew Cole

The next and last model to be explored here is a flow model that at first glance is very similar to the Contextual Design example, but becomes a Flow > Artifact > Physical model hybrid after some great pixel pushing, again by Matthew Cole. 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 or her home "live" in the user's room, which lends a familiarity and sense of closeness to these devices. A device that enables the most "room activities," while finding their way into other physical spaces the user frequents would be welcomed.

Parallel to this work, I asked the students to incorporate both models as a means of exploring to multiple ways of analyzing and modeling research data. To this end, the students created Personas as discussed by Alan Cooper, Robert Reimann and David Cronin in About Face 3, with the same sense of liberty.

Three personas were created. Two primary personas—Joseph and Emily— were students in the middle school and another secondary persona was a mother of the students, or as mentioned before the "Soccer Mom"—Susan. The personas included the beginnings of scenario stories. Mapped against all the previous models, these stories were at the heart of the exploration of design possibilities to come. A detailed script was created that spoke about the current life of one of the personas as character in the story without our new product or service. Then we included a more detailed story that had the beginnings of imagining this character's world with our wonderful designs.

The pure text narrative served two purposes. The first was to begin the process of envisioning nuanced scenarios through a comic storyboard (which later became a script for a video), and, second, it became foundation of our next major step—Task Analysis.

Here is the final scenario video (photography & narration by Jill Graves):

This video is a tool to help the design team think big and understand all the intricacies and associated complexities of the ecosystem they will be designing for. This video was also incredibly instrumental in bridging the visions between the two separate classes.

Task Analysis
The next major task was to turn the research models into a design solution. We did this by mocking up the persona narratives. Different colors and symbols were used to begin breaking down nouns, verbs, modifiers of the total system and then applying values to that break down. In this way, we dissected the product from the goals and experiences within the story and discovered ways it might fulfill these goals. For example, in the story, it is clear that the product is the conduit for sharing and connecting. What is being shared, with whom and how is more important than the product placement within the story itself.

The next step—mapping it all out—was even more tedious. This is done with a lot of attention to detail and a lot of chart paper. First the team created a visual language using geometric shapes and line types. Each one was given a discrete and absolute meaning. Then, the shapes were used to visualize the paths that people went through with the nouns, verbs and modifiers of the narrative. These maps were used as reference during the next exercise: envisioning the UI itself.

Mapping narratives

Ideation
Five of the six students were tasked with ideating concepts based on the synthesis and analysis work done thus far. Each concept was sketched into various core states using a method of "3" that I've crafted based on the work by Bob Baxley which he covered in his book, Making the Web Work: Designing Effective Web Applications. Baxley breaks down the web experience into 3 main page types: List, Detail and a Form. I've taken the basic framework of that and restructured it against more generalizable terms that match against almost any application type: Entry, Initial Activity, Detailed Activity.

They were asked to focus on one section from the scenario but also highlight an area of concern in the design ecosystem: productivity, social management, or navigation. The research analysis demonstrated that these areas of focus have either been misrepresented in existing systems, addressed poorly, or ignored completely. By focusing on these areas we would have the greatest possibility for innovation.

People familiar with the classic IDEO/ABC News clip, "The Deep Dive," will recognize this approach. Each team came up with a prototype that focused squarely on one of the core issues that came out of their research: security, safety, shopping, etc. The goal then is not to just sit with these individual creations but rather to consider them, mash them, ideate from them as they are then juxtaposed next to each other.

After the initial concepts were critiqued, the students were charged with creating a high-fidelity single screen that told the entire story of their interface. The idea is to create a "photograph" of the interface being used with many states exposed in one image. It pushed them to consider all aspects that needed to be communicated to convey as large a chunk of the core scenario as possible. This exercise encourages the designer to consider all the states that can be reached from a single point in time. Interaction Design is the design of behavior, and behavior can only exist within time. Still images are in direct opposition to that, so why do we create them? Before designers can jump into interactivity, they must first be sure that their frameworks form a solid foundation. It is very hard to jump around and make changes once you put interactivity into your prototypes.

If I just put together a picture of a moment, most likely you will have a screen in its most rested state. This forces the user to "explode the pocket knife" and explore all the wonders inside it. When doing this, every state of that explosion and how they are communicated needs to be isolated and thoughtfully designed.

One of my favorites from this phase was Alex Wang's concentration on the social aspects. His focus on play instead of productivity, while highlighting interrelationships, is demonstrated in his design "Balloons:"

Prototypes
The IxD class was then split into 2 groups, each one with a slightly different task. Group one worked on a UI that focused on a touch interface, while Group 2 created a UI that would not have a touch interface. Each group found one or two ID students to consult with about core aspects of their design's context in the hardware. Both groups also had to create a click-through UI for taking their interface back to the middle school for usability testing. The touch UI seemed more appropriate for a much smaller screen size and alternative form factor compared to the touch-less UI, which went with a more classic laptop style clamshell.

Before they began their prototyping they were tasked to come up with a "parti" as described by Luke Wroblewski in his recent talk at Interaction 09 | Vancouver. Parti is the underlying concept of a design. It comes from architecture, so an apt example might have a parti express the goal of the structure: residential dwelling, commercial retail, hospital, or short-term residence, for example. This can also be translated as a guiding design principle. Luke compares "parti" to the top slice of bread on a design sandwich, where the bottom slice is the set of design considerations. These considerations are the low level constraints that offer both limitations and opportunities.

The Touch-UI team's visualization of their Parti Sandwich

Non-Touch UI Prototype

Touch UI prototype

Usability Testing
Both groups took their click-through prototypes (built in Adobe Flash) back to the middle school we all visited. The touch group presented their UI on a 7" Fujitsu UMPC Lifebook. The non-touch group presented their UI on a 15" MacBook. For the touch group, there was mostly positive results and thus their UI did not change much in the end. The non-touch UI discovered many issues with their mental models, navigation scheme and overall ability to communicate all modes and features of the interaction.

Summary results for the touch UI testing:

• Most students thought the test of Global operating system was very cool
• 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
• 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
• One student suggested that we change the GUI design to be more bright colorful
• Icon size was appropriate for them

Overall, all the students were excited about the Touch-based Global Operating System, proving the success of the concept. However, some parts needed improvement. For example, the top task bar should be more noticeable—many students ignored it at the beginning.

Summary results for the non-touch UI testing:

• The users rarely attempted to activate the corner docks.
• They found alternative paths to communicate. The user often times went to the "recent favs" on the upper right corner and a collaborative sphere called "family stuff "
• The spheres were more of a target for the user than the set interface elements
• The user only found the search bar after maneuvering through other elements in the interface
• Most of the other GUI elements were clear and used easily by the user
• Once the role of the corner docks was understood, the user had no problem using the structure to complete the required tasks
• 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.

Final Video Concepts
The final deliverable for the UI design was a video prototype. This was an animation that demonstrated the core features of the user interface for each UI. Both tried to follow the path of their UI through their scenario, hitting core functional elements.

Touch UI Video:

Non-Touch UI Video:

Final Client Deliverable & Presentations in Taipei

The client came to our final class where the students presented their work to their professors and to the client. We also gave Freescale a process book which illustrates, in detail, all the work done by both classes.

Freescale wanted to bring 3 students to the Computex conference in Taipei, Taiwan shortly after the quarter ended to represent both classes and present all the student work to the press, current and potential customers, and partners of Freescale. This led to worldwide attention from the global technology and design press and companies in the netbook space.

In total, both the school and the client are quite thrilled with the outcome. In fact, Freescale wlll be continuing its relationship with the Industrial Design Department here at SCAD, sponsoring classes across the entire term.

The final design

Reflections
This project was an invigorating experience for me as a teacher. I was project managing a true client engagement while teaching core fundamentals of interaction design. My students rose to the challenge and I could not be happier with the results, especially given the many constraints. For the students, the result was a top-notch educational experience, grounded in real world concept design—students shine when they feel like the work they are doing is connected to the world.

In the SCAD Industrial Design Department we strive to maintain a strong connection with real world industry through these sponsored classes. We do 6-8 of these a quarter, when possible, and most of them have led to amazing outcomes for the school, the sponsors, and the students involved. If your organization (for-profit, non-profit, or start-up) feels you can benefit in areas of design research, design strategy, industrial design, marine design, interaction design, service design or design for sustainability, feel free to contact us!

Credits:
Interaction Design Grads: Alex Wang, Charlie Gongora, Jill Graves, Matt Cole, Quianru Zhang, Wei-Hsin Lai

Industrial Design Undergrads: Brad Fenning, Bryan Hemenway, Cody Rexrode, Colin Martin, Gunter Watkins, Julian Romero, Liz McKibbon, Mason Pfau, Trevor McKay, Win Tangsakulsuthaporn, Zarni Ko

Professors: Dave Malouf, Verena Paepcke-Hjeltness

Dave Malouf is one of the primary founders and the first vice president of the Interaction Design Association, which held the organization's first IxDA conference at SCAD in 2008. He was previously senior interaction designer for Motorola Enterprise Mobility where he designed software, webware and hardware interactions and interfaces. In his more than 15 years of experience, Dave has developed his expertise in interaction design, information architecture, user interface design, project management and client technologies. In addition to writing for his widely read blog, Dave has been published online and in print on topics related to interaction design. He also teaches workshops on design.

More: Featured Items • Comments (6)