5 - Designing For Mobile and Other Devices

Advanced Human Computer Interaction 11/24/2019
Advanced Human Computer

Interaction
Riphah Institute for Computing and
Applied Sciences
Dr. Ayesha Kashif
Designing for Mobile and other

Devices
Dr. Ayesha Kashif – Riphah Int. Univ 1

Designing for Mobile

▪ Anatomy of Mobile App
▪ Handheld format apps
▪ Tablet format apps
▪ Mobile Navigation, Content and Control Idioms
▪ Browse controls
▪ Navigation and toolbars
▪ Drawers
▪ Sorting and Filtering
▪ Inter-App Integration
▪ Other Devices
The Mobile Web

▪ websites and applications on tablets and phones
▪ responsive design
▪ a single version that dynamically adapts to the screen on which
it’s being viewed
▪ Separate mobile version
▪ alternative (and, sometimes, more effective) approach is to create
a separate mobile version of the site or application
▪ Critical to think about how your designs accommodate touch
interaction and other sensors, as well as
▪ how they perform in sunlight and other challenging lighting
conditions.

Handheld format apps

▪ Stacks
▪ list-like display for most types of content or control
▪ a top and/or bottom bar for navigating content and accessing functions.
▪ Most iOS, Android, and Windows Phone apps follow this top-level
pattern

▪ Screen carousels
▪ alternative top-level pattern that is most appropriate for a
dashboard- like display that has multiple instances or variants
▪ between which the user can quickly navigate via a swipe gesture
to the left or right.
▪ The classic example of this pattern is the iOS Weather app
▪ A place marker widget in the bottom bar shows the user his
current position in the sequence of screens.


▪ Orientation and layout
▪ app can dynamically rearrange its layout to better suit the
current screen orientation(portrait or landscape).

▪ Browse controls
▪ Drawers
▪ Other Devices

Tablet format apps

▪ Stacks and index panes
▪ vertically stacking a primary area and one or more tab, navigation, and
action bars.
▪ Index pane lists content items, such as your e-mail inbox or search results,
▪ Main content pane the current selection of which is displayed in detail
in the main content pane
Tablet format apps

▪ Pop-up control panels
▪ Pop-up panels are different from dialogs, in that they are attached to a
particular control or content object and are used to make changes to
parameters associated with that object.
▪ This association typically is shown via a speech balloon caret that
extends from the pop-up canvas to the control it is associated with


▪ Browse controls
▪ Drawers
▪ Other Devices
Browse controls
▪ Lists
▪ Lists are the most frequently
used pattern for organizing
content on handheld format
touchscreen devices.
▪ list views often work in
conjunction with tab bars to
provide access to multiple
screens of content, each in its
separately maintained list.
▪ Apple’s Music app is a good
example of this, with lists of
albums, artists, and songs
available on different tabs,
each with its own (slightly
different, but related) drill-
down hierarchies

Browse controls
▪ Grids
▪ Grids are used to organize content such as apps, thumbnails, and function icons
into regular rows and columns.
▪ The most obvious example of this is the home screen of the iPhone, with its editable
grid of app icons.
▪ Android supports a similar interface.
▪ Microsoft has taken the idea of the app icon grid and transformed it into the more
innovative Start screen grid. It mixes apps and notifications in an aesthetically
pleasing and useful way
Browse controls
▪ Grids
▪ Most apps that use
grids as a primary
navigation and
selection
mechanism,
▪ such as Rdio, use
pageless, and
sometimes infinite,
vertical scrolling to
expose more grid
objects (albums in
this case).

Browse controls
▪ Content carousels
▪ Screen carousels use a
horizontal swipe gesture to
navigate between similar
full-screen layouts
containing different data
▪ Content carousels live
within a single screen
layout but
▪ use the same type of
gesture to allow navigation
between different content
objects that are presented
within that screen.
the arrow that indicates a drilldown to the details of each
carousel item is sized and positioned such that it looks more
like a way to navigate to the next carousel item.
Browse controls
▪ Swimlanes
▪ Swimlanes are a clever mash-up of the carousel concept with a grid. They
combine the, carousel’s natural browsability with the data density that only
a grid can permit.
▪ Simply put, swimlanes are a vertical stack of carousels,
▪ each of which can be scrolled horizontally, independent of the others.
▪ Navigating to other swimlanes is a simple matter of vertical scrolling.

