Introduction to UX for Mesiniaga Academy

Introduction to UX

Zainul ZainSenior 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

UIUser 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 UX6

<STATEMENT>

<STATEMENT>

UI is missing EXACT user inputs/requirements

7

UXUser

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

UXUser

Experience

9

UXUser

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 DesignAn 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 ResearchGetting/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

23

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

25

Define Project ParametersThe 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 requirementExample: 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 onExample: 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 scenarioExample: 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 processThe 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 ProcessWhen 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

Sketching

35

Wireframe Step 1: Sketching1. 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 software1. 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

Sample Wireframe With Grid38

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 Wireframe40

41

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

HOMEWORKRead 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 safeFor 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

HOMEWORKGo 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

What are UI Elements?

55

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 ElementNavigation

57

MENU

UI ElementNavigation

58

TABS

UI ElementNavigation

59

BREADCRUMB

UI ElementForm

60

INPUT, SELECT, BUTTON, ETC.

UI ElementContent View

61

CARD

UI ElementContent View

62

TABLE

UI ElementHelper

63

MODAL (POPUP)

UI ElementHelper

64

TOOLTIP

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

67