EEI3269 - DesignClass - 1

Design Class – 01
EEX3269 – Introduction to Mobile Application Development
Kamsharine Thayananthan
tkams@ou.ac.lk
K.D.B Aratthanage
kdara@ou.ac.lk
Center for IT Education Services (CITES)

Faculty of Engineering Technology
The Open University of Sri Lanka
Activity(Mentimeter)
DC 1 Activity 1.1
What are the things you consider / looking for when you are
going to download/install a mobile application?

Things to be considered before an application
development
• What are their problems
• How much time they spend on each app
• What is their expectations at different situational
contexts
• How things are different from web/desktop
• Device fragmentation

Mobile User Experience- why of a product
Mobile UX design is the design of user

experiences for hand-held and wearable devices.
Designers create solutions (typically applications)
to meet mobile users’ unique requirements and
restrictions. Designers focus on accessibility,
discoverability and efficiency to optimize on-the-
go interactive experiences.

Major Components of UX
• Minimize Content-Design for minimal page-loading times (less

than three seconds) and cognitive load. Also, 94% of mobile
users use portrait mode, meaning less width to work with.
• Simplify Navigation-Most users use one hand; fingertips can be
large.
• Restrict User Inputs-Users become frustrated when they must
continuously tap buttons. So, design to offer maximum effect for
minimum interaction/effort.
• Ensure Continuity and Consistency-Let users continue where
they left off and so they can switch easily between mobiles and
desktops.
• (https://www.interaction-design.org/literature/topics/mobile-
ux-design)

Mobile User Interface - how of a product - (UI)
• A mobile user interface (mobile UI) is the graphical and

usually touch-sensitive display on a mobile device, such as a
smartphone or tablet, that allows the user to interact with
the device's apps, features, content and functions.- Tech
Target
• User interface elements usually fall into one of the following
four categories:
1. Input Controls : allow users to input information into the system
2. Navigation Components : help users move around a product or
website
3. Informational Components : Share information with user
4. Containers: hold related content together

Remember you’re a good UI designer!!!
Which one is a good UI?
A B

Stages of UI Design Process
1.Understand your customers

and their values
2.Research the competition
3.Sketch out your product
4.Design your product
5.Implement the solution
6.Evaluate the work and
improve it

Fun Activity(Padlet)
To make them relax

