190 likes | 316 Views
Mobile Home Interface Application. PRESENTED BY: TEAM #10 Raffi Tikidjian tikidjia@usc.edu CAMPUS : 6988. Sean Cahill scahill@usc.edu CAMPUS : 8833. Topic Description.
E N D
Mobile Home Interface Application PRESENTED BY: TEAM #10 Raffi Tikidjian tikidjia@usc.edu CAMPUS : 6988 • Sean Cahill • scahill@usc.edu • CAMPUS : 8833
Topic Description • The Mobile Home Interface Application (MHIA) enables users with the latest in home automation technology. Imagine controlling all the electronic systems in your home directly through your mobile device. As you walk through your house, MHIA will know which room you are in and automatically adjust for room-specific options. • Assumptions • Devices communicate via standard device protocol • Mobile device subscribed to wireless service provider • Mobile device has GPS functionality • MHIA is trained on home configuration
System Requirements CAPABILITY/FUNCTIONALITY REQUIREMENTS • The system shall be able to turn-on/start any compatible device. • The system shall be able to turn-off/stop any compatible device. • The system shall be able to pause/un-pause any compatible devices which are pause-able. • The system shall be able to perform a numeric up/down/selection (1-9) function on any compatible device with numeric inputs (i.e. channel-up and channel-down on a TV). • The system shall be able to schedule tasks on any compatible device. • The shall be able to schedule one-time only and recurring tasks. • The system shall have two modes of operation determined automatically based on the location of the user/device. • Local – When a user is inside his/her home. • Roaming – When a user is outside his/her home. • The system shall perform real-time actions on the devices when commanded by the user. • The system shall be able to auto-detect compatible devices and provide a default configuration for them. (i.e. similar to detecting a wireless network and auto-connecting) • The system shall have two different views of browsing through the devices. • Static View – All devices are displayed based on viewing preferences. • Room-based View – Displays a customized room view of relevant devices to the room (i.e. within the physical bounds of the room or global devices to the entire home) • The system shall be able to group devices by their location or type. • The system shall be able to sort devices alphabetically, by location or type. • The system shall be able to configure (add/edit/delete) compatible devices. • The system shall track a personal profile of the user. INTERFACE REQUIREMENTS • The system shall be a handheld device application. • The system shall provide support for touch-screen handheld devices. • The system shall allow the device list to be displayed in text-only or icons + text format. • The system shall be able to use his/her voice to perform all actions available.
Local/In-Home The following graph shows a top-level menu-tree-like hierarchical structure of how the user can move within the system that we plan to design. The system being designed is for a handheld device. It is ideal that the user will be able to view and access features without digging through many clicks. This is reflected in our tree structure having more breadth than depth. Briefly, there are three main components (sections) that you can classify the functions on the main screen. Options related to the users viewing preferences (view type, grouping and sorting) Options related to actions performed on an electronic device (on, off, up, down, pause, etc.) Options related to the system configuration (devices, user profile, etc.) System Mode Roaming/Out-of-Home Static View System View Room-based View Device Location Group-by Device Type Alphabetical Sort-by Device Location Device Type Generic Device Turn On/Start Turn Off/Stop Main Application Schedule Numeric Up Digital Device Numeric Down Numeric Selection (1-9) Pause Pause-able Device Un-Pause Add New Device Edit Device Control Panel Remove Device User Profile Navigation Map
User Analysis Discussion: Environment • Most commonly will be used in the comfort of one’s home. • It’s unobtrusive interface allows it to be used at work, even in corporate meetings. • Voice recognition allows it to be used without direct contact.
User Analysis Discussion: I/O Devices • Mobile handheld Pocket PC • Stylus of Pocket PC • User’s Thumb • Voice I/O
Visual Design: Summary Style Guide • Menus • Top Menu • Standard 4 icons: back, home, browse, and time. • Blue background • Screen-specific options • Tabular blue menus, with navy color denoting active tab. • Icons • Must be comic-like and animated. • Icon’s must be scalable and recognizable from 0.25” to 1.25” of screen space. • Direct manipulation screens • Buttons will be light blue and liquid filled with white text. • Device images must be within 0.5” to 1” of screen space. • Font • Font family is Comic Sans MS • Menus and tabs will be 10 point. • Fisheye menu items can range from 6 point to 20 point
Visual Design: Summary Style Guide • Color • System color are limited to 5: white, black, light blue, royal blue, and navy. • Device icons are loaded from devices are out of our control; but should not have distracting colors. • Spacing • No overlapping icons • At least 0.25” break space around each icon • Voice • Attractive feminine voice output
Home Screen Design • Screen broken into 3 tiers • Top menu • Screen Display • Screen-specific options • Since our interface does not provide users with a keyboard, our design utilizes a lot of imagery in the form of icons. The icons are memorable and easily identified. • Back button • Home button • Browse • By name. • By room. • By favorites. • Time • Display of room diagram • Adjustable by tabs. • House is for devices through out house. • The background is blue or white to maximize contrast. Our design uses 4 principal colors, which is in agreement with Aaron Marcus’s 10 Commandments of Color. • Perks • Standard top menu across all screens. • Backtrack from any location. • Under three click search. • Easily navigated. • Breadth vs. depth negotiated.
Prototype: Home Screen • The eyes icon brings up the Browse by menu with three search options: • By Name • By Room • By Favorites • Eyes are animated gifs and can track the stylus’s position. • Navy color shows tab highlight, similar to windows XP. • 2nd floor tab will show 2nd floor diagram • House shows devices that are house devices; ie: sprinklers or house alarm.
Prototype: Browse By Name List display • Browse by Favorite same screen type, but list is compiled by most used devices. • Fisheye menu display. • Three icons on bottom menu change display views, will be demonstrated in next slides. Easily recognizable after first use. • Different displays work better on different lists. • List display most space efficient, but only slightly visually appealing. • Picked when many devices have to be listed; i.e.: after Browse by Name.
Prototype: Browse By Name Circular display • All icons are gifs, but only the featured icon is animated. • Information on the icon is also displayed; ie: on/off, current channel; etc. • Most visually appealing display, key for our primary users. However, least space efficient. • Picked when only a few devices are present; i.e.: specific room selected.
Prototype: Browse By Name Grid display • All icons are gifs, but only the featured icon is animated. • Information on the icon is also displayed; ie: on/off, current channel; etc. • Mix between space efficiency and visual appeal. • Picked when only a few devices are present; i.e.: specific room selected.
Prototype: Device-specific Controls • The controls of the device are shown. • Controls loaded from device. • Used through direct manipulation • Easy intuitive interface, since the user is already trained to use the device-specific controls.
Prototype: Device-specific Controls • The controls of the device are shown. • Image also loaded if available. • Used through direct manipulation • Ability to generalize the device use. • All in house • All in room • Just this one. • Also buttons in case direct manipulation of device is cumbersome. • Black used for off and green for on.
Final Thoughts • Tools • Adobe Photoshop • Microsoft Visio • Microsoft Visual Studio .NET • Lessons Learned • User Interface Design for applications is the most time consuming portion of the development process • Prototype early, Iterate often • Artistic individuals required • Plans for rest of semester • Requirements Verification • Usability Analysis • Color Analysis • Screen Designs Added/Improved • Functional Prototype