Sheila Crosby · Task 2: Site Visits Task 3: Document Results and Analyze Data Phase B – Document and Design the Cello Solution Task 4: Develop a Cello Use Case Catalogue and Wireframes

2006 - present

Sheila CrosbyPast Project Work

1997 - 2004 2004 - 20061992 - 1997

Geomagic Dental Chairside Solution – “Cello”

Geomagic Project Objectives

The objectives of the project include:

• Understanding the dental workflow and associated tools

• Defining the top-line requirements for dental CAD/CAM software, focusing on the chair-side experience

• Producing a click-through demonstration of the key use cases of Cello as defined by the design research

• Providing a UI analysis of Piano with design recommendations for the visual language of the software

Long term, these objections should:

• Improve the efficiency and productivity of dentists and dental assistants using Geomagic software

• Identify the value proposition of this product in the marketplace including pain points of existing products

• Improve the acceptance and satisfaction of dentists and dental assistants using Geomagic software

• Provide a visually simple and logical UI experience through the proposed Cello solution

• Reduce the learning curve for novice users and other dental personnel

• Provide Geomagic with a robust platform on which to customize for their client

Geomagic Project Approach

Phase A – Research – Validate and Inform the Dental WorkflowTask 1: Kickoff and Study PreparationTask 2: Site VisitsTask 3: Document Results and Analyze Data

Phase B – Document and Design the Cello SolutionTask 4: Develop a Cello Use Case Catalogue and Wireframes Task 5: Apply Visual Language to the Piano UI & the Cello Wireframes with Skinning OptionsTask 6: Finalize Cello Click-Through DemoTask 7: Document High-Level Design Direction

April 20, 2007

Project overviewHumanCentric

April 20, 2007

Overview & Philosophy• HumanCentric's overarching philosophy to designing a successful user interface is to follow a classic User-Centered Design process wherein the key users are observed and iteratively consulted in order to validate, confirm, or deny the efficacy of existing interfaces and prototypical concepts.

• Specifically, the user's goals, tasks, and requirements must be defined and understood within the context of their usage environment.

• Mapping the goals into the work environment then serves as the focus and basis for all parts of the interface design program.

• Consistently referring back to those users through feedback and testing loops, as well as referencing the overall workflow of that user results in an end-product and system that was truly built around and in support of the user.

The teamSheila Crosby, Project Lead

XXX, Sr. Interaction Designer

XXX, Sr. Human Factors Specialist / Researcher

XXX, Graphic Designer

April 20, 2007

Define Research Goals

Define research goals

Gather chair-side user requirements including function, workflow, and competitive advantages

Conduct Task Analysis

Identify Gaps

Identify main user-facing use cases

Identify structure of UI workflow through those use cases

Research process

Observe and walk-through Glidewell dental labs

Conduct contextual research with local Cerec users

Observe competitive products in dental offices

Conduct contextual research to uncover gaps in a product landscape

Identify the goals and the users who can help you meet those goals

Offer incentives that motivates them (trial versions of SW, beta testing)

April 20, 2007

Task AnalysisWhat tasks are involved with each main task?

• Patient Check-In• Registration• Equipment and software are prepared for patient’s visit• Patient enters room• Assistant prepares teeth for restorative process• Mouth or mold is scanned• Patient data are imported into software processing module• Software models all surfaces and planes• Dentist or tech uses software to render 3D object model of the restorative piece• Piece is milled• Technician hand polishes final piece• (Piece is sent to dentist)• (Patient re-checks in, patient’s room and equipment are prepared for procedure)• Assistant prepares the mouth and tooth for restorative piece• Piece is fitted to tooth• Dentist checks for comfort• Patient Check-Out and payment• Patient follow-up• Insurance filing

April 20, 2007

Identify Gaps Consider information such as:

• How can the digital dental market improve your processes?

• Show me your physical environment.

• Describe the users in your environment.

• Show me the interaction between your users and the equipment.

