Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces.

Slides:

Advertisements

Similar presentations

Jim Warren (with lots of inspiration from interface/wa-interface-pdf.pdf)

Advertisements

Event Handling. Overview How to listen (and not listen) for events Creating a utility library (and why you should) Typology of events Pairing event listeners.

Software Usability Course notes for CSI University of Ottawa Section 6: Thoughts on Mobile and Multi-Touch Usability Timothy C. Lethbridge

Mobile Friendly Website Hot Topic & Challenge At Once Michal Spěváček.

CS575 - Human Issues in Computing CSULA Spring 2006 Human Impact of UI Design Paradigms (PART 1 – Overview) Robert Ritchey and Ruben Campos.

MWD3002 Multiplatform Applications Week 5 – Designing for Mobile.

© 2009 Research In Motion Limited Methods of application development for mobile devices.

High Speed Digital Systems Lab 1 Mini Control System Application Mini Control System Application Poster Students: Yair Kler Supervisor: Boaz Mizrahi Spring.

RIM INTERNAL Apple iPhone: Overview A ‘revolutionary’ multimedia smartphone for the consumer market ‘Simpler, easier to use’ yet more functional Combines.

Stanford hci group / cs376 research topics in human-computer interaction I/O Toolkits Scott Klemmer 29 November 2005.

© 2009 Research In Motion Limited Introduction to developing applications for mobile devices.

CS575 - Human Issues in Computing CSULA Spring 2006 Human Impact of UI Design Paradigms (PART 2 – Case Studies) Robert Ritchey and Ruben Campos.

Spring /6.831 User Interface Design and Implementation1 Lecture 6: User-Centered Design GR1 (project proposal & analysis) released today, due.

Andrej Radinger, MVP APPA Mundi Ltd. MOB303.

1 CGS1060 Mobile UIs Copyright 2012 by Janson Industries.

WCL208. Slate Mobile Slate Mobile Laptop Portable Laptop Portable Displays TV, Monitor Displays TV, Monitor All-in-One Desktop All-in-One Desktop.

 jQuery Mobile An Introduction. What is jQuery Mobile  A framework built on top of jQuery, used for creating mobile web applications  Designed to make.

WCL202. Slate Mobile Slate Mobile Laptop Portable Laptop Portable Displays TV, Monitor Displays TV, Monitor All-in-One Desktop All-in-One Desktop.

Mobile Sensor Application Group 4. Introduction Modern smartphones are often equipped with quite a large number of sensors. The sensors data can be used.

CS 352, W12 Eric Happe, Daniel Sills, Daniel Thornton, Marcos Zavala, Ben Zoon ANDROID/IOS RPG GAME UI.

Design of Handheld Devices

Design Considerations & User Experience Guidelines for Mobile Tablet Applications Arnie Lund Director, User Experience David Hale Developer Experience.

Systems Analysis and Design in a Changing World, 6th Edition

Evolution Traditional Web access through fixed line services. Mobile Web – access web from hand held devices through wireless network or mobile network.

CS378 - Mobile Computing App Project Overview. App Project Teams of 2 or 3 students Develop an Android application of your choosing subject to instructor.

Spring /6.831 User Interface Design and Implementation1 Lecture 3: Visibility.

Wireless iPhone uses quad-band GSM, the global standard for wireless communications. It also supports Cingular’s EDGE network, b/g Wi-Fi, and Bluetooth.

14 Chapter 11: Designing the User Interface. 14 Systems Analysis and Design in a Changing World, 3rd Edition 2 Identifying and Classifying Inputs and.

Introduction CIS 136 Building Mobile Apps 1. What is a mobile app? 2  Computer program  Designed for small devices  Smartphones  Tablets  Other handhelds.

Moving from Web-based Collaboration to the Mobile Arena Nimrod Geva Product Group Manager, KWizCom

Fall UI Design and Implementation1 Lecture 20: HCI Research Topics.

Lecture Set 13 Drawing Mouse and Keyboard Events Part B – Mouse and Keyboard Events.

Palm webOS History Version.Release Date. WebOS – Build 194 Sprint Config – 2.012/28/2009 WebOS – Build 194 Sprint Config – 2.012/28/2009 WebOS.

©2011 INTERACTION DESIGN Chapter 6. ©2011 Low-fidelity Prototype Source: Heim, S. (2008), p. 188.

Author: Jakob Nielsen Presented by: Annam Abbasi.

Spring /6.831 User Interface Design and Implementation1 Lecture 24: Animation HW2 out, due next Sunday look for your evaluation assignment on.

ChronoZoom Touch and Low Resolution behavior. Touch vs Low Resolution Touch and low resolution behavior are independent – Example: iPad is high resolution,

