UNIT IV-VISUAL STYLE AND MOBILE INTERFACES

1
KONGU ENGINEERING COLLEGE
(AUTONOMOUS)
DEPARTMENT OF COMPUTER SCIENCE AND DESIGN
22CDT42- USER INTERFACE DESIGN
UNIT IV Visual Style and Mobile Interfaces
P.GOWSIKRAJA M.E., (Ph.D.,)
Assistant Professor
Department of Computer Science and Design

2
1. Visual Style and Aesthetics: Basics of Visual Design
1. Visual Design for Enterprise Applications
2. Range of Visual Styles.
2. Mobile Interfaces:
1. Challenges and Opportunities of Mobile Design
2. Approach to Mobile Design
3. Patterns

3
♣ Visual design is more than just “skinning a user interface”; visual design and
look-and-feel, done well, can make a digital product stand out.
♣ The visual language used in any given interface conveys the attitude and spirit
of your brand and stands as an avatar of it across various touchpoints.
♣ Visual design can make or break the usability of a product and trust in your
brand.
♣ “Never underestimate the power of beauty.”

4
1.Basics of Visual Design
♣ some of the principles of good visual design:
♣ Visual hierarchy
♣ Composition
♣ Color
♣ Typography
♣ Readability
♣ Evoking a feeling
♣ Images

5
1.1 Visual hierarchy
♣ Visual hierarchy refers to presentation of visual elements on any given layout. Let’s explore
the characteristics of visual hierarchy.
Clarity
♣ How well the design communicates the information the designer is trying to convey.
Actionability
♣ How the user knows what they are supposed to do on any given screen.
Affordance
♣ Affordance means that it looks or behaves like what it does.
Example, a button that looks slightly three-dimensional gives a visual cue that it is clickable.

6
1.2 Composition
♣ Composition refers to the arrangement and proportion of a visual design.
Consistency:
♣ Visual elements appear in a predictable and uniform visual language.
♣ If you employ icons in your interface design that they are always used within your
experience to convey the same functionality.
Alignment
♣ Make sure the screen elements do not move their place from screen to screen.
♣ Text that changes from left, right, or center aligned randomly is also disharmonious to
the understandability and legibility of digital product design.

7
1.3 Color
♣ When devising a color scheme for an interface,
SET OF RULE”S:
♣ Always put dark foregrounds against light backgrounds, and vice versa—to test, pull the design
into an image tool such as Photoshop and desaturate it (make it grayscale).
♣ When red or green indicate a critical distinction, make sure to also reinforce the color with a
different shape or with text.
♣ This is because many color blind people won’t be able to see the difference. Statistically, 10% of
men have some form of colorblindness, as do about 1% of women.
Avoid certain color combinations.
Example: bright blue text on a bright red background will fatique the eye. This is because blue and
red are complimentary colors, which means they are on opposite sides of the color wheel

8
Rules for color usage:
♣ Warm versus cool
♣ Dark versus light background
♣ High versus low contrast
♣ Saturated versus unsaturated
♣ Combinations of hues
♣ Don’t rely on color alone
Color references and resources
♣ https://www.colorbox.io
♣ https://color.adobe.com/create
♣ http://khroma.co

9
Warm versus Cool
Warm
colors:
Red,
orange,
yellow,
brown,
beige
Cool
Colors:
Blue,
green,
purple,
gray
white

10
Dark versus light backgrounds
♣ Dark versus light background: The screens with light backgrounds—white, beige, and light gray—
feel very different from those with very dark backgrounds.
♣ Light is more typical of computer interfaces (and printed screens); dark screens can feel
edgier, more somber, or more energetic, depending on other design aspects.

11
High versus low contrast
High versus low contrast
♣ The background is dark or light, the elements on that background might have either high or low
contrast against it.
♣ Strong contrast evokes tension, strength, and boldness; low contrast is more soothing and relaxing.

12
Saturated versus unsaturated:
♣ Highly saturated, or pure, colors—
brilliant yellows, reds, and greens,
Example—evoke energy, vividness,
brightness, and warmth. Muted colors,
either dark or light (tones or tints,
respectively), make up the bulk of most
color palettes.
♣ You probably wouldn’t want to stare
at that pink all day long in a desktop
application.