• Describe the flow from patient check-in to check-out for a restorative process.

• Show me that process.

• What of this process should be digital?

• What should not be digitized?

• What processes take all of your time? Why and how could something improve that?

• What tasks should be multi-tasked and which should not?

April 20, 2007

Design

• Analyze research findings and incubate on what was learned

• Brainstorm ideas with product team

• Sketch office / lab workflows

• Sketch wireframes of primary software tasks

• Refine workflow through main use cases

• Apply a primary graphical look & feel

• Storyboard the main software workflow

• Develop an interactive demo (Flash)

April 20, 2007

Field Testing

• Bring storyboard and Flash demo into the field

• Assess market reactions and feedback

• Incorporate feasible changes

• Continue to refine the design in detail

Document

• Document all research findings and design recommendations

• Deliver use cases and wireframes of the main use cases

• Document graphical styles and guidelines

• Work with product marketing to define technical specifications as needed

Next Steps

• Schedule field visits

• Prepare discussion guide and goal statements for field researchers

Geomagic Cello SW Research & Design Summary Report

HumanCentric’s contributions to the chair-side project will address the following objectives:

To study a small number of dental practices and labs to understand how chair-side systems (Cerec 3) are used and have been integrated.

To define a UI that is unique yet supports the main task of building and finishing a case with ease and minimal effort. The largest amount of screen space should be preserved for the view of the CAD model and the periphery of the screen can be populated with a small number of tools, instructions and status.

To define the goals for the application:

The program should be easy to learn, responsive to user inputs and relatively feature-light to reduce potential confusion on the part of a busy dentist and dental assistants.

To propose various color palettes and a potential visual design that is modern, approachable, simple and that gives the appearance of belonging in the dental environment.


The observed steps in the dental office included:

File menu > Straighten insertion axis “This will help me define the way that I insert the crown.”

Draw margin line, “this is so hard to find because the prep line is so close to the gingival."

Dentist changed the view from the default putty color to grayscale “this view helps me see more detail and get better contrast” when drawing the margin line.

Next, she changed the “angulation of the prep line” to see if it “fell off.” She used the mouse and double-clicked on the left-select button a number of times to complete this task.

In the meantime the hygienist swabbed and cleaned powder off of the preparation then left the room. “What's so awesome about Cerec is that this view {of the tooth} is so large.”

The dentist applied a red dot to one of the sides of the restoration to designate where the tooth should be placed in relation to the neighboring tooth.

Next, she chose the Adult Anatomy from a list of anatomy libraries. A proposed tooth instantly appeared on-screen.

Next, the dentist…


The steps for processing a case in the lab appeared to be:

Shipment arrival from dentist office

Create a mold from the bite impression

Create a die-cut from the mold

Send the case to the in lab workstation if the doctor’s order specifies a Cerec case

Lab technician scans the die-cut using the scanner incorporated into the Cerec mill

Lab technician starts a case in the software

Select a scan image from which to design a coping

Edit the design to the technician’s specification (shrink, rotate, move, grow)

Position the appropriate material block in the mill

Send to mill

Glazes and colors to doctor’s specifications

Ship to dentist


SW can be grouped into the following macro-categories:

Common 3D design software such as: Solidworks, Rhino, Alias, ProE, and AutoCad

Toolbars and various buttons frame the main screen design area – sometimes on all sides of the

main screen area….

2D design software including Adobe Photoshop, Adobe Illustrator, Visio, and Macromedia Flash

Anchored and unanchored windows surround the left and right main-screen area.

These windows provide access to…

Common ‘stepwise’ and ‘linear’ processes:

Software installations, online checkouts, self-checkouts, airline check-in.

No menus in the top header...

Geomagic Summary of SW Design

It was agreed upon that Cello’s framework should fall into the ‘stepwise’ and ‘linear’ category.

One of the many goals in designing software for the chair-side environment is to be as intuitive and

straight-forward as possible – yet accurate and time-saving.

The dentist will most likely be the purchaser of this system and will expect their staff to interact with the

