Unit 1
Introduction
Field of Interface Design
• A time when navigated phones using small arrow keys or a rough scroll
ball, a time when a calculator and an alarm clock were considered
advanced features on a device.
• Primarily made calls and sent text messages, a time when the most
advanced game a phone could run involved a rectangular “snake” chasing
after pixelized.
• Today, smartphones function as portable computers that respond to our
every touch and that come equipped with a digital marketplace flush with
programs for every imaginable purpose.
• In just a few short years, the world of mobile computing has gotten
noticeably brighter.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 2
Dawn of the App
• With the sudden explosion of the affordable smartphone market came
the rapid ubiquity of apps: smaller, more focused, and often inexpensive
programs that add value to the most advanced piece of technology
individuals have ever owned
• An app—short for application—is just a piece of computer software
designed to help a user solve a problem.
• Compiled from lines of code into a binary code typically written inside
of an integrated development environment (IDE) such as Xcode or
Eclipse, an app is seen as the most practical way for users to manipulate
their computers or mobile phones into helping with an everyday task.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 3
Contd.,
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 4
Defining an App in Today’s Context
• Today, an app is typically defined
as a fully contained software
application designed to run
natively on a mobile phone, tablet,
or even a traditional computer.
• Apps usually are downloaded from
a store created and curated by the
platform owner, such as Apple,
Google, Microsoft, or BlackBerry
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 5
• From a technical standpoint, apps are typically compiled using code
native to the platform, such as Objective-C or Java, and an IDE in
coordination with software development kits (often referred to as
SDKs) provided by the operating system creator.
• HTML-based Web applications could also be considered mobile apps.
• There are many reasons a programming development team might want
to build an app natively instead of on the Internet with Web
technologies
• The application will be reminiscent of the device’s native language
architecture and is thus likely to be much more responsive than
applications written in Web languages such as HTML and JavaScript.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 6
• Although there are some exceptions to the rule some great applications
have been created using such technologies in general it is much easier
for a developer to make a smooth, responsive, animated application
when using a native language.
• Another benefit of working in the native language of the system have
much shorter communication with the hardware features of the device.
• If looking to integrate features into an app to take advantage of the
device’s GPS, gyroscope, accelerometer, camera, microphone, or other
advanced hardware probably best off building a native app using the
platform’s SDK.
• Current mobile operating systems, such as Android and iOS, provide
easy access to advanced hardware features such as GPS or gyroscopes
by using a simple API.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 7
Mobile Device
• One attribute commonly used to categorize nearly all mobile devices is the
operating system that they’re running.
• Most mobile devices today are based on what tech companies such as Apple
and Google call a “post-PC” operating system: something that functions
differently from the point-and-click only, window-based interfaces of
desktops and laptops.
• Collection of mainstream operating systems now in the market meets this
postPC qualification: iOS, Android, Blackberry OS, and Windows 8.
• Mobile platforms today make it very easy to localize applications for
numerous world languages. With a small amount of work, applica-
tions can become more desirable to people in different countries
around the globe.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 8
Portable, Pocket Computer
• Mobile computing devices themselves have been around since the
early to mid 1990s. But the technology really hit its stride in the early
to mid 2000s as cell phones became more accessible, lightweight,
smaller, faster, and cheaper.
• Multipurpose devices such as the iPod or Zune made it easy for users
to carry entire music collections, games, texts, and contact information
in their pockets.
• Overtime, these devices converged with cell phones to form an all-in-
one device that was friendlier to users’ pockets and wallets.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 9
Tablets
• The world of mobile computing has grown to include tablets,
especially with the proliferation and success of Android and iOS
operating systems.
• Devices such as the iPad and Google’s Nexus 7 are now seeing even
faster adoption rates than smartphones
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 10
Industry’s Key Players
1.Apple
• The foundation for the emergence of so-called post-PC operating
systems was laid by Apple with the release of the original iPod in 2001.
• Apple hit a gold mine when it discovered that people wanted the
capability and functionality of a computer in a smaller, pocket-sized
device.
• iPad has experienced phenomenal growth, and tablet computers are
poised to soon eclipse the yearly sales, market share, and Web-browsing
rates of desktop computers and traditional operating systems.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 11
2. Google and Android
• Android has been a breath of fresh air for mainstream open-source
computing since Google announced it in 2007. Early versions of
Android were defined and led by operating system cofounder Andy
Rubin and were mostly inspired by his work at his previous company,
Danger.
• Android was designed from the ground up to be an open-source
system run by the Linux kernel, which would power the smartphones.
• Android is open source and available to any manufacturer that’s able
to compile the source code and willing to work within the platform’s
license agreement, it’s now available on more than 4,000 distinct
hardware devices worldwide.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 12
Other Players
BlackBerry
• BlackBerry stood alone atop the mobile summit, primarily due to
demand from the business world.
• Once renowned for phones with full QWERTY keyboards, BlackBerry had
significant difficulty adapting once touchscreens emerged and became
popular.
• The BlackBerry 10 operating system is the company’s latest offering in the
mobile space. T
• This new design focuses on dynamic interactive messaging, making it easy
for users to quickly move back and forth between e-mail, text messages,
social networks, and more
• Difficult hurdle for BlackBerry to overcome has been a lack of applica-
tions.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 13
Microsoft
• Another strong mobile competitor has been Microsoft and its Windows
8 and Windows Phone 8 platforms.
• Microsoft overhauled a long-standing operating system strategy,
converging mobile and traditional desktop computing into a single
platform that uses the same interface styles and design language.
• Windows 8 received some criticism because it did away almost entirely
with its famous “Start” menu and desktop format.
• The new Windows desktops and tablets were greeted with adoption rates
similar to those of their predecessors, but Windows Phone has had a
difficult time gaining wider public adoption.
• For application developers, it would be advantageous for Windows to
see greater worldwide popularity because the unified design structure
and language among platforms makes app creation easier.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 14
Interaction Design
• Interaction design and interface design are • In iOS 7, the use of attributes such
completely different concepts as Helvetica Neue-Light as a
• Interface design involves the technical system
pieces and intricate design language created
and mandated by a platform developer for font or white as a font color are
use in a specific operating system. examples of interface design
• On a popular mobile system such as elements.
Android, this includes standards such as
using Roboto as a system font or applying
the Holo Light or Dark visual theme styles
that specify suggested color, font size, line
height, or other properties of phone
interfaces.
• Apple has its own carefully defined set of
interface design standards,
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 15
• Interface design revolves around a standard look for specific elements
• For example, the way an icon appears or the type of text used in error messages
through out an interface.
• Interface designer, responsibility to understand these documents and to be capable
of building an interface that meets their requirements.
• Interaction design has much more to do with the design concepts and interface
tools used to present information to a user.
• Interface tools such as buttons, switches, typography, lighting, audio sound
effects, icons, or color to help do this, interaction design is also more focused on
the user’s reaction or on habits that develop in response to each of these elements.
• Interaction design remains a slower moving industry, by the way users Interact
with the human-interface tools the operating system offers to applications.
• Interaction design, for example, changes when tools like the mouse and keyboard
change.
• Major advancements in interaction design occur when users flock to new
technology such as mobile phones, forcing designers to learn how to adapt and
build software that takes advantage of features like the pinch-to-zoom and swipe
to unlock gestures.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 16
Goals when designing an Interface
• Goal should be to refine your interface as learn about our customer
base and work to retain users and increase their opinion of our
application (something measured quantitatively in
app stores through ratings and reviews).
• If you take a systematic approach, can hopefully solve the seemingly
unsolvable equation that reveals which parts of an application increase
or decrease user satisfaction.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 17
Designing for Humans
• Users are normal people that come in all different
shapes and sizes.
• They may speak different languages, be older or younger, be
better or worse readers, know more or less about computers, and even have
various disabilities (such as color blindness) that hinder their ability to use
our application.
Comprehending that you are building for all types of people quickly reveals
how difficult interaction design can be.
• Designing for humans is in stark contrast to designing for
computers, which automatically run all programming instructions defined in
the code.
• The biggest way to comfort users through interaction design is to guard
against data loss, clearly
06/05/2024 explain
Meenalochini.M, the
Assistant results
Professor, Departmentof
of CSDmajor actions, and allow18
• Example of a design built toward
encouraging user exploration
while also confirming content.
• To pay for an app, a user must
tap on an app’s price, tap a
subsequent “buy” button, and
then finally enter a password
before a purchase is confirmed.
• This gives users the comfort of
browsing without fear of making
a mistake and accidentally
purchasing something.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 19
Designed by Humans
• Users get their hands on your application, test it out, and offer
feedback.
• Be sure to listen to their comments and criticisms, as taking in
negative feedback and growing from it is among the most difficult
things a person has to adapt to when making work public.
Where to Begin
• There’s a distinct difference between software and interfaces, and it’s
even possible for a single piece of software to have several different
interfaces.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 20
• Consider the Windows 8 operating system, When running an
application on a traditional desktop computer with a keyboard and
mouse, users have a distinctly different interaction experience than
they do when using a finger as a pointing device on a Windows tablet
that runs the same software on the same operating system.
• In other situations, changes in software will create new interface
opportunities.
• Nearly every photo application on every mobile platform with a
touch screen allows the user to swipe or pinch in order to see new
photos or zoom in to tiny details.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 21
Anticipating Your User Base
• Facebook’s logo is blue because its founder, Mark Zuckerberg, suffers
from red/green color blindness and thus has the easiest time seeing
things that are blue.
• As a result, it was a supposedly natural choice for him to pick that
color as the primary design accent for his Web interface and branding.
Tools that differ from our own
• Apple has built a variety of accessibility tools into iOS.
AssistiveTouch, for example, is a feature that allows various
iPhone gestures to be performed with a single hand, helping those
users who may have disabilities that make using two hands to
operate a device difficult or impossible.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 22
• Google is well known for its industry-leading voice search function,
which allows users who find typing difficult to browse the Web as
easily as any other mobile device owners.
• Google has also built other powerful accessibility options into
Android, such as text scaling for users who have trouble reading
standard font sizes.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 23
Preparing Personas
• Many designers practice a concept called preparing personas.
• Personas are hypothetical people who might download your app; for
practice, try to role-play as those personas in an attempt to understand
the problems your application is trying to solve for them, how they’ll
use the application, and what their impression of your interface and
interaction designs might be.
• Another solid strategy for learning more about potential users is to
peruse the field for existing applications that aim to solve similar
problems or that have similar user bases to the app you plan to build.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 24
Design Process for Plant App: Example
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 25
User Persona for plant care application
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 26
Customer Journey Map
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 27
• Through an app such as MindNode for Mac , can quickly create
simple personas that can be shared among your design team and
project stakeholders, allowing you to better analyze and critique
potential app interfaces for a specific type of user.
• With MindNode, can draw up hypothetical personas to help you envision
how potential users will react to your interfaces.
• Beta testing is a great way to figure out small quirks or bugs that
06/05/2024 need to be fixed before shipping
Meenalochini.M, theDepartment
Assistant Professor, app oftoCSDthe marketplace, although28
Information Architecture
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 29
Wireframes
• Wireframing is a way to design
an app at a structural level, also
known as quick and effective
way to identify usability issue in
an early design process.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 30
Understanding the role of mobile
• As advanced as mobile devices and software have become, they still play a
complementary role to traditional computing.
• Applications often tie into more traditional digital setups, be they word
processors, spreadsheet managers, slides how presentations, PDF readers, e-mail
clients, or anything else used to perform work or personal functions.
• Services that help developers build software that can be made available to users
of all types of devices.
• Cloud database and file-hosting services such as Parse, Apple’s iCloud, Google
Cloud Messaging, or Microsoft’s Windows Azure have made it incredibly easy
to build complex and feature rich software that shares data across many
platforms.
• This gives development teams the ability to target all users on native platforms
as long as they optimize for device characteristics and interaction methods.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 31
Mobile only Interactions
• Interaction design is the process by which software is iterated and fine
tuned into a form that delivers the best possible experience for the
user.
• As an interface or interaction designer, it’s our job to strip
away all unnecessary details and excess in our software so that we can
minimize its complexity for potential customers.
• While working on interface design, it’s important to remember that
responsiveness is a subjective term and can change greatly when
moving across devices and
operating systems.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 32
• The design goals were simple in concept. When pinched, photos should resize
dynamically without delay or slowdown;
• Web pages should scroll immediately when flicked up or down; dragging an icon
around on screen should be fluid and should feel as if the pixels below are
magnetized to our fingertips.
• Creating these interactions is easier said than done when working with limited
phone processors and RAM.
• Mobile operating systems today still work within these constraints, although
hardware improvements have increased significantly with dual- or quad-core
processors, and cloud-hosting solutions make limited
storage space less of an issue.
• When designing an app, it’s important to ensure these functions take advantage of
smartphones’ inherent mobility. When working on a platform, it’s useful to think of
the features and functions at hand as if you’re playing a sport; laying out an
interaction plan for an app
06/05/2024
is like working out a team’s lineup and game strategy.33
Meenalochini.M, Assistant Professor, Department of CSD
Example :Hourly News application produced by Urban
Apps
If mobile interaction design was a sport,
Hourly News would be on a long
winning streak with its exceptional
design focused on optimizing utility for
mobile use.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 34
Interactions Only Possible with a Tablet
• Tablets are much smaller and lighter than laptops and also contain
advanced microphones, cameras, location-tracking chips, gyroscopes,
and other features that typically do not ship with traditional
computers.
• The features that are available on a device vary greatly by
manufacturer and platform, so it’s important to identify the necessity
of each and every function in an app and how it will operate if certain
hardware qualities are not available on a device.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 35
Interactions That Aren’t Possible on Mobile
Keyboards and Data Entry
• Applications that require extensive text entry or typing are standout examples of
mobile-problematic experiences.
• It’s hard to recreate the ease and familiarity of the full QWERTY keyboard on a
glass surface.
• There are ways to get around this deficiency, including the Bluetooth support
that allows external wireless keyboards to connect to tablets or phones, but this
remains more of an obstacle than a solution as users must constantly remember
to grab an extra device in order gain full functionality.
• Third-party hardware manufacturers, and even Microsoft with its Surface tablet,
have launched efforts to create covers that also function as QWERTY keyboards,
but these attempts often involve shape, size, or other format compromises that
still make them less useful than traditional typing setups.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 36
Click, Tap, Point
• The tool used to click, tap, or manipulate content on screen. For
mobile computers, this means fingers; for traditional computers, it’s
the mouse.
• The most important difference between the two involves the
interaction radius the user has to engage with content.
• When moving a mouse, the user directly interacts with a small number
of pixels at a time, usually only a handful. But when tapping with the
finger, the user comes into contact with a much larger radius
sometimes as many as 40 or 50 pixels.
• Human fingers clearly aren’t as precise as mouse-pointer icons.
• Users have a much harder time making small, precise inputs on a
screen, which is why larger
06/05/2024 buttons
Meenalochini.M, andDepartment
Assistant Professor, icons are often seen on mobile37
of CSD
Contd.,
• When working with a mouse, users don’t directly interact with
content; instead, they move a device sitting on a table that
then interacts with content.
• The software that operates computer mice can be adjusted for a variety
of speed settings, giving the user flexibility in determining
how his ability will affect the computing experience.
• A finger, though, comes with no such options menu, and some users
may find it difficult to accomplish advanced gestures that come
naturally to others.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 38
Universal Appeal
Interaction Experiences for Phones and Tablets
• Android phone app will convert most easily to an Android tablet.
• When creating an app for both phones and tablets, the primary goal
should be to scale interaction types for the two devices from the very
beginning of the project.
• An example. When moving from the desktop site to the mobile
version, the search window is scaled, different menus appear, search
buttons are reconstructed, and the displayed interface is reduced.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 39
• Google offers a scaling interface
for users that looks great on both
laptops and phones.
• It involves stripping away
unnecessary clutter when on a
small screen and emphasizing
controls and enhanced
navigation opportunities when
on a large screen
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 40
• Take typography, for example. Text that may fit easily on a large iPad
screen can frequently fit poorly or even be illegible when scaled down
for an iPhone.
• Thus it’s important to discuss things like menu copy and paragraph
length with the rest of your application team to determine how the
words will best flow on a variety of screen sizes.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 41
• On iOS, for instance, designers and engineers typically work together
to produce two separate XIBs (Xcode Interface Builder files) for any
universal binary (an application that will run on both iPhone and
iPad).
• This strategy allows for versatility when moving between screen sizes
as well as the opportunity to easily pick different interaction types or
gesture methods based on the screen size a user engages with.
• An Xcode Interface Builder file is a proprietary file type that can be
used in the creation of iPhone and iPad application interfaces using
an Xcode feature called Interface Builder.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 42
• Android, is much better suited to adapt to multiple interface sizes.
Because Android was a system built from the ground up to support
various screen resolutions, the tools for creating Android apps have
always focused on easily forming scalable interfaces.
• Today, most design work is aided by creating XML files that dictate
how an interface should scale based on the size of the device’s screen.
• The Android system supports four screen sizes for phones and tablets :
small, normal, large, and extra large.
• Devices are classified based on screen size and resolution, and Google
dictates the acceptable ranges for each screen type.
• When working with Android, it’s up to the designer to decide how the
app should respond to each size.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 43
• The action bar, for example, is a common Android interface item that
allows the user to access the app’s main menu and switch between
different application views or functions.
• The bar also often serves as a home for common interactions
inside an app, such as searching or sharing content.
• Finally, the action bar often contains a title to indicate a user’s current
location inside the app.
• An action bar may have multiple items, not all of which can fit on the
screen at one time.
• While working with Android interface XML, a designer can specify
which fragment functions are the most important and should appear on
screen regardless of the device’s size.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 44
• On Android, the action bar anchored to the top
of the view and right below the main navigation
bar shows the variety of different fragments
available to the user for displaying content.
• The Google Play app uses the standard action
bar to help the user navigate.
• Form factor” is a smartphone or tablet’s size,
shape, aspect ratio, or
other physical attributes that vary between
devices even though the
operating system may remain the same or be
extremely similar.
• For example, two phones may both run
Android, but one may have a 3.5-inch screen
and be very thin and another may have a 5-inch
display and very thick. These devices are both
Android smartphones, but they have very
different form factors, and as a result they can
feel very different when used
06/05/2024 in practice.
Meenalochini.M, Assistant Professor, Department of CSD 45
Interaction Experiences for Multiple Platforms
• More difficult task than designing an app for phones and tablets on the same
operating system is designing one for multiple phones and tablets on different
operating systems.
• Building an application for multiple operating systems is much like building
one for multiple devices.
• If designers are capable of beginning work for both platforms at the same
time, it’s ideal to start with interaction and interface wireframes for a general
mobile application, ignoring any specific target platform.
• By building such a wireframe, a designer worries less about the specific
interaction methods or interface pieces such as a tab bar or navigation bar and
instead focuses on the source of the content inside the application, including
tables, maps, videos, and how those elements connect coherently for the user.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 46
Complementing Traditional Workflows
• When working on scaling an application from phone to tablet, should
consider ways in which our application could be improved through a
design that focuses on working in collaboration with users as they
move through their day.
• common way many applications is through the incorporation of sync
services such as Azure, iCloud, or Dropbox.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 47
• AgileBits’s 1Password, is a service
that stores and syncs notes and
secure passwords across platforms
and is a great example of an
application with enhanced
interaction aided by interoperability.
• 1Password uses a variety of
methods that make it easy to share
between devices.
• Another way to enhance a user’s
traditional work experience via
mobile interaction is by providing
an interface or capability that is
difficult to perform with a
traditional keyboard or mouse.
06/05/2024 Meenalochini.M, Assistant Professor, Department of CSD 48