13
Combinations of hues:
♣ Two saturated colors can evoke far more energy, motion, or richness than one alone.
♣ A screen that combines one saturated color with a set of muted colors directs attention to the saturated
color and sets up “layers” of color—the brighter and stronger ones appear closer to the viewer, whereas
the grayer and paler colors recede.
♣ Flatter designs, with more muted or lighter colors, are calmer.
Don’t rely on color alone
Color is awesome, but don’t rely on color alone to indicate important
information.
Example: stop sign in the United States.
the stops signs will always look the same. They are red, they say “STOP”
and they are a distinct octagon shape. These create three cognitive cues
to indicate what is being asked of the viewer.
Color references and resources
•https://www.colorbox.io https://color.adobe.com/create http://khroma.co

14
1.4 Typography
♣ Most of the content on the web, other than videos and movies, is textual. Designing
for a legible, non–eye straining experience on the digital medium is an art all to
itself.
♣ The most important points to understand typography for digital design.

15
Types of typefaces
♣ There are a couple of terms that will help in understanding some of the finer points
around using type.
♣ A typeface refers to the name of the design of type.
♣ A font is a particular size, weight, and style of a typeface;
Example:
Helvetica Bold 12 pt,
Arial Italic 8pt,
Times New Roman 18 pt.

16
Serif: Serif typefaces have small lines and curves at the end
of the letters.
They tend to be the most common typefaces for reading dense
amounts of text.
The serif tends to subtly guide the reader from letter to letter,
thereby making the reading experience less taxing on the eye.
♣ Sans serif: It does not have lines at the end of the
letters.
♣ They tend to have a more contemporary look and the
letters tend to hold their legibility at smaller sizes,
which is one of the main reasons you will see sans
serif typefaces used frequently in user interfaces.

17
♣ Display typefaces are work well at a
very large size; they can be serif or
sans serif.
♣ Display typefaces are good for a look
and feel of a brand, in a headline or for
a logo.
♣ Never use a display typeface for large
amounts of text as display typefaces
can be overwhelming when overused
and lose legibility in smaller sizes.

18
♣ Monospace: It have letters that occupy the same space horizontally regardless of the
actual width of the character.
♣ These typefaces were used where numbers are the primary content and screens that do
not have more sophisticated ways of rendering text.
Examples where you might see monospaced fonts are interfaces of noncomputer
electronic devices, in-dash car displays, and appliance interfaces.

19
♣ Size: Type size is measured by “points,” commonly abbreviated as “pt.”
♣ Generally, you do not want to go below 10 pts for the best on-screen legibility; 12 pts seems to
be the most used standard body-text size.
♣ For small print items such as copyright information you might have in the footer of a website, 9
pts works well.

20
Leading: It refers to the vertical separation between lines of text, specifically the distance
between the baseline of one line of text and the baseline of the next line.
♣ It provide space between the lines and to prevent ascenders and descenders from overlapping.
Tracking and kerning: Tracking is the horizontal spacing between all letters. Improper
tracking can affect readability, particularly when set too tight or too wide.
Kerning is when a designer manipulates and adjusts the space (tracking) between specific
pairs of characters (usually reducing the space).
♣ Kerning helps make the letter pairs look more balanced and legible.
♣ The fonts in Google Fonts or Apple or Microsoft UI typefaces, have already been kerned to
look proportional on the screen.

22
Font pairing: Font pairing is combining two typefaces in
a design.
Combining fonts is an art unto itself, but there are now
some sites that help in aiding selection of fonts that look
good together.
There are numerous subtleties to finding combinations
that work well, but there are a couple of quick rules:
• When combining fonts that are in the same typeface
family, use a different weight or style (bold, italic) to
differentiate the text.
• Never combine two typefaces that are similar. A way
to avoid this is to pair a serif with a sans serif type

23
Paragraph alignment
♣ Paragraph alignment refers to the imaginary vertical line to which the
text of a paragraph aligns. there are four options to choose from: left
align, center align, right align, or justified.
♣ Justified text adjusts the spacing between words so that lines are both
left- and right-aligned.
♣ The center-aligned text will draw the eye because of the whitespace
around it, but use it sparingly because it is also more difficult to read.
♣ Right-aligned text and justified text are not usually used in UI
design.
Numbers: When choosing a typeface, always be sure to see what the
numbers and letters look like together. In some typefaces, it is difficult to
distinguish the lowercase letter “l” from the number “1” or “0” from the
capital letter “O.”