software. All office staff is likely to attend training in order to understand the system and all of its

capabilities. After gaining the dentists’ confidence in the system, there is the obvious trend toward

training the hygienists and perhaps assistants to use the software.

The degree of uptake will depend on the quality of the milled design. If the restoration is deemed to be

of high quality (aka, its quality is on par with lab-milled pieces), commitment to a chair-side system will

come easily.

Geomagic Summary of SW Design

The Cello user may exhibit the following traits that are important to consider in the system design:

An early adopter who is not averse to new technological developments

Considers herself well-read in these technological developments

Considers herself able to successfully design a CAD/CAM restoration

Regards their patient’s time and convenience as main priorities, sees the benefits of chair-side restorations

Performs multiple crown restorations per week and would find a chair-side system to be cost-effective

Works in an office with multiple dentists like herself, where a chair-side system would be shared

Is convinced of the quality and accuracy of a CAD restoration design

Can find a few minutes in the course of a procedure to interact with the CAD software

Geomagic Summary of SW Design – User Characteristics

The schematic below presents a conceptual software workflow (at high level) for the Cello product. The steps are short, simple and provide the user with the appropriate level of feedback at each stage.

Geomagic Cello - User Workflow

The chair-side software workflow should be as fluid and automated as possible in order to support the goals of simplicity and power.

High-level tasks and certain sub-tasks are listed in the table below.

User requests proposed tooth design from a specific set of dental anatomyUser inspects and views the proposal from all sides and all anglesUser moves the entire margin line up, down, left, or rightUser moves a portion of the margin line up, down, left, or rightUser grows the entire tooth by small incrementsUser shrinks entire tooth by small incrementsUser nudges the tooth in a plane by small incrementsUser rotates the tooth on an axis by small incrementsUser rotates the canvass using a rotation toolUser changes the plane view of the tooth (top, sides)User un-does last edit or actionUser re-does last edit or actionUser views diagnostic information regarding acceptability of the designUser views contact map showing proximity of the contacting teeth

Review proposal

User makes selections from available parameters for defining the anatomy databaseUser previews a generic model of tooth anatomy from each database

Select Anatomy

User identifies specific areas of the scan (e.g., gingival, stump)User hides an area of the scanUser shows an area of the scan*note, this step will likely be automated by the Cello software

Label the Model

User reviews and inspects the proposed margin lineUser moves or resizes the entire margin lineUser moves or resizes a specific area of the margin line

Review the margin line

User browses to or imports scan dataUser invokes the desk-side scan procedureUser captures a scan of the bite impressionUser approves the scan and proceeds to the next stage

Get Data

User launches softwareUser starts a new patient caseUser inputs case information, selects type of restoration, selects tooth (teeth) numbers and inputs notes.

Start New Case

Sub-tasksHigh-level task

Geomagic Cello - High Level Use Cases

New case OpenSave User rotates the canvass using the rotate User pans the canvass using a pan toolUser zooms in or out using a zoom toolUser saves the case design and progressUser opens a saved caseUser edits case information

Global tools

After consideration of competitor software and in consideration of a small number of crown restorations, we propose the following observations / recommendations:

Cello’s UI should allow the maximum amount of screen space available for the view of the 3D object.

The steps that the user must take should be guided through a next / back wizard metaphor.

The user needs the ability to make fine adjustments to the size and position of the proposal.

This can be done by enabling small incremental changes supported with very simple, single-clicks

on the tooth itself or on neighboring buttons.

Overall, the user’s time required interacting with this software is minimal (and comparable to Cerec’s

chair-side system).

Geomagic Cello - User Interface Design Goals

LabelingThe use of intuitive and meaningful labels…

System StatusIt is a good idea to provide a clear-cut and visible indication…

TimingAllow the user to…

TonesIt is recommended that tones…

Hardware considerationsBecause patient rooms tend to be small…

Geomagic Cello - Global UI Recommendations