Create one for your group too.(You can use the same
question as mine or use a different one)
(https://padlet.com/tkams/dwnlzzivqjn0ueen)- My
padlet
https://padlet.com

Types of Application Requirements
• The requirements are the high-
level descriptions about a
particular system services,
constraints or to a detailed
specification that are generated
during the requirements
gathering process.
• Domain Requirements -Domain

requirements are the
requirements which are
characteristic of a particular
category or domain of projects
• Functional Requirements
• Non-functional Requirements
Functional Requirements
• A functional requirement
defines the functionality of Examples:
a system or one of its • Business Rules
subsystems. • Transaction corrections, adjustments,
and cancellations
• It describes the functions a
• Administrative functions
software must perform. A
function is nothing but • Authentication
inputs, its behavior, and • Authorization levels
outputs. It can be a • Audit Tracking
calculation, data • External Interfaces
manipulation, business • Certification Requirements
process, user interaction,
• Reporting Requirements
or any other specific
functionality which defines • Historical Data
what function a system is
likely to perform

Non-Functional Requirements
• Verifies the attributes of the system such as memory

leaks, performance or robustness of the system.
• A non-functional requirement is essential to ensure
the usability and effectiveness of the entire software
system. Failing to meet non-functional requirements
can result in systems that fail to satisfy user needs.
Examples:
• Usability
• Legal or Regulatory Requirements
• Reliability
• Performance

Activity(LMS)
• DC 1 Activity 1.2
• (Group Activity)
• Students have to identify the functional and nonfunctional
requirement of given scenario and upload the answers to
LMS (Only one from a group has to upload that)

Mind Map
A mind map is a graphical way to represent ideas and

concepts. It is a visual thinking tool that helps structuring
information, helping you to better analyze, comprehend,
synthesize, recall and generate new ideas.
https://www.mindmeister.com

Stages of UI Design
• Sketches
• Block level Designs
• Wire Frames
• Mock-ups

Sketches
• The designing phase begins

with sketching. The
designers usually make
handmade sketches to
visualize the concept with
simple terms. The UX/UI
designers can stick to a
particular option after the
sketching process.

Block level Designs
• A block level design is

something which presents all
the functional parts of your
application in a visual format.
• Note that the block diagram
gives overall view of
application. so no need to have
detail description of every
aspect.

Wire Frames
• Wireframes are the

“blueprint for design.”
• They’re supposed to connect
the underlying conceptual
structure (or information
architecture) to the surface
(or visual design) of a
website or mobile app.

Wire Frames(Cont..)
• A quick sketch to convey the high-level concept of new product

functionality
• To gain consensus and collect internal feedback on how new
functionality will work
• Low fidelity

Activity
• DC 1 Activity 1.3(LMS)
Students have to draw the mind map and wireframes manually
(without using any tool) for the scenario given in Activity 1.2
It is an in-class activity
Students have to read the scenario and you have to show them
how to use below tool by doing the activity along with them
https://www.mindmeister.com
Encourage them to use the tools along with you.
And also ask them to draw wireframe manually
Ask them to submit the answers to LMS before next day.

Wire Frames(Cont..)
https://balsamiq.com/
Encourage them to use the tools along with you.

Prototyping
• Prototypes concentrate on the feel of the UI/UX product that

one is designing. It’s more about the interaction experience.
Prototypes give you the effect of a simulator.

Prototyping(Cont..)
• Interactive simulation of new product functionality

• To collect feedback by user testing the real experience
• High fidelity

Activity
• Identify some prototyping tool

• Find below mentioned online tool and learn how to do
prototyping using below tool?
• https://www.figma.com/

Announcements
• Design Report 1 (DR 1) – Available in the LMS.

• Deadline: Mentioned in the LMS page.
• Group activity – Groups will be assigned by your
tutor. (Five students per one group)

Q & A?

EEI3269 - DesignClass - 1

Uploaded by

Copyright:

Available Formats

EEI3269 - DesignClass - 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

EEI3269 - DesignClass - 1

Uploaded by

Copyright:

Available Formats

Design Class – 01

EEX3269 – Introduction to Mobile Application Development

Center for IT Education Services (CITES)

Center for IT Education Services (CITES)

Center for IT Education Services (CITES)

Mobile UX design is the design of user

Center for IT Education Services (CITES)

• Minimize Content-Design for minimal page-loading times (less

Center for IT Education Services (CITES)

• A mobile user interface (mobile UI) is the graphical and

Center for IT Education Services (CITES)

Which one is a good UI?

Center for IT Education Services (CITES)

1.Understand your customers

Center for IT Education Services (CITES)

To make them relax

Center for IT Education Services (CITES)

• Domain Requirements -Domain

Center for IT Education Services (CITES)

• Verifies the attributes of the system such as memory

Center for IT Education Services (CITES)

Center for IT Education Services (CITES)

A mind map is a graphical way to represent ideas and

Center for IT Education Services (CITES)

Center for IT Education Services (CITES)

• The designing phase begins

Center for IT Education Services (CITES)

• A block level design is

Center for IT Education Services (CITES)

• Wireframes are the

Center for IT Education Services (CITES)

• A quick sketch to convey the high-level concept of new product

Center for IT Education Services (CITES)

Center for IT Education Services (CITES)

Center for IT Education Services (CITES)

• Prototypes concentrate on the feel of the UI/UX product that

Center for IT Education Services (CITES)

• Interactive simulation of new product functionality

Center for IT Education Services (CITES)

• Identify some prototyping tool

Center for IT Education Services (CITES)

• Design Report 1 (DR 1) – Available in the LMS.

Center for IT Education Services (CITES)

Center for IT Education Services (CITES)

You might also like