24
♣ Readability—the cognitive part—comes first when choosing type.
♣ Small text—or what’s called “body text” in print and on websites—demands careful consideration.
♣ The following characteristics for body text also apply to “label fonts” in graphical user interfaces (GUIs),
used to caption text fields and other controls:
1. sans serif fonts often work better at very small point sizes, unlike print, for which the serif fonts tend to
be more readable as body text. Pixels aren’t big enough to render tiny serifs well.
2. Avoid italicized, cursive, or otherwise ornamental fonts; they are unreadable at small sizes.
3. Highly geometric fonts to be difficult to read at small point sizes, like circular letters (e, c, d, o, etc.).
4. All-capital letters is too difficult to read for body text, though it works fine for headlines and short
texts. Capital letters tend to look similar and are not as easy for a reader to differentiate.
5. Set large amounts of text in a medium-width column when possible—say, around 10—12 English
words on average. Don’t right justify narrower columns of text; let it be “ragged right.
1.6 Readability

25
♣ Typefaces have distinctive voices—they have
different characteristics, textures, and colors
on the screen.
♣ Some fonts have narrower letters than others,
and some font families have “condensed”
versions to make them even narrower.
♣ The tracking might be distant or close,
making the block of text look either more
open or more solid.
♣ Cultural aspects come into play here, too.
♣ Spaciousness and crowding
1.7 Evoking a Feeling

26
Angles and curves
♣ A screen composed of straight up-
and-down lines and right angles
generally looks calmer and more still
than a screen containing diagonal
lines and nonrectangular shapes.
♣ Likewise, a screen with many different
angles has more apparent motion
than a screen with a single repeated
angle on it.

27
Texture and rhythm:
♣ Texture can add richness to visual
design.
♣ Text forms its own texture, and you can
control the look of that texture by
choosing good typefaces.
♣ For many screens and interfaces, fonts
are the most important texture element.

28
1.7 Images
Photography
♣ Photography can set the mood of a design. On the web and mobile digital products, photography is
one of the most powerful tools to establish how a brand is expressed.
♣ A well-placed photo can tell a story in a single glance much more efficiently than words could.
♣ Photographs are extraordinary tools for evoking emotional responses.
♣ Few steps keep in mind:
1. Stock art (photographs that you can purchase, sometimes royalty-free)
2. If you use a person’s face, be sure to pay attention to where the gaze of the person’s eye is
directed.
3. Try to avoid clichés when you can. How many web screens have you seen showing the same
happy, smiling faces?

29
Icons
♣ Icons are graphical representations that serve in place of text to express an idea or denote
functionality.
♣ Look for UI conventions you see on the web or from other icons.
♣ Applying common conventions found in other designs make it less likely your user will need to
relearn what the icon means.
♣ Icons all share the same visual style: the same weight, and either filled in or outlined,
Example: Don’t rely on icons alone. Use them sparingly and when you can, use text labels as
well for maximum user comprehension.
♣ Icon references and resources
1. https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons
2. https://thenounproject.com
3. https://material.io/tools/icons

30
Cultural references
♣ A design might remind you of something cultural—a brand, movies, art style,
historical era, a literary genre, or inside joke.
♣ A familiar reference can evoke memories or emotions strong enough to trump all
these other design factors, though the best designs make cultural references work in
concert with everything else.
Repeated visual motifs
♣ Good design has unity: it hangs together as one entity, with each element supporting
the others structurally and viscerally.
♣ That’s a challenging goal to achieve. I can’t give you hard-and-fast rules on how to
do it; it takes skill and practice.

31
1. Visual hierarchy
2. Composition
3. Color
4. Typography
5. Readability
6. Evoking a feeling
7. Images

32
3. Patterns

33
People expect websites and mobile applications to have strong graphic
styling, If you try to apply these principles to the controls’ look-and-feel—how
the controls are drawn—you might not have many choices.
1. Backgrounds
2. Colors and fonts
3. Borders
4. Images
5. Accessibility

34
1. Backgrounds
♣ Unobtrusive images, gradient fills, and subtle textures or repeated patterns in large background
areas can brighten up an interface to an amazing extent.
♣ Use them in dialog or screen backgrounds; tree, table, or list backgrounds; or box backgrounds
2. Colors and fonts
♣ You often can control overall color schemes and fonts in a native-looking UI, too.
♣ For instance, you might draw headlines in an unusual font at several point sizes larger than
standard dialog text, and maybe even on a strip of contrasting background color.
♣ Consider using these if you design a screen layout using the Titled Sections pattern.
3. Borders
♣ Borders offer another possibility for creative styling.
♣ if you use Titled Sections or any other kind of physical grouping, able to change how box borders
are drawn.

35
4. Images
♣ In some UI toolkits, certain controls let you replace their standard look-and-feel with custom images
on a per-item basis.
♣ Buttons often allow this, for instance, so your buttons, including their borders, can look like anything
you want.
♣ Tables, trees, and lists sometimes permit you to define how their items are drawn You also can place
static images on UI layouts, giving you the ability to put images of any dimension just about
anywhere.
5. Accessibility
♣ The biggest concern is accessibility.
♣ Operating systems such as Windows let users change desktop color/font themes, and that’s not just
for fun—visually impaired users use desktop themes with high-contrast color schemes and giant
fonts just so they can see what they’re doing.
♣ Make sure your design works with those high-contrast themes. It’s the right thing to do.

