Introduction to UX for Mesiniaga Academy

Introduction to UX
Zainul Zain
Senior Software Developer, Custom Codes
1

Syllabus
1. UI vs UX
2. UX in detail
3. Design Process
4. Development Process
5. Sharing Session & Tutorial
2

<STATEMENT>
<STATEMENT>
UX is NOT (just) UI
3

UI
User Interface
What is?
“ Screen design for users to
interface with a system or
(web) application ”
- Specifically, we are purely talking about
combinations of UI elements such menus,
tables, forms, buttons, etc to make up an
interface.
4

If we have concept of UI,
why create UX?
5

Problems of UI Design
● The created design is based on what you think they need.
○ even worst, based on your ego as an artist.
● The created process is based on your assumptions and cognitions, not
theirs.
● The biggest problem is when all your assumptions are wrong.
There is a gap between UI and UX
6

<STATEMENT>
<STATEMENT>
UI is missing EXACT user
inputs/requirements
7

UX
User
Experience
What is
“ Derived from a design philosophy
where UI is developed based entirely on
end-user’s needs, wants and
limitations, applied throughout the
design processes and development
lifecycle. ”
- This design philosophy is called UCD or User-
Centered Design.
8

UX
User
Experience
Embodies:-
● User Research with Psychology
● Prototyping
● Design
● Development
10

<STATEMENT>
<STATEMENT>
UI makes applications usable,
UX makes applications effective.
11

Ultimate Goals of UX is Intuitive Design
An application made through UX Processes requires:
- A minimum cognitive abstractions (a.k.a thinking),
- and, a minimum experimentation if necessary,
- Resulting in an understanding which contains the
maximum correctness with maximum confidence
- Applicable to the the maximum diversity of user.
12

What is most important
to UX?
13

User Research
Getting/Defining user requirements thoroughly
14

Why is it the utmost important in UX?
● It is the first pillar of UX
○ Because if this is done INCORRECTLY:
■ Your design will just be UI Design.
■ It will resulted in scope creep.
○ Because if this is done CORRECTLY:
■ It will provide additional income.
15

Project
Scope “ A defined and documented list of specific
project goals, deliverables, tasks, costs and
deadlines. It establish boundaries of the
project and provide the base for verifying
completed work. ”
16

Scope
Creep
“ Uncontrollable changes, resulting in
continuous growth in a project's scope. ”
17

Why scope creep is scary?
1. Causes more work with no additional income.
2. Delays project completion.
3. Causes reputation loss and lower client satisfaction.
4. Causes less employee satisfaction due to overtime and (in
many companies), no compensation.
18

TechTarget:
“ It is natural for parts of a project to change along the
way, so the better the project has been "scoped" at the
beginning, the better the project team will be able to
manage change. When documenting a project's scope,
stakeholders should be as specific as possible in order to
avoid scope creep, a situation in which one or more parts
of a project ends up requiring more work, time or effort
because of poor planning or miscommunication. ”
19

How does it provide additional income?
● If everything is scoped properly, and, since there is always gonna be
changes in project scope, then all changes requested can be CR
(change request)’ed
20

CR “ A formal proposal for an alteration to an
aspect of the app. Because change requests
are beyond the project scope (hopefully),
generally the client will have to pay for the
extra resources required to satisfy them. ”
Change Request
21

<STATEMENT>
<STATEMENT>
if you want your developer life to get easier,
get/define user requirements thoroughly
22

CAUTION
Because of the time frame, the following lecture will
not cover all of the things that should be done by a UX
Developer. Do look back at the contents of this lecture
and google keywords that you want to study more.
24

Define Project Parameters
The first items to ask in any project:-
1. Minimum browser requirement.
2. Which devices end-users will use the web/app on.
3. Production environment scenario.
26

Minimum browser requirement
Example: IE 10 and above (should be a standard requirement)
Why?
- Because this will determine front-end technologies used e.g. whether we can
use Jquery 2.0 or not, whether can use CSS3 or not, etc., etc.
27

Which devices user will use the web/app on
Example: Desktop only, or mobile, tab
and desktop.
Why?
- This will determine front-end
design approach, whether it will be
responsive, mobile-first or
"regular" desktop design.
28

Production environment scenario
Example: 3-tier Service-Oriented Architecture (SOA) so there must be a physical
separation between presentation and business logic, with or without load
balancing, etc., etc.
Why?
- This will determine front-end architecture design, whether it is going to be a
Single Page Application approach (SPA), AJAX web application or the
"regular" webforms application.
29

CAUTION
Although there are many other methods that should be
used for getting thorough and correct user requirements in
UX Design stage such as User Interviews, Prepare Mental
Model, Storyboarding, Card Sorting, etc. etc. but we are
going to focus only on one process, WIREFRAMING
30

“ In the nutshell, it is a skeleton of a page. It reflects
designer's ideas on the placements of UI elements
on the page and how users to interact with the site.
It should ignore the visual style of page because its
purpose is to show content placements and
behaviour of the page. ”
Wireframe
31

Minimum prerequisite for Wireframe process
The following should have been done by Business Analyst / System Analyst:-
1. All workflow processes are captured in a form of flowchart / swim-
lane diagram.
2. Content Inventory and site-mapping process completed.
32