Geomagic Cello - Wireframes

Geomagic Cello - Detailed Screen Flows

Geomagic Cello - Visual Layout Concepts

Geomagic Cello - Visual Language Concepts

Geomagic Cello - Visual Language Concepts

Geomagic Cello - Final Visual Language

New Case Select a Tooth Anatomy

Review Crown Proposal Send to Mill / Save

Geomagic Cello - Iconography

Icon Style Sheet Final Cello Icon Language

Geomagic Cello - Technical Specifications

Geomagic Product on the Market

Cisco Media Solutions Group – BBC Project


Support the creation of a next gen concept UI for a Web 2.0 experience featuring BBC content and showing

potential use cases of a small group of individuals as well as BBC content producers.

The design goals of the BBC:

Search and navigation of large volumes of BBC Archive content

Management and moderation of user contributions, including user-tagging and user recommendations

What does the BBC Archive look like to an end user – how do they find content?

What does the BBC Archive look like away from bbc.co.uk?

How could this content be commercially exploited?

These solutions may also cover one or a range of the following areas:

User interface design

Search and navigation

Personalisation and presentation

Integration of social networking utilities

DRM approaches

Cisco Project Objectives

Cisco Project Approach

Cisco BBC Project - High Level Flows

Discover

Discover Landing Page 1. The first time user visits the site…2. The user selects a program…

Discover Related Tab Playing3. The content plays…

Add to Collection4. The content plays…

Add to Collection Popup5. A pop up window appears…

Discover Contributions Tab6. User selects the Contribution tab…

Community

Community Landing Page10. The user can manage Messages…

Community Messages Selected11. The user sees that he has...

Experience

Experience Landing Page7. The user decides…

Share Tab8. Share with a single friendThe user drags the media…

9. Share with multiple usersThe user selects the friends…

Content Producer Flow

Discover

1. Identify Audience through…2. Characterize the Audience by

retrieving…

Community

5. Track the results of content…

Experience

3. Refine Audience based on…4. Target the Content…

The full service proposal would have two principal ways of accessing BBC Archive content:

A central point of access –bbc.co.uk/archive. A central repository for all BBC Archive content.

Accessing content “in context” - in searching and exploring online, users of bbc.co.uk might access relevant BBC Archive content embedded within and around existing aggregated content.

Cisco BBC Project – User Role Summary

Cisco BBC Project – Wireframes

Discover Landing Page Discover Playing - Related Discover Playing – Add to Channel

Discover – Contribute – Add to Channel


Experience – Play - Share Community Landing Page

Community Messages


Content Provider Discover Dashboard

Content Provider Experience Dashboard Content Provider Community Dashboard

Cisco BBC Project – Detailed Wireframes

Cisco BBC Project – Visual Concepts



Cisco BBC Project – Visual Concepts Refined

Cisco BBC Project – Final Design - First Time User

Cisco BBC Project – Persona 1 - Neville

Cisco BBC Project – Persona 2 - Jenny

Cisco BBC Project – Persona 3 - Emily

Cisco BBC Project – Persona 4 – BBC Content Producer

Cisco BBC Project – Full Screen View

Cisco BBC Project – Trade Show Presentation

Whirlpool KitchenAid Refrigerator Touch Screen UI


Produce the interaction design and the graphic assets for the KitchenAid 7” LCD (800 x 480 pixels) refrigeration project. Whirlpool already has an interaction design (documented as flows) and graphical assets for a 4.3” display. HumanCentric’s role will be to update and extend the interaction design and to scale existing graphical assets and create new graphical assets as necessary

Project Approach

The existing flows for the 4.3” display are a reasonably accurate representation of the desired design for the 7” display. Interaction design updates (in addition to flows added for new features) will be related to bringing the existing design in line with the KA suite strategy project.

Usability evaluation will be conducted by Whirlpool team members at the Whirlpool facility. HumanCentric will provide a prototype for testing.

The main graphic design work involves scaling existing graphic assets from the 4.3” display for the 7”display and creating graphic assets for new features.