36
1. Visual hierarchy
2. Composition
3. Color
4. Typography
5. Readability
6. Evoking a feeling
7. Images

37
3. Patterns

38
♣ Visual design styles change fairly quickly.
♣ A new releases of operating systems drive a change in the visual UI styles that are adopted after their
release.
♣ Apple, Microsoft, and now Google are setting the trends for the visual styles in the applications that will
be used on their platforms.
♣ styles across these platforms and across their touchpoints: web, desktop software, and mobile
applications.
1. Skeuomorphic
2. Illustrated
3. Flat Design
4. Minimalistic
5. Adaptive/Parametric

39
Skeuomorphic
♣ A style of UI that mimics the characteristics of objects found in real life.
♣ Skeuomorphism is often used during a period of transition when a new type of interaction is
used and you want the user to understand how something works by using an idea or concept
with which they are already familiar.

40
♣ You can also use a skeuomorph
within another design style to
increase usability.
♣ In the Square Invoice set-up
process, the designer chose to use
the visual language of the real-life
physical check so that a user
would know where to locate the
routing and checking account
numbers needed to set up their
account.

41
Illustrated
♣ Interface design doesn’t need to be cold and sterile.
♣ If it makes sense for the brand, using illustration is a good way to set a fun and
approachable tone to an application or website.
♣ Using an illustrated style also sets you free from what is possible in the real world and
allows the designer to express complex concepts limited to only what’s possible in the
imagination.
♣ Eventbrite is an event-listing and ticket-purchase service that uses an illustrated style
all around its mobile application interface providing a warm and inviting visual look
and feel.

42
Florence is a site for self-employed nurses to find shifts.
This could have been a boring, staid site but the illustrations and visual design
set the tone for a fun and friendly brand.

43
Flat Design
♣ Characterized by solid background colors, simple understandable icons and sans serif typography,
flat design is one of the most widely used visual design styles you will see on the web and in mobile
apps.
♣ Think of the style of signage used in airports and in transportation and you can see why this flat
and minimal style has such universal appeal.
♣ It is culturally agnostic, easy to localize, and can scale to different viewports (screen sizes) easily.
♣ Flat design is considered a truly digital style because the visual language of the UI (with the
exception of the icons) is no longer pretending to be analogous to something in real life.
♣ Instead, the UI is meant to blend into the background and allow the user to focus on the content.
♣ Examples: Demonstrate flat design in a mobile application. What are the commonalities you see?
Do you see solid colors, a single typeface used at different sizes, use of two-dimensional icons?
When you pay attention to this visual style you will notice that it is used everywhere.

45
♣ AirVisual is a mobile application that
shows the air quality in cities throughout
the world.
♣ It employs a combination of flat design and
custom illustrations for a clear and usable
visual presentation.
♣ For more details on flat design
• https://www.microsoft.com/design/fluent
• https://material.io/design

46
Minimalistic
♣ Minimal designs reduce the screen elements to
the barest minimum.
♣ You will often see minimal designs used in task-
based apps when the things that a user can do
are straightforward or the interface is primarily
used for viewing data rather than inputting or
manipulating data.
♣ Clear Todos is an extreme example of showing
only shades of color and text and very limited
Visual UI cues as to how the interface works.

47
♣ The Calm app(left) shows
only what is absolutely necessary
for the user to see on any given
screen.
Example: one button is used to
control the functionality and a subtle
but helpful animation instructs the
user what to do.
♣ Apple Health(right) uses
bold colorful information graphics
as the core of its visual UI.

48
♣ Glitché is an application to create
“glitch” style photos and videos.
♣ Its minimal UI allows the user to
focus on the task and doesn’t take
valuable screen estate away from the
primary task of photo and video
editing.
♣ Brian Eno’s Bloom music application
uses only audio cues to inform the
user how to interact with it.
♣ The experience relies on subtle,
muted color changes and ambient
sound that encourages exploration
and creation.

49
Adaptive/Parametric
♣ On the extreme end of minimalism, adaptive or parametric refers to designs where
the form is not static or defined but rather generated algorithmically, in relationship to
the objects (static or dynamic) that come in proximity.
♣ You will see this type of interface paradigm often used in video or photo applications,
and more and more you will see it in other types of interfaces.
♣ A written definition does not do this type of design justice.
♣ Imagine an interface that is mostly invisible until it comes into contact with something
that enables an interaction to happen—then the UI reveals itself and wraps around the
object with which a user can interact.