Browse controls
▪ Cards
▪ card-based UI—a self-contained interactive object
▪ combining media, text, web links, and
▪ social actions such as commenting, sharing, tagging, and adding media.
▪ Facebook and LinkedIn both use cards as a central idiom in their
handheld apps
Browse controls
▪ Google’s cards
▪ are small encapsulations of data
pulled from other Google
services, such as
▪ weather, maps, stocks,
restaurant reviews, and
notifications pulled from
calendar and e-mail data.
▪ Tapping their content takes the
user to the full app or web
interface from which they
originated,
▪ providing an avenue for deeper
interaction if desired


▪ Browse controls
▪ Drawers
▪ Other Devices
Navigation and tool bars

▪ Tab bars
▪ Tab bars contain a set of text and/or icon buttons
▪ Tapping a tab button switches to a different list or grid view in
the main content area


▪ Tab bars
▪ Some tablet apps use vertical tab bars aligned to the left edge of
the screen.

▪ Tab carousels
▪ Combines the concept of tabs
with that of horizontally
swipable carousels.
▪ Tabs are shown in the tab bar
as usual but extend off the
edges of the screen.
▪ The selected tab is centered or
otherwise highlighted in the
tab bar.
▪ Tapping another tab selects it.
▪ Swiping the tab bar (and, in
some cases, the view it
controls) selects the adjacent
tab on the left or right and
slides the contents into view


▪ Nav bars and action bars
▪ Nav bars, located at the top of the screen, provide a way to navigate a list or grid
hierarchy
▪ Android calls this set of controls an action bar. Frequently, function menus
or buttons are included on the right.
▪ Most versions of Android (and Windows Phone, as of 8.1) have a system-
level navigation bar at the bottom.

▪ Tool carousels
▪ Tool carousels seem
particularly popular
with image processing
apps such as Google’s
Snapseed
▪ Each item in the tool
carousel is a labeled
thumbnail that both
describes and shows a
small example of the
filter or effect applied
to an image.


▪ Browse controls
▪ Drawers
▪ Other Devices
Drawers
▪ vertical list of navigational
elements similar to tabs.
▪ hide in a panel that lives in a
layer under the main content
area.
▪ The drawer icon is also called
the hamburger menu icon
due to its shape: three short,
stacked lines.
▪ sometimes, swiping across
the main content area—
slides the content area
horizontally to reveal the
drawer under it.

Drawers
▪ Secondary-action
drawers
▪ can be used to interact
with a secondary set of
objects in the app.
▪ Drawers usually slide open
from the left, but not
always. Some secondary
actions are put in a drawer
that deploys from the
right.
Drawers
▪ Double Drawers

Drawers
▪ Item-level drawers

▪ Browse controls
▪ Drawers
▪ Other Devices

Sorting and Filtering

▪ the combination of limited screen real estate and
▪ the limited amount of time users typically have in an on-
the-go mobile context
▪ limits the number of search results users will want to scroll
through to a few screens at most.
▪ Thus, sorting effectively results in filtering out items at the
bottom of the sort.
▪ Add to this the fact that users don’t always understand the
difference between sorting and filtering, and you can
anticipate the appropriate strategy for these functions on
mobile: Merge them into a single set of controls.

▪ Amazon’s iPhone app, has a straightforward search that remembers
recent searches.
▪ It also has a clear Refine button in the nav bar of the search results;
▪ But the refine UI infuriatingly forces you to choose a department before
you can even see a sort by option (or any other filter options) and
▪ takes you back to the results page before you can choose it! The
consequence is that users may not even realize that additional sort and
filter options are available.


▪ The OpenTable app,
▪ The search portion of the interface has appropriate filters
for a restaurant reservation app built in:
▪ time and location, as well as the expected keyword search
for restaurants.
▪ Both time and location are also sensibly prepopulated.
▪ Search refinement options are clear and simple,
▪ with the most important at the top, and more fussy criteria
collapsed at the bottom.
▪ The only faux pas OpenTable makes is placing its filter
control behind a somewhat obscure icon in the lower right
of the screen, where people are almost sure to miss it.


