MUQADDAS

FA17-BSE-103

Q: Web app and website difference. What is web app design and UI in web app? Types of
web app and principles of good web user interface design. Examples of web app.

Difference between Web Application and Website:-

Website consists of different webpages that contains specific information of some static content, images
and videos under a common domain name. On the other hand web application is a computer program that
uses web technology like web browsers to perform specific task over the internet.

Major Differences:-
 Website provides limited interactive functionality because they only provide information about
the specific content. Whereas web application provides high level of involvement and interaction
to perform specific task.
 As websites contain only static content so their main purpose is to inform which means every
user sees same information on website. On the other hand web applications are dynamic so they
are designed to perform a specific function or tasks which means different users interact
differently on same web app.
 High level of knowledge and skills are required for web applications while website is used by any
kind of user.
 Websites don’t require any authentication for the users to login whereas some web applications
require users to sign up to perform specific task.

Web app design and UI in web app:-

Web app design
Design of web application provides the appearance layout of web app. It is an important process because
it usually refers to the user experiences aspect of development rather than software development. So
different aspects of design phase are User Interface Design, Usability, content production and graphic
designs.

UI in web app
UI in web application means user interface through which a user interacts with. So it is a platform to
provide interaction and involvement to users. It consists of different elements like buttons, textbox,
panels, different fonts and navigation.

Types of web application:-

There are two types of web applications

 Open web Applications.

  Closed web Applications.
Open web applications are available to everyone who opens an account. These applications are accessible
through Web or by creating an account for free or by paying some fee. Whereas closed web applications
are used for business purposes and are not openly available rather they obtainable by the company that
uses it. So they are also called as offline applications because they run on company’s local network and
only available to employees.

Principles of good web user interface design:-

A good web user interface design has following principles:

Usability vs. Visual Design:

Usability is a very important factor while designing a website because this attribute tells how easier is it
to use, learn and operate the system. So this characteristic is very important to capture user’s interaction If
a user uses your page and can’t figure out how to use it, they’ll be gone within seconds. So the website
should be interactive enough to use.

Users Are Impatient:

As some websites provide subscription and sign up options which most of the users don’t like. So it
would become a barriers to entry on website and in this way users will unsatisfied and they leave.
Therefore don’t make your users fill out long forms to use your site.

Play to the Target:

While designing website you must know the target markets means that which kind of users are going to
use.

Clear, Available Functions:

Website should contains the actual functionality for which purpose it is used to design because users are
often in hurry and they won’t take time searching for functions.

Don’t Fear the Whitespace:

Whitespace is a design element that you ignore at your peril. Don’t be afraid of leaving large blocks of
unused space.

Keep It Simple:

Website should be simple and easy to understand because if it contains complex information then it will
divert user’s attention and involvement and they usually leave. Also contains search functionality and
good quality content.

Clarity:

Reduce complexity by putting all things in order wise. Keep important things bold and don’t uses too
many fonts.
Color:

Don’t use more than seven colors in your color scheme. Stick to your brand colors. You should
have one dominant color. Different colors attract different types of users. Learn a little bit about
color theory before you pick your colors.

Writing Style

Adjust your writing style. Write in short sentences. Use bold and italics. Be direct with concise sentences.
Avoid long blocks of promotional text. The writing style on your website falls into the “keep it simple”
category too.

Examples of web applications:-

Intercom:
This website is went through multiple design iterations. It contains simplified layout and appearance with
efficient navigation. Its UI is clean and resolve all issues in older UI. It contains usability and creativity.

Buffer:
It has different navigation panel which provide navigation between products and functionality. Its UI is
very clean simple and easy. It provides good color combination and creativity. The platform is simple to
use and a pleasure to work with. It makes scheduling social media posts easy, and presents users with a
wonderful reporting platform.

Q: What is Mobile app interface design? Principles of good mob interface design.

Mobile app interface design:-

Mobile app design includes both the user interface (UI) and user experience (UX). Designers are
responsible for the overall flair of the app like the color scheme, font selection, and the types of buttons
and widgets the user will use.

Principles of good mob interface design:-

1. Mobile mindset:

Before getting started it is important to put yourself into mobile mindset which requires following things:

Be focused: focus on your work what is going to be designed

Be unique: you should know what makes your app different.

Be charming: Mobile apps should be friendly, reliable and fun to use.

2. Mobile contexts:
There are three major mobile contexts:

Bored:  In this context, immersive and delightful experiences geared toward a longer usage session are a
great fit. Still, interruptions are highly likely so be sure your app can pick up where your user left off.

Examples: Facebook, Twitter, Angry Birds, web browser.

Busy:  The ability to complete micro-tasks quickly and reliably with one hand in a hectic environment is

critical. So user will have shaft vision in this context.

Examples: Email, calendar

Lost: Users who are in transit, in unfamiliar surroundings, or in familiar surroundings but interested in
something unknown around fall into the lost category.

Examples: Maps, yelp

3. Navigation Models:
There are plenty of novel navigation models for mobile

 None: Single screen utility apps ( Weather app on iPhone)

 Tab bar: Three to six distinct content areas Twitter for iPhone)
 Drill down: List and detail content hierarchy (Settings app on iP)

4. User input:

You should choose your own way of providing input. For Example:

 There is a dozen keyboard variations on some smartphones you should consider each of your

input fields.

 Another is auto-correct so Consider each of your input fields and decide which auto entry options

should be enabled.

 If your app invites a lot of typing, you should ensure you support landscape orientation for fat-

thumbed folks like me.

5. Gestures:
One of the most important aspects of modern touch interfaces is that they support gesture-based user

interaction. Gestures can be

 Invisible.

 Two hands.

 Nice to have.

 No replacement.

7. Orientation
 Portrait is the most standard orientation to optimize.
 If your app invites lots of typing, you should support landscape orientation so people can access
the larger keyboard.
 If your app will be used for long periods of time, consider adding an orientation lock right in the
app.