50
♣ When creating visual designs for this
kind of interface, creating a high-
contrast and fluid UI visual style is
key.
♣ Apple Measure is a measuring tool
that comes with iOS.
♣ To measure something, the user points
their phone or tablet at the object and
then the measuring tools and
functions assemble themselves onto
the interface.

51
♣ Simple is a mobile banking application.
♣ To deposit a check, a user is prompted to take a photo of the check, and the UI will emerge to
indicate when the photo is in the correct place and when a photo can be captured.

52
3. Patterns

53
2. Mobile Interfaces: Challenges and Opportunities of Mobile Design
♣ When you design for a mobile platform, you face challenges that you don’t encounter when
your user can be presumed to be viewing a large screen and using a keyboard.
1. Tiny Screen Sizes
2. Variable Screen Widths
3. Touch Screens
4. Difficulty of Typing Text
5. Challenging Physical Environments
6. Location Awareness
7. Social Influences and Limited Attention

54
1. Tiny Screen Sizes: Mobile devices just don’t offer much space to present information or choices.
♣ Sadly, you don’t have the luxury of sidebars, long header menus, big images that don’t do
anything, or long lists of links.
♣ You need to strip your design down to its essence—take away all the extra stuff you can.
♣ Leave the most important functions on the front screen and either discard the rest or bury them
deeper in the site.
2. Variable Screen Widths: It’s difficult to make a design 360 pixels wide and 640 pixels wide.
♣ Scrolling down a mobile screen isn’t terribly onerous (which is why width gets special mention, not
height), but the design needs to use the available screen width intelligently.
♣ Some sites end up creating different versions—with different logo graphics, different navigation
options, and so on—for the smallest keypad devices, and another for the iPhone-size class of touch
devices.

55
3. Touch Screens Most mobile web and app access comes from devices with touch screens.
♣ Keypad devices are constitute the majority of existing mobile devices, to bias the design of touch-screen experience.
♣ Links on keypad devices can be navigated with keys fairly easily, as long as you follow good design principles.
♣ It’s difficult to touch small targets accurately with fingers.
♣ Make your links and buttons large enough to easily touch; at a minimum, make important targets at least 48 × 48
dp (9 mm) for Android devices2 and 44pt × 44pt for Apple iOS3 on each side, and put space between them.
♣ This reduces the available space for other content, of course.
4. Difficulty of Typing Text: No one likes typing text on a touch screen or keypad.
♣ You should design interaction paths through your site or tool in such a way that typing is unnecessary or very
limited.
♣ Use “Auto Completion” in text fields whenever possible, for instance, and prefill form fields whenever you can do so
reliably. Remember that numbers are much easier than text in some contexts, however.

56
5. Challenging Physical Environments:
♣ People use their phones and other devices in all kinds of places: outside in the bright sun, in
dark theaters, in conference rooms, cars, buses, trains, planes, stores, bathrooms, and in bed.
♣ Think about the ambient light differences, to begin with—tasteful gray text on a gray
background might not work so well in direct sun.
♣ Think also about ambient noise differences: assume that some users won’t hear the device
at all, and that others might find sudden noises jarring and inappropriate.
♣ Think about motion. Tiny text is difficult to read when the device (or the user) is moving
around. And a tiny hit target on a touch-screen device will be challenging to use under the
best of circumstances, but it can be nearly impossible on a rocking and jolting bus. Again,
design for “fat fingers,” and design so that mistakes are easily corrected.

57
6. Location Awareness: Mobiles are on the go with their users. to locate exactly where they are
being used.
♣ It is possible to design for scenarios in which information specific to the location can be served
up and paired with the local data.
♣ Most of the time, mobile users won’t spend lots of time and attention on your site or app.
♣ They’ll be looking at your design while doing other things—walking, riding in a vehicle, talking
with other people, sitting in a meeting, or—but most preferably not—driving.
♣ Occasionally a mobile user will focus their full attention such as when playing a game, but
they won’t do it as often as someone sitting at a keyboard will.

58
♣ Design for distracted users: make the task sequences easy, quick, and reentrant.
make everything self-explanatory.
♣ Another assumption you can make is that lots of mobile users will be engaging in
conversations or other social situations.
♣ They might pass around the device to show people something on the screen. They
might have people looking over their shoulder.
♣ They might need to suddenly turn off the sound if it’s not socially acceptable to have
a noisy device—or they may turn it up to let others hear something.
♣ Does your design behave well in these situations? Can it support graceful social
interaction?

