• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile ui
 

Mobile ui

on

  • 593 views

Presentation for the CSE HCI course

Presentation for the CSE HCI course

Statistics

Views

Total Views
593
Views on SlideShare
593
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile ui Mobile ui Presentation Transcript

    • Design Considerations for Mobile Systems
      Jerry Gannod
      Director, Center for Mobile Learning
      Miami University
      1
      Miami M-Learning Center
    • M-Learning Center
      http://elgg.csi.muohio.edu/mlc
      Miami M-Learning Center
      2
    • M-Learning Center Overview
      Miami has established an M-Learning Center devoted to supporting faculty, staff, and students in the use of mobile technology for education
      Multi-disciplinary effort involving SEAS, AIMS, and IT Services
      Miami M-Learning Center
      3
    • Mission
      To capture and distribute best practices that utilize mobile technologies in support of learning
      To provide coordination and leadership that establishes linkages between existing development expertise and educators interested in applying mobile technologies for learning
      To provide faculty, staff, students and practitioners with support on the use and development of mobile applications through coordination of research and educational activities
    • Activities of the center
      Educational Support
      Disseminate knowledge about best practices in M-Learning
      Software Development Support
      Create software for mobile devices
      Service and Research
      Support research and outreach activities
      Miami M-Learning Center
      5
    • Student Projects
      Miami iPhone App
      Miami’s identity on the iPhone
      Track’M
      Bus tracking system
      Finalist 2010-2011 MUITDC Competition
      Polaris
      Proctor and Gamble Decision Support for iPad
      Alcohol Intervention
      Increase awareness of the problems of binge drinking
      HEARTifacts
      Semi-Finalist Youtube Film Your Issue, 2010
      Alumni Networking
      Supports making connections between alumni at networking events
      Integration with Linked-In
      Miami M-Learning Center
      6
    • HEARTifacts
      App supports finding Automated External Defibrillators using Augmented Reality
      Created for an external customer
      Students part of capstone team consisting of:
      Computer Science/Software Engineering
      Graphic Design
      Marketing
      MIS
      http://seasnews.eas.muohio.edu/2010/08/automated-external-defibrillator-aed-app/
      Miami M-Learning Center
      7
    • Quick Poll
      Take out your phones!
      http://bit.ly/ewULWm
      Miami M-Learning Center
      8
    • Capabilities
      Accelerometer
      GPS
      Camera
      Wireless Internet
      Phone
      Sound
      Vibration
      Web browsing with flash
      9
      Miami M-Learning Center
    • Possible Uses
      Augmented Reality
      Motion Detection and Measurement
      Location Awareness
      Haptic Response
      Real-time collaboration
      Image capture
      Motion detection
      10
      Miami M-Learning Center
    • Important Considerations
      Quality Attributes
      Expectations
      Performance
      Security
      Availability
      Usability
      • Access to data anywhere
      • Location Awareness
      • Ubiquity
      • Low latency
      • Simple navigation
      • Minimal typing
      Physical Attributes
      Network limitations
      Processor limitations(?)
      Miami M-Learning Center
      11
    • Tactic
      Start with the activity
      12
      Miami M-Learning Center
    • Example: Studying Plants
      In class activities: study plant in text or via internet (or other media)
      Field study
      Find plant
      Take picture
      Mark location
      Share data with others
      Off the shelf apps
      Camera
      GPS Location
      Cell network to share data
      Doesn’t need a specialized app necessarily
      13
      Miami M-Learning Center
    • Considerations
      Engagement - will the app enable users to be more engaged in the activity?
      Location - will the app enable users to be engaged where ever they are?
      Device Capability - will the app or device give the users access to a feature that enhances the activity?
      14
      Miami M-Learning Center
    • Design in the mobile world
      Hire a graphic designer
      User experience is a major factor in making the app successful
      User and client feedback is paramount
      Users need to be able to make comments about what does and doesn’t work early in the design process
      Miami M-Learning Center
      15
      Computer Scientists and Software Engineers != UI designers
    • Design in the mobile world
      User interaction should minimize text input and maximize click input
      Rule of the “big button”
      Ubiquity of data and identity
      Data should be accessible from anywhere and any device
      Miami M-Learning Center
      16
    • The Miami App
      Now available on the iTunes App Store
      Wait for the first update if you have an iOS 3.x device
      Miami M-Learning Center
      17
    • Miami iPhone App
      App supports a number of functions meant to inform users about various aspects of Miami
      Developed by student developers employed by the Miami M-Learning Center
      Software Engineering
      Computer Science
      Electrical Engineering
      Graphic Design
      We are hiring!
      Miami M-Learning Center
      18
    • The Miami App
      Our UI Development process:
      Develop requirements with consultation with user community
      Architect designs basic wireframe of the app
      Graphic designer creates concept drawings of the use case scenarios
      Story board shared with the user community
      Software developers create software using concept drawings from the graphic designer
      Miami M-Learning Center
      19
    • The Miami App
      90% of the data resides off of the phone
      Web services
      RSS feeds
      Web pages
      App replaces need for multiple physical or virtual data sources
      Maps, Web
      Miami M-Learning Center
      20
    • App Development
      Web App vs. Native App
      21
      Miami M-Learning Center
    • Why Web Apps?
      Target Multiple Platforms
      Builds off of familiar languages and frameworks
      More gentle learning curve than native app development
      Avoid app store
      App review
      App update
      22
      Miami M-Learning Center
    • Basic App Development
      Web Applications
      System Requirements
      PC, Mac, or Linux
      Programming Pre-requisites
      Web development
      HTML
      Javascript
      CSS
      23
      Miami M-Learning Center
    • Toolkits
      Available Toolkits
      iUi: http://code.google.com/p/iui
      iWebkit: http://iwebkit.net
      Ciui: http://code.google.com/p/ciui-dev
      Sproutcore: http://www.sproutcore.com
      jQueryMobile: http://jquerymobile.com
      jQtouch: http://jqtouch.com
      Cappuccino: http://cappuccino.org
      Wink: http://www.winktoolkit.org
      Xui: http://github.com/brianleroux/xui
      24
      Miami M-Learning Center
    • Advanced App Development
      Native Apps
      System Requirements
      Intel-based Mac
      Snow Leopard OS
      Programming Pre-requisites
      Object-Oriented Programming Knowledge
      C++
      Objective-C
      iPhone Developer License (for deployment onto devices)
      25
      Miami M-Learning Center
    • XCode
      Xcode IDE
      Development using Objective-C
      IB - Interface builder
      For designing user interfaces
      iPhone simulator
      Debugging Support
      26
      Miami M-Learning Center
    • Toolkits
      Appcelerator - http://www.appcelerator.com/
      Phonegap - http://www.phonegap.com/
      Rhomobile- http://rhomobile.com/
      Game Salad - http://gamesalad.com/
      Apsca- http://anscamobile.com/
      27
      Miami M-Learning Center