Dashboard & Widget Layout & Design HP Touchpoint Manager Anatomy of a Widget Title bar with icon Clicking takes users to a “list page” with this dynamic query with more actions Simplified, key data (Sad vs Happy) Options “hamburger” Graphical, at-a-glance status Time frame Users can customize to show data that’s important to them Simplified Key Information At-A-Glance Status Flexible, yet Consistent Customizable Actionable Guiding Principles
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Dashboard & Widget Layout & DesignHP Touchpoint Manager
Anatomy of a Widget
Title bar with icon
Clicking takes usersto a “list page” withthis dynamic querywith more actions
Simplified,key data
(Sad vs Happy)
Options“hamburger”
Graphical,at-a-glancestatus
Time frameUsers can customizeto show data that’simportant to them
Simplified Key InformationAt-A-Glance StatusFlexible, yet ConsistentCustomizableActionable
Guiding Principles
List of Things Layout & Design, Interaction & UX FlowHP Touchpoint Manager
Simplified Key InformationCustomized, At-A-Glance StatusScalableFind what I want, fast!Should work for anything: Devices, Software, Printers, Coffee Makers, etc.
Guiding Principles
List of Things Layout & Design, Interaction & UX FlowHP Touchpoint Manager
Search
Home Alerts Users Devices Groups Services
Terms and Conditions | Personal Data Rights | Privacy | Contact © 2015 HP Inc.
Interaction Problems
In our early wireframes & mockups,
the interaction flow was disruptive to
how someone naturally reads (from
left to right).
In these examples you’ll see the main
action (the dynamic filters) affected
items above & to the right. One action
was affecting 3 different areas in an
unnatural manner which caused users
to not understand what to do in this
control.
List of Things Layout & Design, Interaction & UX FlowHP Touchpoint Manager
Interaction Correction
By adjusting the layout, the
flow of interaction became
much more simplified. The
final solution was placing the
dynamic filters on the left.
Making selections in the filters
affects the graph and the list
on the left.
Logo & Branding with Early IterationsHP Touchpoint Manager
Final
Logo & Branding with Early IterationsHP Touchpoint Manager
Large poster & banner design
Nurture email template
Themed launch poster
Early Concept MockupsHP Touchpoint Manager
Related Documents