59
2. Mobile Interfaces: Challenges and Opportunities of Mobile Design
♣ When you design for a mobile platform, you face challenges that you don’t encounter when
your user can be presumed to be viewing a large screen and using a keyboard.
1. Tiny Screen Sizes
2. Variable Screen Widths
3. Touch Screens
4. Difficulty of Typing Text
5. Challenging Physical Environments
6. Location Awareness

60
3. Patterns

61
Approach to Mobile Design
♣ If you’re simply trying to take a site’s usual content and cram it into a 360 × 640 window,
stop. Take a big step back and look at the whole picture.
1.What Do Users in a Mobile Context Actually Need?
2.Strip the Site or App Down to Its Essence
3.If You Can, Use the Device’s Hardware
4.Linearize Your Content
5.Optimize the Most Common Interaction Sequences
Some Worthy Examples

62
1. What Do Users in a Mobile Context Actually Need?
♣ Design for use contexts such as these:
♣“I need to know this fact right now, quickly.”
♣“I have a few minutes to spare, so entertain me.”
♣“Connect me socially.”
♣“If there’s something I need to know right now, tell me.”
♣“What’s relevant to the place I’m in right now?”

63
2. Strip the Site or App Down to Its Essence:
♣ Don’t be afraid to take away all that other stuff—the extra
content, eye-catching features, sidebars, pull quotes, ads,
images, site maps, social links, and so on.
♣ Focus tightly on the few tasks that mobile users will need
from your site, use minimal branding, and chuck the rest.
♣ In the home screen (for a website) or the first working screen
of an app, relevant content appears high on the screen.
♣ it means getting rid of the “layer cake effect” of logos, ads,
tabs, and headers that stack up on the screen.

64
3. If You Can, Use the Device’s Hardware:-
♣ Mobile devices offer wonderful features that you don’t get on the desktop.
♣ Location, camera, voice integration, gestural input, haptic feedback such as bumps and vibrations,
and other features can be available to you.
♣ Some devices multitask so that your app can be running in the background while the user is doing
other things; can you use that?
4. Linearize Your Content
♣ Many devices simply don’t give you enough pixels in the width dimension to do any interesting side-
by-side layouts.
♣ Instead of forcing the issue, just accept that one way or another, your content will end up being laid
out vertically. Order the mobile site’s content so that it “reads well” when laid out this way.

65
5. Optimize the Most Common Interaction Sequences
♣ Typical mobile users will want to perform, and you’ve narrowed down the site to only the most
relevant content, try to make those tasks as easy as possible by following these heuristics:
1. Eliminate typing, or reduce it to as few characters as possible.
2. Use as few screen loads as possible, and don’t inflate screens with unnecessary bytes. Download
times can be very slow; most parts of the world are still outside the reach of high-bandwidth wireless
internet facilities.
3. Reduce scrolling and sideways dragging, except where it eliminates screen loads and typing. In
other words, prefer one long vertical screen to many small screens if you need to present a lot of
content.
4. Reduce the number of taps it takes for a user to reach the desired information or accomplish a task.
Tapping large hit targets—or using hardware buttons—is better than typing by a long shot, but try to
reduce them anyway.

66
♣ Some Worthy Examples
Here are some mobile versions of home screens that manage to
meet most of the design constraints listed in the preceding section
while retaining the branding and personality of each site.
In some of these examples, I show the mobile web (internet) version
and the mobile app version for comparison.
♣ Lugg is an on-demand moving service. Its mobile web and
mobile app both follow good mobile design practices.
♣ Lugg focuses on the main task point of its service and have big
touch targets for text inputs and buttons and a clear call to
action.
♣ All the most important information is easily seen at a glance.

67
Booking.com mobile website and native-iOS app
The New York Times crossword puzzle on a native-iOS
mobile app and the NPR One app

69
Approach to Mobile Design
♣ If you’re simply trying to take a site’s usual content and cram it into a 360 × 640 window,
stop. Take a big step back and look at the whole picture.
1.What Do Users in a Mobile Context Actually Need?
2.Strip the Site or App Down to Its Essence
3.If You Can, Use the Device’s Hardware
4.Linearize Your Content
5.Optimize the Most Common Interaction Sequences
Some Worthy Examples

70
3. Patterns

