Types of Mobile Applications

Mobile Application Medium Types

The mobile medium type is the type of application framework or mobile technology that presents content or
information to the user. It is a technical approach regarding which type of medium to use; this decision is determined
by the impact it will have on the user experience.

• Mobile Websites
• SMS
• Mobile Web Widgets
• Mobile Web Application
• Games

Mobile Information Architecture

What is Information Architecture?

The structural design of shared information environments

• The combination of organizations, labelling, search, and navigation systems within websites and intranets.

• The art and science of shaping information products and experiences to support usability and find ability.

• An emerging discipline and community of practice focused on bringing principles of design and architecture
to the digital landscape.
Key terms of information architecture

• Interaction design

• Information design

• Navigation design

• Interface design

Mobile Information Architecture

Information architecture has become a common discipline in the web industry; unfortunately, the mobile industry
like software has only a handful of specialized mobile information architects.

Key points to remember

• Keeping it simple - When thinking about your mobile information architecture, you want to keep it as simple
as possible.

• Support your defined goals - If something doesn’t support the defined goals, lose it. Go back to your user
goals and needs, and identify the tasks that map to them.

• Clear, simple labels - Good trigger labels, the words we use to describe each link or action, are crucial in
Mobile. Words like products or services aren’t good trigger labels.

Prototyping

• Prototypes might sound like a scary (or costly) step in the process.

• Some view them as redundant or too time-consuming, preferring to jump in and start coding things.

• But as with wireframes, I’ve found that each product we’ve built out some sort of prototype has saved both
time and money.

Paper prototypes

Context prototype

Mobile Ecosystem

• Mobile is an entirely unique ecosystem and, like the Internet, it is made up of many different parts that must
all work seamlessly together.

• With mobile technology, the parts are different, and because you can use mobile devices to access the
Internet, that means that not only do you need to understand the facets of the Internet, but you also need to
understand the mobile ecosystem.
Platforms

• A mobile platform‗s primary duty is to provide access to the devices.

• To run software and services on each of these devices, you need a platform, or a core programming language
in which all of your software is written.

• Like all software platforms, these are split into three categories: licensed, proprietary, and open source.

Types of platforms

➢ Licensed

• Java Micro Edition (Java ME)

• Binary Runtime Environment for Wireless (BREW)

• Windows Mobile

• LiMo (Linux-based mobile)

➢ Proprietary

➢ Open Source
Application Frameworks

• Application frameworks often run on top of operating systems, sharing core services such as
communications, messaging, graphics, location, security, authentication, and many others.

S60

BREW

JAVA

Flash Lite

Windows Mobile

Cocoa Touch

Android SDK

Web Runtimes (WRTs)

WebKit

The Web
Designing Web Interfaces

• Drag & Drop Interfaces

• Direct Selection

• Contextual Tools

Drag and Drop

• Introduction: Easy to move, Copy and delete file on the use desktop

• In 2000 a small startup Half Brain launched a web-based presentation DHTML –Drag and Drop.

• Definition: A mechanism allowing users to drag an object and drop it into a target.

• Benefits: Enhances user interactivity.

• Simplifies complex actions (e.g., rearranging items). Mobile phone –App Icons can move from one place to
another

• Examples Page Load: It could display a tip on the page to indicate drag ability

• It is similar to rearranging module

• Best Practices:

• Provide visual feedback.

• Ensure accessibility for keyboard users.

• Examples:

• File upload (Google Drive).

• Task organization (Trello).

Direct Selection

• Definition: Users can directly select and manipulate elements without intermediate tools.

• Benefits: Reduces user effort. Provides a natural and intuitive experience.

• Best Practices:

• Ensure clear feedback on selection.

• Use recognizable interaction points.

• Examples:

• Graphic editors (Figma).

• Inline text editing.

• Definition: Tools that appear only when relevant to the user's current action.

• Benefits:

• Keeps the interface uncluttered.

• Enhances user focus.

• Best Practices:

• Maintain consistency in tool behavior.

• Use animations to draw attention subtly.

• Examples:

• Formatting options in Google Docs.

• Contextual menus in right-click interactions.

Designing Web Interfaces

• Overlays and Inlays

• Virtual Pages

• Process Flow

Overlays and Inlays

Overlays:

• Appear above the main content (e.g., modals, lightboxes).

• Use Cases: Alerts, quick actions.

Inlays:

• Embedded within the page layout.

• Use Cases: Inline editing, expandable sections.

Best Practices:

• Avoid disrupting the user's primary task.

• Ensure overlays are easily dismissible.

Examples:

• Overlays: Login popups.

• Inlays: Dropdown menus.

• Definition: Dynamic content updates within a single page without reloading.

• Benefits:

• Faster user experience.

• Reduced server load.

• Best Practices:

• Use clear navigation cues.

• Optimize for speed and responsiveness.

• Examples:

• Infinite scrolling (social media).

• Single-page applications (SPAs) like Gmail

Process Flow in Web Interfaces

• Definition: The logical sequence of steps a user follows to complete a task.

• Components:

• Entry Points: Clear starting points.

• Guidance: Visual cues and instructions.

• Feedback: Confirmation messages or progress indicators.

• Best Practices:

• Minimize the number of steps.

• Provide error handling and recovery options.

• Examples:

• E-commerce checkout process.

• Multi-step forms.