▪ Yelp and Amazon both get another detail right: Filtered
results are indicated by a narrow filter bar anchored to the
top of the results view.
▪ This bar contains a terse textual summary of all current
filters on the results.
▪ A nice addition to this interface would be the ability to
swipe horizontally to see a full list of active filters (the list is
truncated in the Yelp interface).
▪ Another advantage would be the ability to tap to toggle the
filters on and off without needing to return to the refine
screen.

Inter-App Integration
▪ Standalone apps tend not to foster the useful integration of
functionality and data between them.
▪ The iPhone and other modern smartphones currently do a
reasonable job of integrating the phone and contacts apps.
▪ When a call arrives, you can see the full name from the address
book and, by tapping a button in the address book, you can dial
it.
▪ However, this integration could be taken a step further. Clicking a
name in an address book could give you a reverse chronological
list (or set of lists) of all documents that are associated with that
person:
▪ appointments, e-mails,
▪ phone calls from the log,
▪ memos including the caller’s name,
▪ websites associated with the person, and so on.

▪ Similarly, when an incoming call arrives,
▪ the phone could check your location (such as a cinema) or
▪ see if you are currently in a meeting that’s on your calendar.
▪ It could automatically silence the ringer (and perhaps even send
an “I’m busy and will call you back later” text message to the
person calling you)
▪ unless the call is from someone on your VIP list of callers.
▪ It’s unfortunate that phone
manufacturers haven’t yet
applied this kind of
integration to the core suite
of phone apps.
▪ However, some clever apps
like IFTTT (If This Then
That)
▪ do allow apps that
participate in their service to
be wired together with
customizable rules
▪ that allow for some level of
app integration


▪ Browse controls
▪ Drawers
▪ Other Devices
Other Devices
▪ device-embedded interfaces
▪ Unlike software running on a desktop computer or high
resolution mobile device,
▪ interaction design for device-embedded interfaces requires
special attention
▪ to create an experience that coexists with the noise and activity
of the real world happening around the product,
▪ combined with the typically limited screen and computational
resources needed to render it.
▪ Kiosks and other embedded systems, such as
▪ TVs,
▪ microwave ovens,
▪ automobile dashboards,
▪ cameras,
▪ bank machines, and
▪ laboratory equipment,
▪ are unique platforms with their own opportunities and limitations.

Other Devices: General Design Principle

▪ Don’t think of your product as a computer.
▪ users will approach your product with specific expectations
about what the product can do
▪ quick and direct access to data and controls
▪ “Cancel” is not an appropriate label for a button to turn off
an oven, and
▪ requiring people to enter a “settings” mode to change the
temperature on a thermostat is preposterous.

▪ Integrate your hardware and
software design
▪ embedded systems are usually
intended to help accomplish a very
specific task
▪ cost, power, and form factor
constraints, hardware-based
navigation and input controls must
often take the place of onscreen
equivalents.
▪ It is therefore critical to design the
hardware and software elements of
the system’s interface— and the
interactions between them—
simultaneously, and
▪ from a goal-directed, ergonomic,
and aesthetic perspective
▪ Hardware and software combine
seamlessly to create a compelling
and effective experience for users


▪ Let context drive the design
▪ embedded systems either are designed for
▪ on-the-go use (handhelds), in an active workspace (like an
operating theater), or are
▪ stationary but in a location at the center of public activity
(kiosks).
▪ a host juggling plates of hot food at a dinner party is distracted,
not in a focused state of mind to navigate a cumbersome set of
controls for a smart oven.
▪ Navigation systems built into a car’s dashboard cannot safely use
“soft keys” that change their meaning in different contexts,
because the driver would be forced to take her eyes off the road
to read each function label.
▪ Thus, the design of embedded systems must match very closely
the context of use.

▪ Use modes judiciously, if at all
▪ When designing for embedded systems, it’s important to
limit the number of modes.
▪ Ideally, mode switches should result naturally from
situational changes in context.
▪ For example, it makes sense for a smartphone to shift into
telephone mode when an incoming call is received and to
shift back to its previous mode when the call is terminated.
▪ If modes are truly necessary, they should be clearly
accessible in the interface, and the exit path should also be
immediately clear.


▪ Limit the scope
▪ Users will be better served by devices that enable them to do a
limited set of tasks more effectively, than by devices that attempt
to address too many disparate tasks in one place.
▪ Many devices like smart phones and slate computers share
information with desktop systems.
▪ It makes sense to approach the design of such systems as satellites
of the desktop:
▪ The device is an extension, or satellite, of the desktop, providing
key information and functions in contexts where the desktop
system is unavailable.
▪ Scenarios can help you determine what functions are truly useful
for such satellite systems.

