Pre-requisites Wearegoing to useboth in this training Basics of and QML Goal of the training is to get the developers excited for the tools, the device and technologies rather then pure knowledge transfer.
Required Tools On yourlaptop: Qt SDK 1.1.2 includingHarmattantargets Custominstallation (Harmattan is foundunderExperimentalpackages) N950 Image flashed Installationinstructions: GettingStarted with the Qt SDK E.g. in Windows underStart menu
Agenda Introduction to MeeGo Overall UI Model MeeGo Application Design UX Principles MeeGo Design dos and donts UI Patterns and Components
Goals High-level overview of the UX Details of User Experience are found in the MeeGo UX Guideline documentation http://swipe.nokia.com/ The presentation does not cover the actual software components what to use, but only represents the expectation level of MeeGo 3rd party UI MeeGo is a new platform, which has similarities with other platforms in the market, but it has its own signature UX that should be captured within the application development
What Is MeeGo Harmattan? The MeeGo effort will be an ongoing exploration of innovative platform disruptions and next-generation devices, platforms and user experiences. --Stephen Elop, CEO, Nokia N9/N950 MeeGo 1.2 Harmattan API UI: MeegoTouch All it takes is a swipe Debian packaging N900 Maemo 5 Fremantle UI: Hildon Debian packaging ? MeeGo 1.xUI:MeegoTouch RPM packaging
Display - 3.9" AMOLED display with curved glass, 16M colors, 854 x 480 pixels screen resolution Memory - 16GB/64GB, 1GB RAM Connectivity - A-GPS, Compass, WLAN 802.11 abgn, micro USB, BT 2.1, NFC Audio - MP3 player, 3.5 mm audio jack, Supported codecs: mp3, AAC, AAC+, eAAC+, WMA, FLAC Video - Video recording and playback up to 720P, H.263, H.264, MPEG-4, WMV 9, Matroska Camera - 8 Megapixel AF camera with Carl Zeiss optics, dual-LED flash, wide-angle lens Nokia N9
MeeGo Design Principles Simple & Intuitive Reduce the visual noise, keep things as simple as possible No sub-folders in Application Launcher, shallow navigation Direct touch and swipe Meaningful Personalization Personalization in smart and dynamic ways, not just theming Speaks My Language Familiar language that feels approachable and friendly The gallery wont open vs. Unable to open gallery Premium Nokia A luxurious product with beautiful graphics and rich motion Delightful to Use Brings a smile to your face from first use and again day after day
MeeGo Harmattan MeeGo UX UI Model
Home Screen The Home screen for MeeGo is comprised of three key views: Notifications, Applications and Multitasking. These views exist adjacent to each other on a single row and can be accessed by horizontally dragging between the screens.
Home Screen Notifications The Events feed delivers continuous updates to the device from any application the user has enabled. Notifications (e.g. missed call, new SMS) and ongoingevents (e.g. active call, file transfer) appear at the top of the Notifications view, above the events feed. Apps Launcher The Applications view contains links to all applications installed on a device. Each application is presented as an icon in a four- column grid that scrolls vertically. Multitasking The Multitasking view presents thumbnails of applications in a grid, providing an overview of any recently accessed applications. This grid grows and scrolls vertically to accommodate application thumbnails as a user adds them. The Swipe When viewing a full screen application, Swiping away the application from any edge brings the user to the last accessed Home view. For example, if the user had launched the Conversations application from the Notifications view, Swiping from the side or bottom edges will always return the user to that Notifications view.
Launcher Launcher The Applications view contains links to all applications installed on a device. Each application is presented as an icon in a four- column grid that scrolls vertically. When the user installs a new application, it appears at the end (bottom) of the application grid. To launch an application, a user simply taps on its icon. Swiping to exit applications When viewing a full screen application, Swiping away the application from any edge brings the user to the last accessed Home view. For example, if the user had launched the Conversations application from the Notifications view, Swiping from the side or bottom edges will always return the user to that Notifications view. When designing applications for MeeGo, you should consider the structure of the application and any interactions that could potentially conflict with the Swipe interaction principle.
Notifications Event Feed The Events feed delivers continuous updates to the device from any application the user has enabled. These events are pushed to the feed and displayed in a vertically scrolling list, with the newest item at the top. Event updates that appear in the feed should serve as direct, deep links into content or actions within relevant applications. By tapping on an event update, the user can launch the corresponding application in the appropriate context. Note: The user must be allowed to remove event updates manually the application should not delete them automatically. Notifications When available, notifications (e.g. missed call, new SMS) and ongoing events (e.g. active call, file transfer) appear at the top of the Notifications view, above the events feed. Notifications and ongoingevents behave in the same way as event updates, since a user can simply tap them to launch the associated application. Until a user opens or deletes a notification, it must remain in the Notifications view and stay actionable. However, once an ongoingevent is over, it should disappear from the Notifications view.
Multitasking Recent Applications The Multitasking view presents thumbnails of applications in a grid, providing an overview of any recently accessed applications. This grid grows and scrolls vertically to accommodate application thumbnails as a user adds them. To launch an application, the user can simply tap the desired thumbnail. Order of applications The Multitasking view displays application thumbnails according to how recently a user has accessed them. The grid populates from left to right and top to bottom, with the newest item occupying the top-left position. When the user switches between open tasks, the applications reorder to maintain the order of recently accessed. Resizing the grid The thumbnails in the Multitasking view can be presented as a 3x3 or a 2x2 grid. A multitouchpinch gesture lets users switch easily between the two grids. Removing applications To remove an application from the Multitasking view, the user can make a long press on the relevant thumbnail.
MeeGo Harmattan MeeGo UX Application Design
Application Types Productivity apps Dealswith more pragmatic actions, such as sending a text message (clock, calendar, notes) Immersion apps Offersmore entertainment-based or visually rich experiences (camera, gallery, musi/video player)
Application Types Productivity Efficiency, simplicity are important Drill-down structure Simple toolbars highlighting key actions Tabs showing content views Usually rely more on common components Calendar Immersion It is common to use full views Customized user experience May rely on N9 native components It will be the designers responsibility to decide how to represent content, navigation and interactions Map browsing
ScreenAnatomy Status bar and notification banners Shows signal strength, time and battery life Supports access to the Settings Shortcuts menu Required element for all views except full screen views As an event is received or triggered, a Notification banner should be displayed in place of the Status Bar Header Menu Used to control the main navigati