UX Guidelines Production Branch, November 2014 Version 1.3

Transcription

1 UX Guidelines Production Branch, November 2014 Version 1.3

2 index basics gestures Flick down Single Tap Double Tap Tap and Drag Swipe from edges Vision & Design Priciples Mental Model Specs understand sprout Monitor Monitor IA & Navigation Mat IA & Navigation

3 1. basics This section introduces the vision, design principles, mental model and machine specs of Sprout by HP (Sprout). Make sure to follow these guiding rules throughout the design and development of your application.

4 our vision Reimagine a whole new world of possibilities through blended reality. Create like never before. design principles 1. Make complex simple Design and develop a natural user interface. Keeping in mind Sprout primarily serves the creative minds who may not have advanced software skills. Keeping interface simple and intuitive, while striving for high productivity. 2. Remove barriers to creativity Creation can get stuck if lacking the tools, knowledge and knowing-how. Taking advantage of Sprout s built-in capabilities such as 3D scanning and provide users a smooth and seamless creation experience. 3. Set imagination free Don t limit your imagination to traditional computing. Explore the possibilities of connected touch screens, multiple cameras, the projector, LED lights and more. Blending the experience between the virtual and real world to set users imagination free.

5 mental model monitor for consumption mat for control Sprout applications should be designed to focus on interaction and enable productivity. Making best use of the two complement touch screens for best user experience. Always remember, Monitor is for seeing and consuming content. Touches on Monitor will be limited primarily for navigational purposes. Monitor projects content and creation outcomes; Leaning back Navigational touch & conventional input (keyboard & mouse) See and consume Project PC power and tools Mat is for controling and manipulating. It provideds an immersive touch experience and an intuitive NUI. Lean forward Immersive touch Make and create Media Intuitive NUI

6 specs Integrated Camera HP Illuminator: includes 4-camera system including Intel RealSense 3D Camera and 14.6 MP high-resolution camera, HP DLP Projector, LED desk lamp Operating System Windows Processor Intel Core i7-4790s with Intel HD Graphics 4600 and NVIDIA GeForce GT 745A Memory 8 GB 1600 MHz DDR3 (2 x 4 GB) Upgradeable to 16 GB Hard Drive 1 TB SATA 6G SSD Flash Cache 8 GB Network Interface Integrated 10/100/1000BASE-T Gigabit Ethernet LAN Wireless a/b/g/n/ac (2x2) and Bluetooth 4.0 MiniCard combo; SISO Power Supply 350 W AC power adapter Dimensions & Weight x x 16 in, 33.7 lb Ports 2 USB 3.0; 2 USB 2.0; 1 HDMI; 1 line out; 1 headphone/microphone combo Camera HP HD 1 MP Webcam Monitor High friction glass Graphics: Intel HD Graphics 4600 Display: 23" diagonal FHD WVA touch-enabled LED-backlit LCD (1920 x 1080) 20 x : 9 The bridge Keyboard Home Turn on virtual keyboard on Mat Go to Gallery (Home page) on Monitor Enable/disable touch feature on Mat Touch Mat Reflective Low friction polymer Low resolution (1024 * 768) Horizontal 16 X 12 4 : 3

7 2. understanding sprout Understand how Sprout is structured, making sure your application follows the key rules of IA, navigation, actions and behaviors.

8 monitor Gallery is the homepage of Sprout. It hosts primarily 4 categories of items: simple content, complex content, applications and quick links. Using gesture on different categories of items will trigger different software responses. Simple content Simple content are images, scanned objects (essentially also images) and documents. They are flat files that can be imported into complex content for further modification and manipulation. Complex content Complex content are projects created with native Sprout applications and 3rd-party applications. It ususally includes multiple peices of simple content and can only be opened and edited by the application that created it. 3D Objects Images Templates are Sprout default projects with recommended content, which users can further edit and add to. Developer notes: Determining if items from your application fit into these categories. If so, make sure to follow the patterns that we will introduce in the next few pages. If items don t fit into these categories, use your best judgement to keep the overall experience consistant with Sprout experience. Documents Applications Applications are created to fit the 2 touch screen ecosystem and follow Sprout principles and mental model. Sprout currently carries native applications and 3rd-party applications. Gallery only exibits 3rd-party apps. Projects Quick links Templates Find quick links in Gallery, which takes users out of Sprout OS and switch screen to external software, website or windows OS. Marketplace link is a special case, which takes users to marketplace detail page. Connected Drive My Computer Applications Contact HP Marketplace

9 monitor information architecture Understanding where your application lives on Sprout monitor Outside Sprout OS Quick links take users to Windows non-sprout experience Level 1 overlay no overlay Overlay shows content preview and options for action Level 1 Home: gallery Home shows containers. Each container hosts a category of content (i.e., image container hosts image thumbnails) Level 2 shows all thumbnails within a category (i.e., tap into image container to see all image thumbnails) Level 2 shows thumbnails of all downloaded applications Marketplace shows additional applications that users can download. Level 2 Detail pages $ $ $ $ Overlay shows content preview and avaliable options Overlay shows information and form to complete app purchase and download no overlay Level 2 overlay $