Whirlpool Project Objectives

Whirlpool KitchenAid Reference Materials




Whirlpool KA - Wireframes

Settings

ShavedIce

<

Settings

2oz

8oz

4oz1

Preset

23

<Settings

4 oz

Settings

4

2oz

Settings

4 oz

… …

… ……

<

Settings

4 oz

TemperatureRefrigerator

37º

36º

38º

17º

19º

18º

Freezer

< Settings

4 oz

TemperatureRefrigerator

37º

36º

38º

17º

19º

18º

Freezer

<

Settings

4 oz

Water Filter

The water filter should be replaced soon. Reset the reminder after you replace the filter.

Reset

<

Whirlpool KA - Wireframes

WHIRLPOOL CORPORATION CONFIDENTIAL

RESULTS OF USABILITY STUDYKITCHEN AID LCD USER INTERFACE

65


REACTION TO REFRIGERATOR

66


BEST PRACTICES – WORDING

Do This Not This

Start {action} Start

Upload Add

Photos (if it leads to several functions) Slideshow

Premeasured Water: Set/Off (keep testing it) Free Fill (if used in isolation)

Auto‐Fill (to indicate a continuous flow)

Recommended (to draw attention)

67


BEST PRACTICES – CONTENT

Information architecture must be carefully created.When given a precise recipe name, participants could find it by searching through either categories or names. Without a precise name, the latter approach would likely suffer.

When searching for help information about dispensers, participants had trouble finding the right category.

Vertical scrolling through long text info (like recipes) was mentioned as being desirable.

If users can upload photos, they may hope that recipes can be uploaded too.

If recipes are on the refrigerator, there is an expectation or hope that the cooking settings can be wirelessly transmitted to the oven.

68


BEST PRACTICES – REFRIGERATOR

Provide on‐screen Auto‐fill option and ensure there is a corresponding Cancel button while dispensing.

If “Fill” buttons are needed off‐screen, then ensure they are clearly indicated for ice or water. Ideally, find a way to tell people why they are there (maybe in the measured fill have a on‐screen tip)

69


BEST PRACTICES – SLIDESHOWS

Provide subtle cue on how to wake‐up refrigerator like text in‐between slides. This text could gradually disappear over time.

Provide various slide‐show options such as:

speed

zoom/crop level

adjust crop position

select photos from uploaded sets

70

Whirlpool KA - Visual Concepts

Whirlpool KA - Final Visual Language

Whirlpool KA - Final Visual Language

Whirlpool KA - Final Screen Composites and Graphic Assets



Whirlpool KA - Screen Templates and Assets for SW Development

Features Detail Confirmation Screen

Options Menu Measured Fill Volume Preferences

Temperature Setup 1

WHIRLPOOL CORPORATION CONFIDENTIAL PRESENTATION TITLE

PATTERN INDEX

12 August 2010 PRESENTATION TITLE 78

ORGANIZE SYSTEM INFORMATION

ORGANIZE SCREEN CONTENT

NAVIGATION SUPPORT

INITIATING ACTIONS

DATA ENTRY

STATUS FEEDBACK

WIDGET BEHAVIOR

WORDING GUIDELINES

APPENDIX: SAMPLE TASK FLOWS

WHIRLPOOL CORPORATION CONFIDENTIAL April 30. 2009 PRESENTATION TITLE

ORGANIZATION OF FUNCTIONS/FEATURES


ORGANIZE SYSTEM INFORMATION

The guiding principle when organizing functions/features is breadth over depth. Upon approaching the product, the user should see the core functionality without navigation. If there is not room for them as panel buttons, those functions can be on the first screen in the software. This principle extends throughout the UI – modifiers needed for any given screen should be immediately available.

SOLUTION

Off‐screen buttons

Launcher

Programming

Status

Core functions Cancel buttons

Start buttons

2nd level modes Optional accessories

Core accessories

System setup menu

Value selection