Checklist for Wireframe Process
When doing wireframe, the following questions have to fulfilled:
1. What are the contents of this page.
2. How are these contents to be organized
3. Each content’s level of importance (content highlighting)
4. Where users can go from here
5. Where is this page on the whole frame of site.
6. Are there any specific behaviour to showcase e.g. dropdowns, popup, hover
events, etc.
33

Wireframe 1. Sketch on paper or drawing board and
brainstorm.
2. Wireframe with software and mock
interactions for each process and
subprocess.
3. Add Visual Mockup on main items.
Process
34

Wireframe Step 1: Sketching
1. draw all elements needed for that interface, down to the last
detail, explore different ideas of layout, be open and creative
about it and decide on one.
2. Re-sketch as needed and repeat the process.
3. Document final decision of all processes brainstormed. The
easiest is to capture with phone camera and email to everyone.
36

Wireframe Step 2: Wireframe with software
1. Use grid template.
2. Draw final sketch layout with respects to grids.
3. Define Information Hierarchy with typography.
4. Fine tune with grayscale.
5. Decide on what UI elements to use, simulate behaviour and
document the decisions.
37

Note: This is not really considered part of wireframing but because at this point we should have the page
layout, content organization and UI elements in place, we might as well fine-tune and beautify.
1. Add in static contents such header design, footer design, logo
and other actual or sample images.
2. Add in Color Scheme to the wireframe.
3. Add in Typography.
4. Set actual borders, paddings and spacings for all elements.
Wireframe Step 3: Visual Mockup (High Fidelity)
39

Sample High Fidelity Wireframe
40

Now that we know exactly what the
client wants, LET’S CODE!!
42

NOT SO FAST
my friend..
Let’s start with the basics
BEST
PRACTICES
43

Why follow best practices?
1. Foster code consistency across projects.
2. Facilitate ease of maintenance.
3. Ensure creation of professional quality (web)
applications.
44

Now chant after me!
● Semantic HTML for structure
● CSS for presentation
● JavaScript for behavior and interaction
- By the way, these are the three pillars of front-end development.
- Always, always follow these rules.
45

HOMEWORK
Read through the Isobar Front-end Code Standards at
http://isobar-idev.github.io/code-standards/
It is a work-in-progress but it has all the best practices
you will need to follow already.
46

Use Visual Studio Code
● It is built for front-end developers
● It can open (solutions) format from other
Visual Studio versions.
● It has a kick-ass HTML/CSS/JS Intellisense
engine.
● It’s Free! Download at https://code.
visualstudio.com/
Dev Tool
47

<STATEMENT>
<STATEMENT>
There's a good and recommended way to
get started, but you must understand
why they use what they use.
48

Get started quick and safe
For all projects:-
1. Use front-end template
2. Use front-end framework
49

Why front-end template?
1. Because they have implemented almost all best practices
to start and complete any front-end development project.
2. A correct setup will make your pages looks good even with
default setup. Provide a good baseline setup.
3. Prevent your page to break horribly on certain (version) of
a browser.
50

Why front-end framework?
1. Tested and deployed in millions of web application. Trusted.
2. We will be adhering to best practices since coding using this tool require
specific code standards or it will not work.
3. Because of the built-in UI elements that they provide, we do not need to
create them from scratch. One keyword Rapid Application Development
(RAD)!
4. A correct setup will make your page even better even with default
configuration.
5. Because it support responsive web design and mobile-first approach by
default. Will not have to to create different viewport screen design for each
viewport size manually.
51

Sample starting template. Download at https://drive.google.com/folderview?
id=0B9ZMQ__JVBh6WDBhOFVXQU9XbnM&usp=sharing
52

HOMEWORK
Go through these sites’ contents and documentation:-
https://html5boilerplate.com/ - Front-end Template
http://getbootstrap.com/ - Front-end Framework No 1
http://foundation.zurb.com/ - Front-end Framework No 2
53

1. You have to be good in HTML
2. You have to be good in CSS
3. You have to be good in Javascript, specifically JQuery.
Surprising, right?
- But those are already the standard requirements to be a good UX developer
anyway, right?
Standard Requirements for using Front-end Tools
54

UI
56
Elements
“ UI Elements are code combinations of
HTML, CSS and JS that makes up a usable
components of an web app. ”
Category of components are (not comprehensive):
1. Navigation
2. Form
3. Content View (Item)
4. Helper

UI Element
Navigation
59
BREADCRUMB

UI Element
Form
60
INPUT, SELECT, BUTTON, ETC.

UI Element
Content View
61
CARD

UI Element
Content View
62
TABLE

UI Element
Helper
63
MODAL (POPUP)

Sharing session - My Personal Arsenal
65
● HTML - refer HTML cheat sheet (inside zipped file)
● CSS - refer CSS cheat sheet (inside zipped file)
● Javascript - refer basic javascript reference guide (inside zipped file)
● Online Jquery API Cheat Sheet - https://oscarotero.com/jquery/
● Online (Twitter) Bootstrap Documentation - already shared
- Find zipped file at https://drive.google.com/folderview?
id=0B9ZMQ__JVBh6WDBhOFVXQU9XbnM&usp=sharing

Tutorial Session - Wiring up HTML+CSS+Javascript
66
● Menu
● Site Container
● Grid
● Div
● Tables
● Form

Introduction to UX for Mesiniaga Academy

More Related Content

What's hot

Similar to Introduction to UX for Mesiniaga Academy

Recently uploaded

Introduction to UX for Mesiniaga Academy