10 monitor global navigation Follow the rules of global navigation in your application as much as possible Home Use Home button on the machine to get back to Sprout Gallery Outside Sprout OS Swipe right from left edge of monior, to toggle back to Sprout Always use X to exit an overlay Level 1 overlay no overlay Level 1 Home You can always press Home button on machine to go to Gallery page on monitor Level 2 User go back < to return to previous page. < should locate on bottom left of the monitor Secondary position: When bottom left space is not avaliable, put < at top left of monitor $ $ $ $ no overlay Level 2 overlay $

11 mat information architecture Users can put application thumbnails to Mat Level 1 Home: Workspace Workspace shows native and 3rd-party applications. Level 2 Application Interface In the case when application only launches on monitor, Mat remains workspace view. Level 2 Overlay Dialog box

12 mat - navigation Level 1 Home: Workspace Level 2 Application Interface Save About Quit 2 ways to exist an application Option 1. provide an exist option in the hamburger menu, application will quit. On mat, use back button < to return to previous page. < always stays on top left of mat. Option 2. users could always press the hard button Home to switch to Gallery & Workspace view. Note this option doesn t quit the application, it still runs on the back end. Home Level 2 Overlay Dialog box Use X to close the overlay

13 monitor and mat coach marks In Gallery and Workspace, tap on coach mark icon for Sprout machine instructions. Your application should use the same coach mark for Instructions and Help. Alway put coach mark at the bottom right of monitor and mat. launch your application In general, your application should launch on both monitor and mat simutaneously. If there is only one screen upon launch, always use monitor first. Tap on coach mark on monitor will show instructions regarding monitor content Tap on coach mark on mat will show instructions regarding content on mat

14 gestures 3rd-party applications could own their the in-app experience. But you should keep consistancy with Sprout gestures as much as possible.

15 Developer Notes: gesture - flick down In your application, use flick down gesture to bring items from monitor to mat. If your application contains items that belong to certain categories (simple & complex content, applications, quick links), make sure to follow the gesture guidlines illustrated in this section. If items are undefined, use your judegement for best user experience. In Gallery In an application If applicable Other Items Launch Create and load selected items Note: if multiple items are selected, apply flick down gesture on any selected thumbnail will bring down all selected items Add application thumbnail to workspace (no response if already added to workspace) Currently no response Load items onto mat Load projects/ templates onto mat Within your application s interface, load selected items onto mat

16 gesture - single tap Single tap on monitor Simple & complex content Applications Quick Links Directional Text Capture New Image 1. Single tap will take monitor to external linked page 2. To get back to Sprout, swipe from left edge of monitor until Sprout page is shown; Alternatively, press hard button Home to return to Gallery page. 1. Single tap to trigger the action 1. Single tap to select, and view avaliable options; 2. Single tap on the next thumbnail to select multiple; 3. Single tap on selected thumbmails to deselect. 1. Single tap to select, and view avaliable options; 2. Users can only select one application, no multiple selections 3. Single tap on selected application to deselect. Single tap In workspace In an application In an application on mat 1. Single tap on mat launches the application 1. Single tap on icons, buttons and directional text will 1. Single tap to select objects, and view trigger the designated action avaliable options; 2. Single tap on the next object to select multiple; 3. Single tap on selected items to deselect.

17 gesture - double tap Double tap on monitor Simple & complex content Applications Quick Links Directional Text < > Capture New Image Regardless of selection, double tap will preview all items avaliable, selected and non-selected Note: If preview is not applicable to your application, user double tap gesture as a way to bring up overlay Double tap on application to launch Double tap on links = single tap 1. There is no double tap gesture for quick links. Double-tap on quick links will trigger the same response like single tap, which will take users to the linked page. Double tap on links = single tap 1. There is no double tap gesture for directional text. Double-tap on texts will trigger the same response like single tap, which will take users to the linked page. Double tap In workspace In an application In an application Developer Notes: on mat Currently, there is no double tap gesture defined on Mat. Use double tap in your application s Mat experience as you see fit 1. Double tap on mat triggers no response No double tap response for in- app objects No double tap response for icons, buttons and directional texts

18 gesture tap and drag In workspace In an application From monitor to mat Tap and drag to re-order items; Or, tap and drag items to avaliable icons, then release the item to confirm action i.e., tap and drag an application thumbnail on mat, users can reposition the application; users can also drag it to the delete button, release finger to delete the thumbnail. Same rule applies whin the application experience. Tap and drag on monitor = flick down Move item from monitor to mat

19 Developer Notes: gesture 2 fingers pull and rotate 2 fingers pull and rotate is not defined on monitor, use the gesture as you see fit for your applications. In an application In an application Tap and hold the object with two fingers, pull fingersl to opposite direction to enlarge/shrink its size Tap and hold, move your fingers to rotate the object

20 gesture avoid swiping from screen edges The experience for the gesture is owned by Windows OS, avoid using it in your Sprout applications. Swiping from top Swiping from top edge all the way to the bottom edge of monitor closes an application Swiping from left edge Swiping from left edge toggles among Sprout screen and other Windows screens on monitor Swiping from right Swiping from right edge brings up Windows Charms on monitor Swiping from left edge toggles among Sprout screen and other Windows screens on mat Swiping from right edge brings up Windows Charms on mat