Tactile Dashboard A lo-tech project management tool that relies on the use of simple touchscreen technology and a user interface to promote visualization and interaction with project practices.
Project Identification
Project Identification Background
Amuneal Manufacturing, a metal fabrication company in North Philadelphia, and UArts MID began a design collaboration in September 2008. Using design thinking methods and practices as a new management tool, our team was asked to focus on the project practices of the Client Delivery Teams. After working with the Amuneal team for a semester, one area of opportunity we were interested in was the process a job goes through from quote to installation.
Project Identification Target Audience
A handful of key players were chosen by the CEO to meet at our studio to discuss their internal process. Characteristics of our target audience (both staff & CEO) include: • • • •
mid 20’s-mid 30’s Urban lifestyle Design-minded Technologically-advanced
Project Identification The Needs
Number of employees that identified specific issues relating to project management data gathered during initial interviews
10of15
8of15
7of15
5of15
5of15
Bottleknecking
Responsibility
Interruptions
Quoting Process
Communication Gaps
Early research, informed by interviews, highlighted important areas the staff raised concerns about or expressed interest in changing. It became clear that various forms of communication could be improved and ultimately enhance work flows.
Project Identification The Needs
As gaps push back a project, when does a project lose its profit ?
When in the process do client confirmations occur and what forms are used to document this?
When and why do gaps occur? When does a project become profitable?
After a 4 hour meeting with Amuneal, both the staff and our team had unanswered questions regarding the process they defined. It became clear that the staff did not have a collective understanding of the overall process or a catalog of processes based on the type of job. Many individuals were also more concerned with completing their segment of the process than the whole.
Are costs incurred by changes to the project by the customer communicated and passed on to the customer?
How do interruptions caused by gaps in the process affect employee morale?
Project Identification The Goal
Our goal was to create a learning tool for Amuneal to visualize their complete process and understand the effects of changing a project schedule. A more efficient method of tracking the process helps to close gaps, promoting clarity, which will ultimately streamline work flows. A record of Amuneal’s processes will help build a catalog based on job type for future reference. Intervention Observation
Intervention Observation
Project in Design Concept
Project out 1
2
Intervention Observation
Intervention Observation
Project Identification The Context
Currently group meetings, held around team member desks, occur weekly to review job status within the Client Delivery Teams. As an alternative, we would like to encourage more communal meetings in the conference room, where staff are removed from disruptions and all the project players can participate.
Research
Research
Existing Designs
Balanced Scorecard from idashboards.com Many existing project management interfaces are cluttered and often require a learning curve to use.
Research
Existing Designs
Manufacturing Dashboard from idashboards.com This sample is specifically geared towards manufacturing facilities, but the information is very abstract.
Research
Existing Designs
Call Center Dashboard from idashboards.com Some existing software takes the idea of the dashboard literally. Segmented visuals and varying types of graphs make it difficult for the user to find connections within the given information.
Research
Existing Designs
Production Scorecard from idashboards.com Also, none of these designs are created to be tangible, focus on the process, or display individual projects.
The Design
The Design
The Technology
Technology developed by Johnny Lee, a Human Computer Interaction Researcher at Carnegie Mellon University, made our project feasible.
computer is connected to projector
Projection Surface
The Design
The Technology interface is projected Projection Surface
The Design
The Technology Wiimote is set at 45o angle to the projection surface Projection Surface
The Design
The Technology Wiimote is calibrated to the computer Projection Surface
The Design
The Technology Infrared pen is used to calibrate Wiimote to projected surface Projection Surface
The Design
The Technology Ready to go! Infrared pen can be used to control the computer Projection Surface
The Design
Size & Placement To determine the most comfortable placement and size of the projection, we measured the highest reach of a short person and the lowest reach of a tall person.
Projection Surface
80”
High reach of a 5’ 4” person
65”
Projection
Low reach of a 6’ person Ground Surface
The Design
Medium Constraints
Infrared Pen: Unlike a mouse, the infrared pen only has single click control. When designing the interface, it is important that the mouse over command can not be used.
Wiimote: Set at a 45o angle to the projection surface, the Wiimote works best when placed to the right for a right-handed person, left for a lefthanded person and above the surface facing down for users in both groups.
Projection: Bright and light colors appear better than dark colors.
The Design Prototyping
We created a concept map of the features we definitely wanted the first version of our interface to include and possibilities for future versions of our interface.
The Design Prototyping
Wiimote Dashboard
-
-
-
-
-
-
-
-
Pre-Sales
Pre-Eng.
03.30.09-04.03.09
Engineering
Manucaturing
Client Review
04.06.09-04.10.09
Delivery
APR06.2009
04.13.09-04.17.09
04.20.09-04.24.09
04.27.09-05.01.09
Client Name #0000 Project Lead: Name
Client Name #0000 Project Lead: Name
Client Name #0000 Project Lead: Name
Client Name #0000 Project Lead: Name
Client Name #0000 Project Lead: Name
Client Name #0000 Project Lead: Name
Client Name #0000 Project Lead: Name
Client Name #0000 Project Lead: Name
+
These images show the progression of our design from ideation to wireframing to the first prototype of a tangible dashboard. These steps were important in our process. Asking for feedback from users similar to our target audience taught us how to make our design more user-friendly: • In the examples above, we emphasized the current date too much. We needed to consider screen real estate. Because the people icons and the process bars are the most important, functioning, features of our design, the majority of the screen real estate needed to be devoted to these pieces. • The calender was set up by week start and end dates, and months were listed by number rather than name. This put the responsibility on the user to discern the day number of the middle weekdays and to convert month number to name. We removed this barrier by placing the day number above each corresponding block and by showing the month name. • Although a black background looked nice on the computer screen, when projected, it was not as effective. Since dark colors absorb light, and light colors reflect light, we decided we needed to use more light and bright colors.
The Design Prototyping
We spent a day projecting our design at the desired size and making changes until it was just right. We also tested it with varying qualities of light to ensure maximum usability.
The Design User Interface
User Interface we designed and developed
This is our final concept.
Human Design Principles
Human Design Principles Interactivity
“...interactivity is the concept of control, either of elements of the physical world or of information� (Lombard and Snyder-Duch 2) In the case of our dashboard we designed only seven interactive elements in an effort to minimize cognitive load. These seven actions guided the overall layout and content of our interface. 1. Drag & drop
2. Project naming
3. Stretch & Shrink 4. Move calendar 5. E-mail, trash
6. Project priority
7. Rearrange project phases
Human Design Principles Affordances
“Affordances can be explained as action possibilities that [humans] have in the environment. ...An affordance exists relative to [the] properties of the environment and ... the action capabilities of a [human]� (van Vugt et. al.5).
Human Design Principles Affordances
Achieving an interaction relies completely on the user’s decision to mentally connect with an interface icon or not. The most effective way to encourage this is to use humanlike characters in the design of an interface (van Vugt et. al. 2-3). Because people identify most with other people, we chose to represent process phases by people icons.
Human Design Principles Affordances
Further user interaction and engagement is strengthened by bolstering the user’s perception of what a character icon affords. This can include three-dimensionality, shadow, and highlights.
Human Design Principles Cognitive Load
“Because working memory resources are limited, novices may become distracted by irrelevant aspects of a problem, to make errors during problem solving� (Lewis 2). All aspects of the design of the Dashboard were chosen to lower the cognitive load for the user with the intent of minimizing probability of an error.
project being currently worked on- brightest, most opaque, blue highlight
active projects that are not being currently worked on- colorful, but less opaque
We achieved this by emphasizing the most important functioning graphic elements with color and structure. As elements decrease in importance, we made them less detectable through more subtle color and lower opacities.
unfilled projects- greyed out icon, no color, least opaque
Human Design Principles Cognitive Load
We also applied just detectable (JD) design to background and supporting elements. Just detectable designs are elements that recede to the point of minimal detection. This allows the user to concentrate purely on the functional and informational design features, lowering the cognitive load. We achieved this by having one person adjust the color and the other person, when looking at the projection, call out when the element was noticable. The calendar function to the right indicates to the user that the arrow can be pressed and the calendar will slide beneath the line. However, this function is not the most important, so it is not immediately detected.
JD– “Just Detectable�
Human Design Principles Sensory Affordance (tangiality)
Human reaction time to audio signals is faster than reaction time to visual signals, and repetition of these audio signals greatly strengthens future response times (Kosinski, 2). In the case of our dashboard, providing audible feedback to correspond with physical actions was essential for supporting perception of tangibility. It was important to consider the intended goal of our user when designing the sound. To prevent distracting the user, we only used sounds as an informative means. “A business user will more likely be seeking information, so a simpler audio environment may be appropriate” (Walker and Kramer 3). To augment our visuals, we chose sounds with a friendly tone to confirm user actions. Placing a person icon over a project line results in a dropping sound, after which the corresponding colored bar appears. The same sound indicates a colored bar has been reordered. Since a full project is “heavier” than a portion of the project, a slightly deeper drop sound is used for project priority placement. A crumbled paper sound is used when a project or phase bar is trashed, and a swooping sound indicates movement of the calendar. The aim is to have the sounds mimic what the user would hear if performing similar actions in a natural environment. Appropriate sounds are also used for the print, e-mail and help functions.
3
4
2
1
Human Design Principles Sensory Affordance (tangiality)
The most important audio element in our interface is the sound made when a bar is stretched or shrunk. As the user stretches or shrinks a colored bar over each day, a click noise is made. Not only will this help the user to line up a project to the correct day, but it will also inform the user audibly of the number of days a project is lengthened or shortened. We considered cultural stereotypes for these actions. “...In Western music major scales may be taken to represent ‘good’ or ‘positive’ or ‘correct’ ideas; minor scales may represent ‘bad’, ‘sad’ or ‘wrong’” (Walker and Kramer 3). Although we do not want to use sound to alarm the user, slightly different click noises are used when a project is lengthened and when it is shortened. A click in the major scale indicates shortening a project, while a click in the minor scale indicates lengthening a project.
5
Human Design Principles Epistemic Actions
An epistemic action is an action a user takes to alter his environment and facilitate cognition when executing a task (Fjeld and Barendregt 1). There are three ways an epistemic action can enhance cognition: • Reducing the memory involved in mental computation • Reducing the number of steps in mental computation • Reducing the probability of error of mental computation Epistemic actions have been an important component of interfaces for years. In the game of Tetris, users command the rotation of a brick to determine its correct position. Visual representations (Numbers 1, 2, 3) show what the user would have otherwise had to mentally compute and interpret. These epistemic actions allow the user to apply less cognitive effort but achieve more efficient results (Fjeld and Barendregt 1).
1
2
3
Human Design Principles Epistemic Actions
By imagining a simple project timeline scenario, we can investigate how the Tactile Dash supports epistemic actions and facilitates the user’s cognition:
Bob
Sue
Tom
Human Design Principles Epistemic Actions
But Bob needs 2 more days to finish his part before he can hand it off to Sue!:
Bob
Sue
Bob notifies Tom, but now Tom needs to figure out the new project timeline
Tom
Human Design Principles Epistemic Actions
Original Project Timeline
Bob
Sue
Tom
New project timeline
Bob
Sue
Mental Computations Tom Would Need to Do Without Tactile Dash 1 Original 2 days + 2 additional days for Bob
Tom
Human Design Principles Epistemic Actions
Original Project Timeline
Bob
Sue
Tom
New project timeline
Bob
Sue
Mental Computations Tom Would Need to Do Without Tactile Dash 1 Original 2 days + 2 additional days for Bob 2 2 Weekend Days during Bob’s Portion
Tom
Human Design Principles Epistemic Actions
Original Project Timeline
Bob
Sue
Tom
New project timeline
Bob
Sue
Mental Computations Tom Would Need to Do Without Tactile Dash 1 Original 2 days + 2 additional days for Bob 2 2 Weekend Days during Bob’s Portion 3 Sue’s Portion Lost 2 Weekend Days
Tom
Human Design Principles Epistemic Actions
Original Project Timeline
Bob
Sue
Tom
New project timeline
Bob
Sue
Mental Computations Tom Would Need to Do Without Tactile Dash 1 Original 2 days + 2 additional days for Bob 2 2 Weekend Days during Bob’s Portion 3 Sue’s Portion Lost 2 Weekend Days
4 Tom’s Portion Gained 2 Weekend Days
Tom
Human Design Principles Epistemic Actions
Original Project Timeline
Bob
Sue
Tom
New project timeline for Tom
Bob
Sue
Tom
Mental Computations Tom Would Need to Do Without Tactile Dash 1 Original 2 days + 2 additional days for Bob 2 2 Weekend Days during Bob’s Portion 3 Sue’s Portion Lost 2 Weekend Days
4 Tom’s Portion Gained 2 Weekend Days Instead, with the Tactile Dashboard, this can be achieved with 1 epistemic action of sliding the bar, reducing the memory needed by the user and the probability of error. This illustrates an important feature of our interface. It will be programmed so that when any project is extended over a weekend, two additional days will be incorporated in that phase to account for the two weekend days that work is not being completed.
Human Design Principles
Cognitive Artifact + Change Nature of the Task
A cognitive artifact is an artificial device that enhances the user’s cognitive ability by representing information that would otherwise have existed in the user’s mind. According to employees, Amuneal does not have a company calendar or a clearly outlined process, and job responsibilities are often confusing. The dashboard acts as a cognitive artifact because it organizes and makes visual information that the user would traditionally need to compile mentally. Not only does our design allow the information to be accessible in one place by the entire team at Amuneal, but it is also instantly changeable in real time. Having touchscreen capabilities further supplements the user’s cognitive processes, because the user can directly act with our interface to produce desired results. Unlike the Tetris example, our user does not need to convert his desired actions into a keyboard command to make the same results happen. “[Tangible User Interfaces] offering tangible objects that can be physically manipulated may offer more cognitive support than interfaces without these objects because they support epistemic actions” (Fjeld and Barendregt 1).
Human Design Principles
Cognitive Artifact + Change Nature of the Task
Cognitive artifacts also change the nature of the task. With the Tactile Dashboard, the nature of the task is changed in 3 ways: • Instead of trying to envision the process and discuss changes, an individual can focus on physically participating in the meeting. • The user does not have to take notes or remember the details of the project responsibilities. Instead, he only has to remember to get a copy of the updated timeline. • The overall project responsibility and understanding moves from individual to collaborative.
Human Design Principles Granularity
Two objectives in designing the Tactile Dashboard are to help the staff understand the overall process and to make our interface free of clutter. Therefore, we chose to use a granularity of one day. This allows the staff to see one month full of projects on any given screen. Many of Amuneal’s jobs have short lifespans, lasting only a few weeks, so this allows for the entire process of most projects to also fit in this area. Although we understand the importance of more detailed information, such as hourly deadlines, we felt including more detailed information on the first iteration of our application may cause the staff to miss the bigger picture. Transferring between daily and hourly information may also require a learning curve, which we felt may discourage the user.
Human Design Principles Granularity
The user can move the calendar to the left or right by pressing and holding the corresponding arrow next to the calendar. The calendar and project bars move by day at first but progressively move in larger chunks of time. At the fastest speed, the calendar moves by month until the user releases the button. Between each frame movement, there is a .2 second delay. This number has been determined based on user study reaction times and user testing. It has been generally accepted that the simple reaction time (one stimulus causes one response) for a person 20 years of age from a visual stimulus is 190 ms and from a sound stimulus is 160 ms (Kosinski 2).
1 day
1 day
5 days
mo. start
Human Design Principles Scaffolding
Supportive Scaffolding helps the user learn to achieve a certain task when working with a design. As the scaffolding fades, the task remains the same, but the user retains the information (Jackson et. al. 3). Since our design only allows 7 different types of actions by the user, and it is intended to be intuitive, we felt scaffolding could be kept to a minimum. There are three types of scaffolding in our interface. The first is a welcome screen that is present for the first twenty seconds the interface is open. This scaffolding is meant to guide the user. The capability for the user to close the dialogue box one time or permanently allows the user to be in control. It was important not to make this dialogue box fade after the program is opened several times at Amuneal, because a new team member could use the program at any point.
Human Design Principles Scaffolding
Coaching and modeling scaffolds are supportive scaffolds that are initiated by the user. “They are invoked through contextualized help buttons..., usually “?” ... they display explanations and examples using both text and pictures. Being passive scaffolds, these buttons ... are faded simply through not being invoked” (Jackson et. al. 3). When unsure how to control a given function using the Tactile Dashboard, the user can simply drag the question mark icon over the function to learn more. A dialogue box will pop up with a diagram showing and explaining the proper control.
The same dialogue boxes will also open as a suggestion if the user is repeatedly clicking around an icon without a result.
Drag
Human Design Principles Graceful Degredation
One characteristic of Interactivity is graceful degredation at the end of a dialog. When a user chooses to close our application, it will reassure him that the current state of projects will remain in tact the next time it is open without him needing to perform any additional actions. The user also does not need to save the current status of projects, because each time the interface is closed, a screenshot of the interface will be saved to a log of files. This resultant log of files at Amuneal will begin to build their catalog of processes.
Future Steps
Future Steps Notes
Once the user gains a better understanding of the overall process and effects of changing a project schedule at Amuneal, we may incorporate employee profiles into future versions of our interface. This would provide the staff with better understanding of their roles and of their coworkers’ skill sets and project loads. Making this information available would allow the staff to collaborate more effectively.
Future Steps Notes
Mark, While I am out of the office, please call this client about the review. P.S. It was me who ate your lunch last Tues. Sorry, Joe
Another future direction is to incorporate reflective scaffolding through the use of notes. “Reflective scaffolding is support for thinking about the task (e.g., planning, making predictions, evaluating)� (Jackson et. al 3). Since the Dashboard is a shared interface, we anticipate that this function will serve the purpose of allowing co-workers to share reflections by communicating or highlighting important project details on the notes.
Future Steps
Emotionally Intelligent Signs
One other possible future direction is to incorporate emotionally intelligent messages in our interface. According to Daniel Pink, an acclaimed writer on business and technology, emotionally intelligent signs, which demonstrate understanding and appeal to the emotions of an audience, “...get greater compliance with the rules.� These messages can demonstrate or encourage empathy. One example from his blog is shown on the left and an example we found is shown on the right. Both of these signs encourage empathy by commanding the audience, but in a friendly way.
Future Steps
Emotionally Intelligent Signs
! oh no, It looks like if you push back the timeline it really messes some deadlines up for your office mates. Maybe it’s worth taking another look see if you can adjust somewhere else.
In our interface, messages like the one shown above, may be used to encourage staff from changing project phases and passing difficulties along to their co-workers. By reminding them of possible problems their change may create for others, empathy is generated, resulting in fewer project adjustments.
The End.
thanks for listening to our ideas.
Works Cited Fjeld, M and W Barendregt. “Epistemic action: A measure for cognitive support in Tangible User Interfaces?” Proceedings of Measuring Behavior 2008, Maastricht, The Netherlands, August 26-29, 2008. 115-116. 3 May 2009. <http://www.noldus.com/mb2008/individual_papers/FPS_usability/FPS_usability_Fjeld.pdf >. Kosinski, Robert J. “A Literature Review on Reaction Time.” Sept. 2008. Clemson University. Web. 4 May 2009. <http://biae.clemson.edu/bpc/bp/Lab/110/reaction.htm> Lombard, Matthew and Jennifer Snyder-Duch. “Interactive Advertising and Presence: A Framework. Journal of Interactive Advertising. Vol.1 No. 2 (Spring 2001). 6 May 2009 <http:// www.jiad.org/article13>. Lewis, David. “Cognitive load theory.” [Dissertation excerpt]. Knol. Nd. 8 May 2009 <http://knol.google.com/k/david-lewis-phd/cognitive-load-theory/3k9oibq1mbt1c/2#>. Pink, Dan. “Pecha Kucha: Get to the Powerpoint in 20 Slides.” [Video entry]. You Tube. 28/08/2007. Wirenews. 8 May 2009 <http://www.youtube.com/watch?v=9NZOt6BkhUg> van Vugt, Henriette C., Hoorn Konyn, Johan F., Konijn, Elly A., and Athina de Bie Dimitriadou. “Affective Affordances: Improving Interface Character Engagement Through Interaction.” Paper presented at the annual meeting of the International Communication Association, Dresden International Congress Centre, Dresden, Germany, June 16, 2006. 6 May 2009 <http:// www.allacademic.com//meta/p_mla_apa_research_citation/0/9/2/1/1/pages92119/p92119-1.php>. Walker, Bruce N. and Gregory Kramer. “Human Factors and the Acoustic Ecology: Considerations for Multimedia Audio Design.” G T Sonification Lab. !996. School of Psychology, Georgia Institute of Technology. 6 May 2009 < http://sonify.psych.gatech.edu/publications/pdfs/1996AES-HF_ecology.pdf >.