Feedback


LAYOUT OF STATUS SCREENS


ORGANIZE SCREEN CONTENT

As a general rule, the status screens should provide the user information regarding: current mode, current state of mode, current state of cook and/or kitchen timer, current state of other cavities (if applicable) and the current time (clock). The layout of the information should maintain diagonal balance.

SOLUTION/EXAMPLE

12:34 pm

Crushed ShavedCubed Free Fill Premeasured

1

2


NAVIGATING THROUGH LONG DATA SETS


NAVIGATION SUPPORT

A. Allow vertical scrolling.

Paging vs. scroll bars

Pagination is used very well in instances where information is fairly contained within itself as “pages.” In instances where the information does not stand alone as well, the suggestion is to employ vertical scrolling.

Vertical vs. horizontal

Western culture uses a top‐down approach to reading which provides support for using vertical scrolling in the interface when the data needs to be read by the user.

B. Show current location.

The example on the right demonstrates how the UI provides, to the user, their current location within the scrolling of the data. This provides the user an idea of how much information is available in the scrolling view.

There are several scenarios where one data set cannot fit on one screen. These include long recipes or pieces of help information. The user needs a method to view the complete data set and not get lost.

SOLUTION EXAMPLE

Recipes

• 1 package active dry yeast• 1 tsp sugar• 1/4 cup warm water (105º to 115ºF)• 3 1/4 to 3 1/2 cups all purpose flour• Either 1 tbs chopped fresh basil Or dried basil• Either 2 tsp chopped fresh thyme or dried leaf thyme• 1 tsp fresh minced garlic

DoneView Steps

1 of 2


SELECTING MUTUALLY EXCLUSIVE CHOICES

82

DATA ENTRY

A. Use backlit control panel buttons for primary options.

The control panel provides a visible area for users to make their first (primary) selection. Once selected, the panel button should be lit/highlighted to represent its active state.

B. Use onscreen radio buttons to select modifiers.

Once a control panel button has been selected, the modifier should be presented on the screen with the most “used”modifier in the most prominent position.

C. Use popup menu to select modifiers when space is limited.

If there is limited space to display all modifier or if the number of modifiers are not readily accessible, a popup menu should be leveraged to provide options in a reasonably shallow fashion.

The user is often to ask to pick one of several competing alternatives. Examples:

Selecting a primary mode or cycle for the appliance to follow (i.e., Bake vs. Broil)

Selecting a modifier of another option (i.e., Cubed/Crushed/Shaved ice)

SOLUTION EXAMPLE

PhotosRecipes Options Use & Care

Crushed ShavedCubed Free Fill Premeasured


VIEW SWITCHER


WIDGET BEHAVIOR

This widget is similar to Tabs in that both allow the user to switch between views. However, Tabs show different information content, whereas the View Switcher shows the same information content but formatted differently.

The view is switched when a finger‐down event is detected on view switch. If the touch view is already selected, then nothing happens.

When the user switches between the two views, the currently selected value should be maintained as close as possible as explained in the following scenarios:

Numerical Transfer. For example: if the user enters 425 on the keypad view and switches to preset view, then 425 degrees should be selected.

Unit Transform. For example, if the user selects 64 ounces then switches to a cups view, then 8 cups should be selected.

Approximation. If no exact transfer or transform is possible, then select the nearest value. For example, if the user selects 63 ounces then switches to a cups view, 8 cups should be selected (if the precise 7.88 cups is not an option).

The View Switcher provides the option for the user to view or interact with the same data set in multiple ways. It could be used to change between different input methods or different units of scale.

BEHAVIOR EXAMPLE

Photos

Ice

Crushed ShavedCubed

Water U

Select refrigerator feature

Whirlpool Currently on the Market




Thanks!Questions?

Sheila Crosby · Task 2: Site Visits Task 3: Document Results and Analyze Data Phase B – Document and Design the Cello Solution Task 4: Develop a Cello Use Case Catalogue and Wireframes

Documents