WEBSITES THAT SUCK

AND HOW TO FIX THEM

UI ≠ UX

• USER EXPERIENCE

– Holistic Experience from Start to Finish

• USER INTERFACE

– Visual and interaction design, what the user

actually sees

USER INTERFACE

• THE BETTER THE UI DESIGN THE

LESS YOU NOTICE IT

• MINIMIZE COGNITIVE LOAD

• HICK’S LAW

– the time it takes to make a decision increases

as the number of alternatives increase

• UNBREAKABLE LAW

– Design for the users

USERS

GOOD DESIGN

VISUAL PRINCIPLES

INTERFACE COPY

• WORDS MEAN THINGS

• CLARITY

– Be Specific

– Avoid Jargon

– Be Concise

COPY DESIGN

• STRUCTURE MEANS THINGS

– Important Words First

– Human Reading Patterns

WE KNOW WHAT YOU WANT!

• ARE YOU READY FOR SOME

WEBSITES?

NAVIGATION

COLOR

ADVERTISING

COPY DESIGN

WHITE SPACE

ANIMATED GIFS

ONE PAGE DESIGN

GUIDELINES

MEETING LIST

MEETING LISTS

REFERENCES

http://www.designingforinteraction.com/

http://ui-patterns.com/

http://www.uxpin.com

http://baduiuxdesign.tumblr.com

http://www.nngroup.com/articles/minimize-cognitive-load/

http://www.huffingtonpost.com/sarah-deane/ui-does-not-equal-ux_b_6746674.html

http://blog.echoenduring.com/2010/06/02/my-problem-with-white-space/

http://www.theblogismine.com/2013/04/15/psychology-of-color-infographic/

http://webdesign.tutsplus.com/articles/how-to-create-a-web-navigation-model--cms-

22885

http://thenextweb.com/dd/2015/03/08/how-to-reduce-friction-with-good-design/

http://www.noupe.com/inspiration/photography/the-ultimate-list-of-completely-free-

images-43-handpicked-services-89011.html

http://www.webdesigndev.com/web-development/essential-free-web-design-ebooks

http://www.smashingapps.com/2015/03/09/10-fresh-resources-for-web-developers.html

http://tympanus.net/codrops/2015/02/26/inspiration-button-styles-effects/

http://www.uxbooth.com/articles/icon-worth-1000-words/

REFERENCES

http://sixrevisions.com/web-performance/web-performance-optimization-blogs/

http://www.cxpartners.co.uk/cxblog/8-tips-for-designing-a-faster-website/

http://www.fastcodesign.com/3043024/a-brief-history-of-user-experience-design

http://www.webdesignerdepot.com/2015/03/5-rules-for-choosing-the-perfect-web-

typeface/

http://thenextweb.com/dd/2015/03/03/the-5-pillars-of-interaction-design/

http://blog.invisionapp.com/a-brief-history-of-user-experience/

http://www.motocms.com/blog/web-design/25-ux-design-tools/

http://uxmag.com/articles/bottling-lightning

http://www.sitepoint.com/create-unforgettable-interface-copy/

http://designshack.net/articles/webstandards/google-material-design-everything-you-

need-to-know/

http://mashable.com/2015/02/24/user-experience-design-2015/

http://www.creativebloq.com/netmag/free-ebook-mastering-interaction-design-21514295

http://usabilitygeek.com/10-ux-design-trends-2015/