Shatin 沙田 Developing a mobile strategy Date (9 th Jan) Cherry Cheng (Original) Will Kwok (1 st revision)

Slides:



Advertisements
Similar presentations
2-May-15 GUI Design. 2 HMI design There are entire college courses taught on HMI (Human-Machine Interface) design This is just a very brief presentation.
Advertisements

A Device’s Life Saver.  Purpose of this app:  Monitors the status and charging cycle of your device  Extends the battery life span on your device after.
Software Usability Course notes for CSI University of Ottawa Section 6: Thoughts on Mobile and Multi-Touch Usability Timothy C. Lethbridge
Tailoring Needs Chapter 3. Contents This presentation covers the following: – Design considerations for tailored data-entry screens – Design considerations.
Learning about software Interfaces.  In this lab, you will examine  Excel Spreadsheet Interface  Access Database Interface  You will also learn about.
User Interface Design Notes p7 T120B pavasario sem.
From requirements to design
Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink
Ch 11 Cognitive Walkthroughs and Heuristic Evaluation Yonglei Tao School of Computing and Info Systems GVSU.
Design Activities in Usability Engineering laura leventhal and julie barnes.
7M701 1 User Interface Design Sommerville, Ian (2001) Software Engineering, 6 th edition: Chapter 15
User Interface Design. Overview The Developer’s Responsibilities Goals and Considerations of UI Design Common UI Methods A UI Design Process Guidelines.
User Interface Design Users should not have to adapt to a piece of software; the software should be designed to fit the user.
User interface design Designing effective interfaces for software systems Objectives To suggest some general design principles for user interface design.
Chapter 13: Object-Oriented Programming
COMP1007 Introduction to Requirements Analysis © Copyright De Montfort University 2002 All Rights Reserved COMP1007 Introduction to Requirements Analysis.
SM3121 Software Technology Mark Green School of Creative Media.
Proposal 13 HUMAN CENTRIC COMPUTING (COMP106) ASSIGNMENT 2.
The Power of PowerPoint A guide to expectations for Stage 2 Information Processing and Publishing.
1 User Interface Design CIS 375 Bruce R. Maxim UM-Dearborn.
Learning Objectives Give names to computing features that you know intuitively Explain placeholders and the placeholder technique Explain how “metaphor”
1 CGS1060 Mobile UIs Copyright 2012 by Janson Industries.
CS 352, W12 Eric Happe, Daniel Sills, Daniel Thornton, Marcos Zavala, Ben Zoon ANDROID/IOS RPG GAME UI.
Said Achmiz, Alexander Gountras, Xinxin He. Problem Space Currently users in the home, performing a manually intensive task, do not have an easy and efficient.
DESIGNING FOR IOS. iOS uses the following themes:  Deference. UI helps users understand and interact with the content, but never competes with it.
Introduction to Interactive Media 02. The Interactive Media Development Process.
UI Design Patterns & Best Practices Mike Wolfson July 22, 2010.
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
CS378 - Mobile Computing App Project Overview. App Project Teams of 2 or 3 students Develop an Android application of your choosing subject to instructor.
Michael Margel Dec CSC 2524 SURFBRD. What is SURFBRD? SURFace-Based Remote Desktop Pronounced “Surfboard” A desktop environment that allows users.
Apple Iphone Woubshet Nema Bethelhem Tadele.  This is a presentation about AppleIphoneguidelines  Woubshet Nema  Bethelhem.
Web-designWeb-design. Web design What is it? Web-design features Before…
1 WEB Engineering Introduction to Electronic Commerce COMM1Q.
Designing metro style apps for Windows 8 A walkthrough some UI / UX best practices Lanny Geffen, Creative Director, Digiflare.
MULTIMEDIA DEVELOPMENT
1 The Web & Professional Communication English 3104.
User interface design. Recap OOD is an approach to design so that design components have their own private state and operations Objects should have constructor.
CSC 480 Software Engineering Lecture 19 Nov 11, 2002.
©RavichandranUser interface Slide 1 User interface design.
Introduction to Interactive Media The Interactive Media Development Process.
Design for Interaction Rui Filipe Antunes
Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® Copyright 2012 Adobe.
Exploring Your Desktop To run presentation, please click on bottom arrow to right to change to next frame.
Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.
General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. This work is licensed under the Creative.
1 WEB Engineering E-Commerce Strategy & Management COM350.
Heuristic evaluation Functionality: Visual Design: Efficiency:
© 2012 The McGraw-Hill Companies, Inc. All rights reserved. word 2010 Chapter 3 Formatting Documents.
Mobile Application Design Eiyana Favers Jessamyn McBrian Esther Sheppard IDIA 612 June 21, 2011.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
CS 352, W12 Eric Happe, Daniel Sills, Daniel Thornton, Marcos Zavala, Ben Zoon ANDROID/IOS RPG GAME UI.
Chapter 9 Design guidance and design rationale. UIDE Chapter 9 Sources of Design Guidance Standards Standards –User interface standard Design Guidelines.
Interface Design.
Software Architecture
1 3132/3192 User Accessibility © University of Stirling /3192 User Accessibility 2.
Date 23 rd Jan Shatin 沙田 Mobile Information Architecture.
CS 352, W12 Eric Happe, Daniel Sills, Daniel Thornton, Marcos Zavala, Ben Zoon ANDROID/IOS RPG GAME UI.
Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.
Windows 2000 Unit A A1 – A24 and Ap1 – Ap3 (Formatting a Disk)
Agenda What is “learner-centered”? ~Think of Time Activity ~ Learner-Centered: In Our Own Words Effective Instructional Strategies for the Learner- Centered.
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
INTERACTION DESIGN A Heady Mix of Things SPEC INDIA.
SURFBRD Michael Margel Dec CSC 2524.
Human Computer Interface design
Introduction UI designer stands for User Interface designer. UI designing is a type of process that is used for making interfaces in the software or the.
Systems Analysis and Design in a Changing World, 6th Edition
GUI Design 24-Feb-19.
Upping Usability Building a solid UI Rules for better interfaces
CSC 581: Mobile App Development
Polytone Convey volume and emotion through text. By: A Team
Presentation transcript:

Shatin 沙田 Developing a mobile strategy Date (9 th Jan) Cherry Cheng (Original) Will Kwok (1 st revision)

Shatin 沙田 What we design for?

People use mobile apps is different from they use desktop and laptop computers, they have different expectations for the user experience People often use mobile-based devices while they’re on the go. Part of the job is to create a responsive, compelling experience that pulls people in and gets them to the content they care about quickly and easily. How people use mobile- based devices

Who are your users? What do you know about them? What type of behavior can you assume or predict? What is happening? What are the circumstances in which they will best absorb the content you intend to present? When will they interact? When they are home and have large amounts of time? At work, where they have short periods of focus? Where are they? Are they in a public space or a private space? Why will they use your app? Designing for context

In general, the largest percentage of users (at least 80 percent) use very limited number of features in an app, while only a small percentage (no more than 20 percent) use all the features. Mobile apps seldom need to provide all the features that only power users need rule

PS vs Instagram

80-20 rule Premiere Pro vs iMovie App

An app fits well on the device screen Responds to the gestures that people know Provides much of the experience people are looking for Keep the user experience uppermost in the design Mobile technologies can be found in the apps Contain a beautiful, custom app icon that people will enjoy seeing How people appreciate?

Shatin 沙田 Mobile Strategy

How much time, effort and money it will cost you? If you only target on one platform, you might possibly see success with relatively no risk Attempting to scale, you will find increase amount of time and effort required to be success With wrong strategy, it can be hard to justify and even harder to monetize the cost It’s difference from the traditional rules of business on the Web or the desktop Mobile strategy

The display is paramount, regardless of its size. Device orientation can change Apps respond to gestures, not only clicks Preferences are available in settings Onscreen User help is minimal Most Apps have a single window Platform Characteristics

Rule 1: Forget what you think you know Rule 2: Believe what you see, not what you read Rule 3: Constraints Never Come First Rule 4: Focus on Context, Goals, and Needs Rule 5: You can’t support Everything Rule 6: Don’t Convert, Create Rule 7: Keep it Simple Mobile rules

Shatin 沙田 HCI Principles

A great user interface follows human interface design principles that are based on the users think and work. A user interface that is unattractive convoluted, or illogical can make even a great application seems like a chore to use A beautiful, intuitive, compelling user interface enhances an application’s functionality and inspires a positive emotional attachment in users. Human Interface Principles

Not measure of how beautiful an application is Measure of how well the appearance of the app integrates with its function. An app gives users a clear, unified message about its purpose and its identity. For example : A game, users expect a beautiful appearance that promises fun and encourages discovery. Although people don’t expect to accomplish a serious or productive task in a game, they still expect the game’s appearance to integrate with the experience. A productive task app generally keeps the decorative elements subtle and in the background. Aesthetic Integrity

Gargeband

Aesthetic Integrity iPhoto

Consistency in the interface allows people to transfer their knowledge and skills from one application to another. A consistent application is not a slavish copy of other applications. But it is an application that take advantage of the standards and paradigms people are comfortable with. To determine whether an app follows the principle of consistency, Is the application consistent with the mobile standards? Does it use system-provided controls, views, and icons? Does it incorporate device features in a reliable way? Is the application consistent within itself? Does text use uniform terminology and style? Do the same icons always mean the same thing? Can people predict what will happen when they perform the same action in different places? Do custom UI elements look and behave the same throughout the app? Is the application consistent with its earlier version? Have the terms and meaning remained the same? Consistency

Left: common icons. Right: dashboard

When user directly manipulate onscreen objects instead of using separate controls to manipulate them, they’re more engaged with the task and they more readily understand the results of their action. For example : instead of tapping zoom controls, people can use the pinch gestures to directly expand or contract an area of the content. In mobile device, people can experience direct manipulation when they: Rotate or otherwise move the device to affect onscreen objects Use gestures to manipulate onscreen objects Can see that their actions have immediate, visible results Direct Manipulation

Clear App -

Feedback acknowledges people’s actions and assures them that processing is occurring. People expect immediate feedback when they operate a control. The built-in iOS applications, it respond to every user action with some perceptible change. For example, list items highlight briefly when people tap them. Subtle animation can give people meaningful feedback that helps clarify the results of their actions. Sound can also give people useful feedback. Feedback

When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app. For example : a folder People put things in folders in the real world, so they immediately understand the idea of putting files into folders on a computer In mobile devices, they provide great cope for metaphors, such as : tapping music playback controls, sliding on/off switches, etc Metaphors

Ring / Scroller Metaphors

Metaphors iBook – Bookshelf Outlook

User feel more in control of an app when behaviors and controls are familiar and predictable. And when actions are simple and straightforward, user can easily understand and remember them. People expect to have opportunity to cancel an operation before it begins, Expect to get a chance to confirm their intention to perform a potentially destructive action. People also expect to be able to stop an operation that’s underway User Control