71
Patterns
♣ The need to structure content in a vertical column for maximum flexibility. The Vertical
Stack pattern goes into more detail.
♣ A mobile application needs a way to show its top-level navigational structure.
♣ A persistent toolbar across the top or bottom of each app screen is one standard way to
organize a mobile interface; tabs and full-screen menus are two other common ways. Less
obvious, yet worth mentioning, are the Filmstrip and Touch Tools patterns.
♣ Mobile web screens often use the Bottom Navigation pattern for their global menus,
preferring to use valuable top-of-screen space for more immediately relevant content.

72
♣ Lists are everywhere in the mobile world—lists of apps, pictures, messages, contacts, actions,
settings, applications should present well-designed lists that look good and are usable.
♣ Ordinary text lists are often adequate, and Carousel and Thumbnail Grid work beautifully in mobile
designs.
♣ Sometimes, an Infinite List suits the needs of mobile designs. Following are the other patterns
♣ Collections and Cards
♣ Infinite List
♣ Generous Borders
♣ Loading or Progress Indicators
♣ Richly Connected Apps

73
Vertical Stack
♣ Order the mobile screen’s content in a vertical column, Text elements
line-wrap, and the screen scrolls down past the bottom of most device
screens.
♣ if they contain text-based content and forms.
♣ A fixed-width design that’s too big for the physical device can scroll
sideways or be zoomed.
♣ Thumbnail images can fit beside text fairly easily, and it’s common to do
this in lists of articles, contacts, books, and so on—see the Collections
and Cards pattern.
♣ Make sure the design degrades well when the screen width is reduced to
128 pixels

74
Examples
♣ ESPN places only the most
immediately relevant content on the
home screen, preferring to put the
rest behind menu items on a strip
at the top of the screen.
♣ The Washington Post puts it all out
there; the stack shown in the figure
is just a small fragment of the
entire screen! REI simply shows a
menu of all the available places and
ways to shop, with a teaser, on its
home screen.

76
Filmstrip
♣ Allow users to navigate by swiping back and forth
to view content one screen at a time.
♣ You have screens of content that are conceptually
parallel, such as the weather in different cities or the
scores in different sports.
♣ Users won’t mind swiping through these screens,
going through several before reaching the one they’re
looking for, because they are all potentially
interesting.
♣ This pattern can sometimes be a viable alternative to
other navigation schemes for mobile apps, such as
toolbars, tabs, or full-screen menus.

77
♣ Swiping seems to be a very satisfying gesture for some users.
Disadvantage:
♣ it doesn’t scale very well;
♣ you can’t use too many top-level screens, or users might become irritated at being forced to
swipe too many times to get to a desired screen.
♣ It is lack of transparency. A new user, just seeing your app for the first time, cannot easily
see that swiping is how they get from one screen to another.

78
Examples
♣ The BBC News iPhone app structures its main screens as a Filmstrip. The user can swipe or tap
back and forth between the Top Stories, My News, Popular, Video, and Live.

80
Touch Tools:
♣ Show certain tools in response to a touch or key press.
♣ Functions appear in small, dynamic overlays atop the
content.
♣ Netflix is a digital product that allows viewers to watch
video content.
♣ The intent is that the user will be mostly focused on the
video content but might want to pause, turn captioning on
and off, rewind or fast forward the video from time to time.
♣ The user can invoke the functionality by tapping the
screen.
♣ The options go away again after about five seconds
of nonuse.
Touch Tools on the Netflix mobile application

81
Examples
♣ The video player on the iPhone shows Touch Tools when the user taps the indicated area of the screen. They
disappear after about five seconds of nonuse.
YouTube for iPhone Touch Tools

82
Bottom Navigation
♣ Place the global navigation at the bottom of
the screen.
♣ Amazon uses a simple “Bottom Navigation”
system on the global footer of its mobile
website (Figure right).
♣ A mobile website needs to show some global
navigation links, but these links represent
low-priority paths through the interface for
many users.
♣ Your highest priority on the site’s front
screen is to show fresh, interesting content.
Apple Notes and Amazon’s Bottom Navigation

83
♣ NPR’s Bottom Navigation and REI’s footer

84
Collections and Cards
♣ Collections are series of thumbnail photos that serve as a
list of items from which a user can choose, as illustrated in.
♣ Cards are similar but they contain content and
functionality.
♣ You will see these used frequently on ecommerce sites, sites
that have video content, and news sites.
♣ You need to show lists of articles, blog entries, videos,
applications, or other complex content.
♣ Many or all of these have associated images. You want to
invite the user to click or tap these items and view them.
The Collections and Cards pattern

85
Examples
♣ Many news sites use this pattern to show their articles, and videos and other media fit this pattern naturally. These help a user scan down a list and pick out
items. Jacobin, NPR and The Atlantic offer examples of this pattern effectively for their feature articles.

