Meego Harmattan training

  • View
    5.054

  • Download
    2

Embed Size (px)

DESCRIPTION

 

Text of Meego Harmattan training

  • MeeGo Harmattan
    Course Introduction
  • Digia WhoAreWe?
    DigiaPlc http://www.digia.com
    Tino Pyssysalo
    Senior Software Specialist
    Tampere, Finland
  • 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
  • Course Contents
    http://www.developer.nokia.com/Devices/MeeGo/
  • MeeGo Harmattan
    MeeGo UX
  • 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.
  • UI Overview
  • 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