▪ Balance navigation with display density
▪ Every pixel, segment, and square millimeter of display is
significant in the design of display-constrained embedded
systems.
▪ Such limitations in display real estate almost always result in a
trade-off between clarity of information displayed and
complexity of navigation.
▪ develop a simple and understandable hierarchy of information
▪ Determine the most important information to get across, and
make it the most prominent.
▪ e.g. display the temperature that the oven has been set to reach
and, next to that, show a small bar graph that registers how close
to the desired temperature the oven currently is.


▪ Minimize input complexity
▪ it’s important that input be limited and simplified as much as
possible
▪ Public kiosks run an unfortunate risk of being a disease vector, so
your first pass should try for noncontact inputs like voice,
proximity switches, or non-contact gestural inputs.
▪ touchscreens can display soft keyboards if they are large enough;
each virtual key should be large enough to make it difficult for
the user to accidentally mistype.
References
▪ Alan Cooper , About Face
▪ Steve Krug’s Don’t Make Me Think, Revisited
(New Riders, 2014)
▪ Louis Rosenfeld and Peter Morville’s Information
Architecture for the World Wide Web .
▪ https://alistapart.com/
▪ Ethan Marcotte’s Responsive Web Design (A
Book Apart, 2011).

5 - Designing For Mobile and Other Devices

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

5 - Designing For Mobile and Other Devices

Caricato da

Copyright:

Formati disponibili

Advanced Human Computer Interaction 11/24/2019

Advanced Human Computer

Designing for Mobile and other

Dr. Ayesha Kashif – Riphah Int. Univ 1

Designing for Mobile

The Mobile Web

Dr. Ayesha Kashif – Riphah Int. Univ 2

Handheld format apps

Handheld format apps

Dr. Ayesha Kashif – Riphah Int. Univ 3

Handheld format apps

Designing for Mobile

Dr. Ayesha Kashif – Riphah Int. Univ 4

Tablet format apps

Tablet format apps

Dr. Ayesha Kashif – Riphah Int. Univ 5

Designing for Mobile

Dr. Ayesha Kashif – Riphah Int. Univ 6

Dr. Ayesha Kashif – Riphah Int. Univ 7

Dr. Ayesha Kashif – Riphah Int. Univ 8

Dr. Ayesha Kashif – Riphah Int. Univ 9

Designing for Mobile

Navigation and tool bars

Dr. Ayesha Kashif – Riphah Int. Univ 10

Navigation and tool bars

Navigation and tool bars

Dr. Ayesha Kashif – Riphah Int. Univ 11

Navigation and tool bars

Navigation and tool bars

Dr. Ayesha Kashif – Riphah Int. Univ 12

Designing for Mobile

Dr. Ayesha Kashif – Riphah Int. Univ 13

Dr. Ayesha Kashif – Riphah Int. Univ 14

Designing for Mobile

Dr. Ayesha Kashif – Riphah Int. Univ 15

Sorting and Filtering

Sorting and Filtering

Dr. Ayesha Kashif – Riphah Int. Univ 16

Sorting and Filtering

Sorting and Filtering

Dr. Ayesha Kashif – Riphah Int. Univ 17

Sorting and Filtering

Sorting and Filtering

Dr. Ayesha Kashif – Riphah Int. Univ 18

Sorting and Filtering

Dr. Ayesha Kashif – Riphah Int. Univ 19

Dr. Ayesha Kashif – Riphah Int. Univ 20

Designing for Mobile

Dr. Ayesha Kashif – Riphah Int. Univ 21

Other Devices: General Design Principle

Other Devices: General Design Principle

Dr. Ayesha Kashif – Riphah Int. Univ 22

Other Devices: General Design Principle

Other Devices: General Design Principle

Dr. Ayesha Kashif – Riphah Int. Univ 23

Other Devices: General Design Principle

Other Devices: General Design Principle

Dr. Ayesha Kashif – Riphah Int. Univ 24

Other Devices: General Design Principle

Dr. Ayesha Kashif – Riphah Int. Univ 25

Potrebbero piacerti anche