86
Infinite List
♣ An Infinite
List shows more and more
content as the user
scrolls to the bottom of a
long list, as demonstrated
in Figure: Infinite scrolling.
Infinite scrolling

87
Examples
♣ Several iPhone applications
use Infinite List, including Mail, as
well as third-party apps such as
Facebook (Figure, left).
♣ The Facebook mobile web, like the
full-size Facebook screen, loads up
the first several screens of updates
and then lets the user load more.
♣ Apple’s email application (Figure,
right) offers an endless scroll to
accommodate varying lengths of
email a user might have in their
inbox.
Facebook and Apple iOS email

88
Generous Borders
♣ Leave lots of space around tappable UI elements. On devices with touch screens, put large
margins and whitespace around buttons, links, and any other tappable control.
♣ You need to use buttons with text labels, or a list of items, or ordinary text-based links—in
short, any touch target that isn’t already large on the screen.
♣ 48 × 48 dp (9 mm) for Android devices
♣ 44 pt × 44 pt for Apple iOS

89
Examples
♣ Autodesk’s Sketchbook
application (Figure, left) for the
iPhone reliably puts plenty of
margin space around its touch
targets.
♣ The entire application has a
relaxed, uncramped feeling.
♣ The Zoom mobile app (Figure,
right) has large buttons that
make it easy for a finger to hit the
touch target.
Autodesk’s Sketchbook and Zoom app

90
Loading or Progress Indicators
♣ Use microinteraction (a single task-based event with a device) animations used to inform the
user that something is going to happen but it just hasn’t appeared on the screen yet.
♣ You can use these to indicate an unspecified or estimated amount of time it will take for the
screen to load or for a task to be completed and show on the screen.
♣ Done well, they can make a slow download bearable and even be a way to create a brand-
building moment.
♣ The user has to wait for content to load, especially in a screen that changes dynamically in
response to user interaction.

91
Examples
♣ Trulia (Figure, left) is a real estate application that
uses an infinite loop on the top of the screen to
indicate the screen is loading, and image
placeholders to let the user know something is
about to happen.
♣ SoundHound (Figure, right) is an app that allows a
user to “listen” to music to search for the name and
artist of a song.
♣ After a user taps the button to listen to a song, a
beautiful and simple animation starts to indicate
that the system is listening and searching for a
match.
The Trulia loading screen and SoundHound’s
animated progress indicator

92
Richly Connected Apps
♣ Use the features that come for “free” with your mobile device.
Examples: these are direct links to other apps, such as the camera,
the phone dialer, map, or browser; prefilling credit card passwords and
address with data from the user’s current context.
♣ The mobile app shows data that is “connectable” in obvious ways,
such as phone numbers and hyperlinks. More subtly, your app can
offer ways to capture images (via the device camera), sound, or
video.
♣ It might even be aware of social networking conventions, such as
Facebook or Twitter usernames.
♣ Your app might direct the user to another app to perform these
device-based functions.

93
Examples: Consider all the ways that data in your app can connect directly to other
mobile functions:
♣ Phone numbers connect to the dialer
♣ Addresses connect to the map, or to the contacts app
♣ Dates connect to the calendar
♣ Email addresses connect to the email app
♣ Hyperlinks connect to the browser
♣ Music and videos connect to media players

94
Example: Google’s Calendar app:
♣ Google’s Calendar application integrates with the phone, maps, contact lists, and email.

95
Make It Mobile
♣ It isn’t difficult to see that smartphone and tablet interfaces are not afterthoughts but critical
to the success of digital products.
♣ The mobile web or application you create might be the primary way a user experiences your
brand, so give special attention to the small details, microinteractions, usability, and the
mobile context of use.
♣ Lists are everywhere in the mobile world—lists of apps, pictures, messages, contacts,
actions, settings, everything! Both web screens and applications should present well-
designed lists that look good and are usable.

96
♣ Ordinary text lists are often adequate, and Carousel and Thumbnail Grid work beautifully in mobile
designs.
♣ Sometimes, an Infinite List suits the needs of mobile designs. Following are the other patterns
♣ Collections and Cards
♣ Infinite List
♣ Generous Borders
♣ Loading or Progress Indicators
♣ Richly Connected Apps

97
3. Patterns

UNIT IV-VISUAL STYLE AND MOBILE INTERFACES

More Related Content

Similar to UNIT IV-VISUAL STYLE AND MOBILE INTERFACES (20)

More from GOWSIKRAJA PALANISAMY (20)

Recently uploaded (20)

UNIT IV-VISUAL STYLE AND MOBILE INTERFACES