How to create efficient touchscreen interfaces Kamen Bundev Telerik Corporation Senior Front-end Developer.

Build-A-Button Glenn G. Chappell U. of Alaska Fairbanks CS 381 Lecture Notes Wednesday, October 8, 2003.

TOUCH ME NOT Presented by: Anjali.G.

General features of GUI's Applicable to all methodologies and all platforms: Linux/UNIX Windows Android OS-X.

The Implementation of a Glove-Based User Interface Chris Carey.

Systems Analysis and Design in a Changing World, 6th Edition 1 Chapter 7 - Designing the User and System Interfaces.

Week 2: Mobile User Interfaces. Objectives Review of User Interface Design Mobile specific design challenges in mobile UIs –specifically modern smartphones.

Brugergrænseflader til apparater BRGA Presentation 12: Touch.

MTA EXAM HTML5 Application Development Fundamentals.

Events Event Handling in JavaScript SoftUni Team Technical Trainers Software University

Introduction to Computing Slides By ADEELA MUSTAFA.

Pen Based User Interface Issues CSE 490RA January 25, 2005.

1 ACCESSIBILITY IN "WINDOWS 8" by Francis Chao. 2 Web location for this presentation: Click on “Meeting Notes”

Copyright ©: SAMSUNG & Samsung Hope for Youth. All rights reserved Tutorials Tablets: Tablet touchscreens Suitable for: Beginner.

Implement User Input Windows Development Fundamentals LESSON 2.4A.

JavaScript, Sixth Edition

4.5. Respond to the touch interface 4.6. Code additional HTML5 APIs 4.7. Access device and operating system resources JavaScript Coding for the Touch Interface,

04 | Code by Using JavaScript Christopher Harrison | Content Developer, Microsoft Rachel Jones| Microsoft Certified Trainer, SourceDev.

Spring /6.831 User Interface Design and Implementation1 Lecture 25: Input/Output Technology HW2 due Sunday GR5 (final implementation) out Today.

Phonegap API & Phonegap Bridge CIS 136 Building Mobile Apps 1.

Modified from slides provided by Joseph Sant & Ann Cadger.

Application development process Part 1. Overview State of the mobile industry Size of the market Popularity of platforms How users use their devices Internationalisation.

Touch and Go: Leading Touch UI with Open Source

Human Impact of UI Design Paradigms

API for Mobile Devices.

Mobile Interface Design

Introduction to jQuery

Web Design and Development

JavaScript and Events CS Programming Languages for Web Applications

CHAPTER 6 EVENTS. CHAPTER 6 EVENTS WHAT IS AN EVENT?

JavaScript and Events CS Programming Languages for Web Applications

Presentation transcript:

Spring /6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces

UI Hall of Fame or Shame? Spring /6.831 User Interface Design and Implementation2

Today’s Topics Design challenges in mobile UIs –specifically modern smartphones Design patterns & guidelines Implementation –Creating web UI for smartphones Spring /6.831 User Interface Design and Implementation3

Desktop vs. Mobile Spring /6.831 User Interface Design and Implementation4

Small Screen Spring /6.831 User Interface Design and Implementation5

“Fat Finger” Spring /6.831 User Interface Design and Implementation6

Text Input Spring /6.831 User Interface Design and Implementation7

Context Spring /6.831 User Interface Design and Implementation8

Other Issues in Mobile Power & battery life Network latency, bandwidth, inconsistency CPU speed Spring /6.831 User Interface Design and Implementation9

Distinct Screens Spring /6.831 User Interface Design and Implementation10

Scrolling Lists Spring /6.831 User Interface Design and Implementation11

Finger-Sized Targets Spring /6.831 User Interface Design and Implementation12

Minimize Text Input Spring /6.831 User Interface Design and Implementation13

Simplify, Simplify, Simplify! Spring /6.831 User Interface Design and Implementation14

Mobile Widgets Spring /6.831 User Interface Design and Implementation15

Many Kinds of Menus Spring /6.831 User Interface Design and Implementation16

Touch Gestures Spring /6.831 User Interface Design and Implementation17

Web Development for iPhones Orientation detection –orientationchange Mouse hover events behave differently –mousemove, mouseover, mouseout –mousedown, mouseup, click sent all at once on touch release Multitouch events –touchstart, touchmove, touchend, touchcancel jQuery UI support –jQTouch plugin Spring /6.831 User Interface Design and Implementation18

Summary Mobile UI design faces new challenges –small screens –fat fingers –poor text entry Simplify –Follow design patterns –Use touch gestures where possible Spring /6.831 User Interface Design and Implementation19