Transcript
Page 1: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

WEB UI & UX DESIGNFOR (BACK-END) DEVELOPERS

Ivan SielegarChief Innovation Officer @ GOORME (.com)

Online Strategist @ NavinoT (.com)

Thursday, May 5, 2011

Page 2: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

START

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ 10+ Years Experience Not as professional

❖ Forget formal educationMaster in Structural Engineering

❖ Web Designer: Second on-campus jobFirst job was a Gym Front Desk. ID Please? :P

❖ Don’t trust me!Just listen and think about it...

ABOUT ME

Thursday, May 5, 2011

Page 3: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

START

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Why for Developers?Design ignorance to the max

❖ True Web Designers are RareGraphic Design vs. Computer Science

❖ Art vs. LogicHTML & CSS are OK. JavaScript? No Way!

❖ Let’s create some logic to understand this

INTRO...

Thursday, May 5, 2011

Page 4: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

START

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

The user interface is the space where interaction between

humans and machines occurs. The goal of interaction between a

human and a machine at the user interface is effective operation

and control of the machine, and feedback from the machine

which aids the operator in making operational decisions.

USER INTERFACE?

- Wikipedia -

Thursday, May 5, 2011

Page 5: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

START

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ It’s about communication

❖ Easier to justify

❖ Some theory available

❖ Not about personal opinion

❖ Not always black & white

❖ Practice & experience matter

DESIGN (NOT ART)

Thursday, May 5, 2011

Page 6: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

CONCEPT

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

?❖ What, Who, Where and How?

❖ The (Business) Plan

❖ Is The Content Ready

❖ Any Existing Guidelines / Requirements?

❖ Special Campaign / Message?

GETTING STARTED

Thursday, May 5, 2011

Page 7: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

CONCEPT

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ What are the boundaries?

❖ Screen resolutions

❖ Browsers

❖ Flash enabled?

❖ Special plugins?

❖ User behaviors

RESEARCH

THANKS TOFIREFOX

Thursday, May 5, 2011

Page 8: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

CONCEPT

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Blog? What about photo blog?

❖ Content DynamicsHow often being updated?

❖ Content TypesText, Images or Videos

❖ User Interaction Flow1 or 2 layer deep?

CONTENT RULES!BLOG

NEWS PORTALPHOTO BLOG

PORTFOLIOCOMPARISON SHOPPING

COMPANY PROFILEMARKETPLACEONLINE STORE

SOCIAL NETWORKFINANCE

GAMESJOB BOARD

Thursday, May 5, 2011

Page 9: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

CONCEPT

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Build a Sitemap

❖ Main NavigationInformation grouping about how users will access the content

❖ User Interaction FlowHow to checkout? How to jump between pages? How to go back home?

❖ Pick a LayoutConsider content types & banner ads sizes. Fluid, Fixed, or Grid?

INFORMATION ARCHITECTURE

Thursday, May 5, 2011

Page 10: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

WIREFRAME

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Content VarietyHow much description? Tech specs?

❖ The HighlightAny specific features to showcase?

❖ Set Goals for Every PageSet the goals for users to accomplish on every page

❖ Set by PrioritySort by priority from the most to the least important

DESIGN: INSIDE OR OUTSIDE?

Thursday, May 5, 2011

Page 11: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

WIREFRAME

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Plain SketchPen & Paper is Best. Speed wise.

❖ Content / Information GroupingTitle, body, metadata, toolbars, etc.

❖ Try as many mockupsWhile still on paper. Don’t waste time later.

WIRE-FRAMING

Thursday, May 5, 2011

Page 12: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

WIREFRAME

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Group by ElementsMain content, meta, toolbar, comment, form?

❖ Use Color & SpacingUse different color & white space to group contents

INFORMATION GROUPING

Thursday, May 5, 2011

Page 13: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

WIREFRAME

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Align by Vertical LinesUse imaginary vertical lines as boundaries

❖ Space HorizontallyUse spacing to separate content horizontally

ALIGNMENTS

Thursday, May 5, 2011

Page 14: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

PROTOTYPE & INTEGRATION

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Photoshop

❖ HTML & CSS

❖ Some JavaScriptHighly recommended (to test interaction)

❖ Color SchemePick some colors to start with

❖ TypographyFont family, font size, heading, body text

PROTOTYPEPHOTOSHOP

HTMLCSS

JAVASCRIPTCOLOR

TYPOGRAPHY

Thursday, May 5, 2011

Page 15: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

PROTOTYPE & INTEGRATION

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Color SchemePick only a few (http://colourlovers.com should help)

❖ Start with Branding ColorOfficial from the client/company

❖ Check Contrastbackground, body text, headings, meta, links

❖ Confused with Colors?Do it in greyscale first!

COLOR & CONTRAST

Thursday, May 5, 2011

Page 16: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

PROTOTYPE & INTEGRATION

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Weight of ElementsWhich one more important?

❖ Photo vs. TextOfficial from the client/company

❖ Color & SizeColors & size also decide the importance of an element

❖ Bold, Italics, Uppercase (Font)To create difference between text

(MY) +1 RULES

Thursday, May 5, 2011

Page 17: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

USABILITY TESTING

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ We just covered all the basicsYes, believe it or not :)

❖ It should be enjoyableEven in greyscale!

❖ Clear NavigationInformation structure is set and things are easy to find

❖ Congrats! You’re a good Web Designer now!In the 90’s :)

USER EXPERIENCE

Thursday, May 5, 2011

Page 18: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

USABILITY TESTING

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ What is this?Asynchronous JavaScript and XML

❖ Rich User InteractionsMore to do, on the same page

❖ No Full Page ReloadsSaves you bandwidth too!

❖ Problem!Page reload is no longer a feedback or confirmation

AJAX? YAY!

Thursday, May 5, 2011

Page 19: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

USABILITY TESTING

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Loading AnimationSimple way to say “Wait a minute...”

❖ Error MessagesOops! But where is it? What’s wrong?

❖ Confirmation MessagesIs it really saved?

❖ Post-ActionWhat if I want to cancel? Undo? Go where?

TRANSITIONS, FEEDBACK & CONFIRMATION

Thursday, May 5, 2011

Page 20: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

USABILITY TESTING

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Prepare for The UnexpectedUse your imagination with user interactions

❖ General ConsensusDo what others have been doing. Safer!

❖ Usability TestOK with contrast? Is content highlighted properly?

❖ Refine ThingsFix and improve for better user experience

KEEP TESTING & REFINE

Thursday, May 5, 2011

Page 21: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

END

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Keep It SimpleDon’t try to create new rules

❖ Some TheoriesColor theory, maintain contrast, weight, and alignment

❖ AJAXPay attention to transitions, feedback and confirmations

UI & UX IN SHORT

Thursday, May 5, 2011

Page 22: Web UI & UX design by Ivan Sielegar

Firefox 4 Launch Party / Surabaya / May 4th, 2011

END

Firefox 4 Launch Party / Surabaya / May 4th, 2011

Ivan Sielegar / Navinot.com / Goorme.com

❖ Question? [email protected]

❖ Twitter? @IvanSielegar

❖ Blog? http://navinot.com

❖ Project? http://goorme.com

Phew! I’m Done!

Thank You!Thursday, May 5, 2011


Top Related