View
220
Download
1
Category
Preview:
Citation preview
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
Recommended