Mobile User Interface Survey
March 11, 2011Hyojin Song
Contents
Introduction
Mobile Web browser UI
Mobile Application UI
Mobile Widget UI
Conclusion
2 / 30
Introduction
Mobile user interface is have become popular re-search issue› There are more mobile phones in the world than personal
computers
Current mobile devices support communication and social services through three major user interface (UI) tools
1. Mobile Web Browser2. Mobile Application3. Mobile Widget
In several conference and journal, a lot of paper is be-ing published about mobile user interface.› Mobile HCI 2010, IUI2011, Interact 2009, …
3 / 30
Introduction
4 / 30
Mobile Web Browser
The web browser on a mobile device that supports access to all web sitesthrough a conventional browser UI.
Mobile Application
The basic building block of native mobile functions.Some recent ones are also mashed-up with web content.
Mobile Widget
It delivers a small piece of web information to mobile deviceswithout user intervention.
Introduction
The current tools have some major problems› Due to the size restrictions of mobile phones, providing a
more usable interface is hard to achieve
› All the content is confined to separate applications• Navigating in mobile environment is time-consuming and prone
to error
› Mobile applications organize information through hierarchical structures
• Users need to navigate from high to low levels when performing a task
• For example, confused by the different behaviors of “Back” in web browser
5 / 30
Contents
Introduction
Mobile Web browser UI
Mobile Application UI
Mobile Widget UI
Conclusion
6 / 30
Mobile Web Browser UI
Exploring Cross-Device Web Use on PCs and Mobile Devices
Users share web information between devices› Many current mobile devices offer full-featured web browsers
that allow access to any web page› But generally used cumbersome manual methods to do so› Users visited many of the same sites on both their mobile de-
vice and PC
Automatically sharing web activity information be-tween devices has potential to improve the usability of the mobile web› Provide users with the ability to quickly look up facts, ex-
change messages with friends, read news articles, find maps or directions, etc.
Study 1: A Survey of Multi-device Web Use Study 2: Logging Web Activity on Multiple Devices
7 / 30
Mobile Web Browser UI
Exploring Cross-Device Web Use on PCs and Mobile Devices
How mobile web users accessed web sites on their mobile devices› Informants reported that they used bookmarks much more
frequently than they typed in URLs
8 / 30
Mobile Web Browser UI
Optimizing User Interaction for Web-based Mobile Tasks
The design and prototype implementation of MIntOS (Mobile Interaction Optimization System)› A system for improving mobile interaction in web-based activ-
ities› MintOS monitors users’ interactions both for gathering inter-
action history and for the runtime construction of interaction context
Interaction history is defined by a set of interaction state› Page-load event› URL-Input event› Text-Highlight event› Text-Copy event› Text-Paste event› Form-Input event
9 / 30
Mobile Web Browser UI
Optimizing User Interaction for Web-based Mobile Tasks
These demonstration employs three real world use scenarios:
10 / 30
Mobile Web Browser UI
Wish I Hadn’t Clicked That: Context Based Icons for Mobile Web Navigation and Directed Search Tasks
Examples of hyperlinks on two mobile web pages augmented with mouse-over SemantiLynx icons
11 / 30
Mobile Web Browser UI
Wish I Hadn’t Clicked That: Context Based Icons for Mobile Web Navigation and Directed Search Tasks
Overview of SemantiLynx icon generation
12 / 30
Mobile Web Browser UI
Wish I Hadn’t Clicked That: Context Based Icons for Mobile Web Navigation and Directed Search Tasks
Process of composition the icon and the algorithm
13 / 30
Mobile Web Browser UI
Find This For me: Mobile Information Retrieval on the Open Web
Search Results in a webpage› Highlighted using dotted rectangle› Each of them are presented using similar pattern
14 / 9
Mobile Web Browser UI
Find This For me: Mobile Information Retrieval on the Open Web
Result form detection› It is represented the DOM tree node
15 / 30
Contents
Introduction
Mobile Web browser UI
Mobile Application UI
Mobile Widget UI
Conclusion
16 / 30
Mobile Application UI
SocialSearchBrowser: A novel mobile search and information discovery tool
The mobile Internet offers anytime, anywhere access to a wealth of information› Limitations of mobile environments that go beyond simple
screen size and network issues
SocialSearchBrowser (SSB in short) is a map-based mobile search prototype designed to enhance the search and information discovery› See the queries and interactions of peers› Pose queries of their own
Interactions are handled on a rich map-based inter-face.
17 / 30
Mobile Application UI
SocialSearchBrowser: A novel mobile search and information discovery tool
Screenshots of the SocialSearchBrowser Application
18 / 30
Mobile Application UI
SocialSearchBrowser: A novel mobile search and information discovery tool
The software architecture of SSB consists of three components› iPhone application
• allows users to browse, answer and add queries
› Facebook application• Allows a given user’s social network to browse queries and add
new answers to those queries
› A server• Synchronizes and stores all queries in the SSB database• Feeds both applications with an up-to-date list of all queries and
answers• Using the Google Local Search API and the Eventful API• SMS notification facility
19 / 30
Mobile Application UI
Linked Internet UI: A Mobile User Interface Optimized
The Linked Internet UI› as a new mobile UI to deliver social services› It fetches and links content from existing services and uses
hypertext navigation for presentation and interaction› LinkedUI removes unnecessary boundaries of individual ap-
plications and services
Contribution of this application› Users can concentrate on the content that interests them in-
stead of accessing separate web sites applications, or wid-gets
› Enables a consistent interaction style on a mobile device by applying hypertext navigation system-wide
› Facilitate using multiple services• Twitter, Facebook, Flickr, Delicious
20 / 30
Mobile Application UI
Linked Internet UI: A Mobile User Interface Optimized
Hypertext Navigation› On mobile devices, many researches address hypertext navi-
gation in web applications› Hypertext navigation mechanisms include back-stepping,
bookmarking, and a history list› Users rely on these mechanisms to navigate in the web.
21 / 30
Mobile Application UI
Linked Internet UI: A Mobile User Interface Optimized
Screenshots of the Linked Internet UI (Hypertext navi-gation)
22 / 30
Contents
Introduction
Mobile Web browser UI
Mobile Application UI
Mobile Widget UI
Conclusion
23 / 30
Mobile Widget UI
SmartActions: Context-Aware Mobile Phone Shortcuts
Due to the size restrictions of mobile phones, provid-ing a more usable interface is hard to achieve
Context awareness can be used to facilitate the inter-action of the user by recognizing the user context
Making available appropriate shortcuts, thus minimiz-ing the user’s interaction with the device through the UI
The use of unsupervised learning to automate com-mon tasks on a mobile phone› By means of context-dependent quick-access shortcuts dis-
played in the home screen of the device
24 / 30
Mobile Widget UI
SmartActions: Context-Aware Mobile Phone Shortcuts
Screenshots of the application
25 / 30
Mobile Widget UI
Inducing Shortcuts on a Mobile Phone interface
Inducing shortcuts to automate common tasks on a mobile phone› Compare several approaches› Focused on the issue of stable vs. changing shortcuts› How the trade-off between efficiency and predictability
should be evaluated?
26 / 30
Mobile Widget UI
Comparison of Tag Cloud Layouts
Visual browsing in the tag collections is realized in dif-ferent ways; often, websites offer an interface ele-ment known as tag cloud
The analysis of the eye tracking data was performed in an exploratory manner looking for typical patterns in the visual search
27 / 30
Contents
Introduction
Mobile Web browser UI
Mobile Application UI
Mobile Widget UI
Conclusion
28 / 30
Conclusion
Mobile user interface is have become popular re-search issue› There are more mobile phones in the world than personal
computers
Due to the hardware restrictions(screen size, perfor-mance, etc.) of mobile phones, we can find several method to improve a user activity for mobile phone unlike personal computer
Context awareness technique or improvement of web navigation for mobile UI is one of the useful research topic
29 / 30
Thank You!
Any question or comment?