Web Design For The Nondesigner

Two things to consider when designing a Web site: 1) Relevance 2) Usability Make it easy and intuitive for visitors to get what they want by not going against standards. Sites Should: * Meet Expectations on Every Level * Be Intuitive (Easy to Use)

Jakob's Law of the Web User Experience: http://www.useit.com/alertbox/20000723.html Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Keep in mind - Users are highly goal-driven on the Web. Your Job: Make it easy for them for them to reach their goal.

Relevance - Give The People What They Want What is the purpose of your site? What will define it as successful? Organize your site for the user, not according to your internal format. Develop specifically for the Web. Check yourself.

Why Are McDonalds and Burger King So Popular? Good Food?

Why Are McDonalds and Burger King So Popular? Good Food? People Know What to Expect

Content 4Cs

Content 4Cs Consistency

Content 4Cs Consistency Concise

Content 4Cs Consistency Concise Compatibility

Keep All Content Relevant Content is Not Just Text

Keep All Content Relevant Content is Not Just Text ● Services o Banking o Commerce o Directory Searches ● Media o Music o Video o Animation o Games o Presentations ● Information o Libraries o Directories o Lists o Links o Articles

Be Consistent Styles - Based on Your Corporate Image Templates * Colors * Navigation and Layout * Text Sizes * Naming Conventions of Files, Styles, * Fonts Images, Directories

Be Consistent Web Safe Fonts Logo * Fonts affect the way your readers * Top / Top Left perceive your page (serious and formal, * Clickable to home page or friendly and casual). * Usability concerns. For example, Navigation some font types are more easily readable than others * Main Menu at top or left * Text links at the bottom of all pages Technology * Ability to navigate within a section * Ability to navigate cross sections from * Server side includes and any page of the site templating systems * HTML and CSS Consistent Footer * Skins/Themes * Text Links (Way Out) Consistency can have variations * Contact info at bottom of all pages (color by section) http://pbskids.org/games/ Users-Empowered Relative Design Exceptions * On-line design uses a flexible grid, * http://yarokyarok.com not like print * Relative not absolute sizes

Navigation Questions: Sitemaps and Breadcrumbs “Site maps are a secondary navigation feature — a humble role that they share with breadcrumbs. Indeed, the arguments in favor of site maps are the same as the arguments for breadcrumbs:” From http://www.useit.com/alertbox/sitemaps.html They don't hurt people who don't use them. They do help a few people. They incur very little cost. Did They Improve? However only 7% users use them... http://www.mfa.gov.il/MFA/SiteMap.htm Evidence they also can help with SEO

Navigation Questions: Sitemaps and Breadcrumbs For Good Navigation: ● Main Menu at top or left ●Text links at the bottom of all pages (Way Out) ● Ability to navigate within a section ●Ability to navigate cross sections from any page of the site ● Test ● Charlie's Three Click Rule

Be Concise

Be Concise ● Graphics (use whitespace) ● Text (scannability) ● Interface (simplicity) ● Layout The more things there are Remember Relativity - Avoid "banner blindness" to look at, the less anything If everything is http://jpost.com will be seen, and the more important, nothing is. overwhelming it'll be.

Compatibility ●Least Common Denominator Design ● Cross-browser ● Cross platform ● Multiple resolution ● Do not depend upon third-party plugins, downloads or client-side programming Use Standards http://www.w3.org/TR/CSS21/ Check cross-browser/cross-platform compatibility http://www.quirksmode.org/css/contents.html ● Validate http://validator.w3.org/ ● Third-Party Tools ● Test in real-life Israeli Sites are notorious for non-compatibility Ben Gurion Airport fails all tests - browser, platform and resolution http://www.iaa.gov.il/Rashat/en-US/Airports/BenGurion/ http://www.iaa.gov.il/Rashat/he-IL/Rashot/BrowserSystemMessage.aspx School site - http://efrjlm.go.cet.ac.il/go/index.asp

Information Architecture You need to consider both the user and the site owner to make the site both intuitive and easy to maintain ● Users should know what to expect before they click ● Every page should have content: ● Do not have pages of only menu items so that users click just to get to a page where they have to click again ● Do not use internal jargon or structure. You may know your field or your organization, but do not assume that your users do ● The Web is not linear and should not be designed like pages of a book: o Each user creates his own narrative and your job should be to guide all users, no matter what their path, to your site's "Most Desired Action" o Do not assume every user will enter your site from your home page. ● Once the infrastructure is in place you can expand: ● ● Have inclusive top-level navigation. ● Chose the correct environment in which to design the site. Just as if you were designing a house, and you knew that one day you wanted a master bathroom, but right now you could not afford it, you should still lay down the pipes so that you do not need to tear up the floor in the future.

How To Write For The Web People do not read on-line; they scan the page. Structure ● Use the inverted pyramid. Style ● There is no substitute for writing well. ● Good copy increases your site's credibility . ● Avoid self-promotion, exaggeration and hyperbole ("Coolest", "Hottest"). Be Succinct ● Write no more than 50% of what you would write for printed material. ● Convey one idea per paragraph. Write Scannable Text ● Structure Articles with Understandable Titles and Subtitles ● Use Bulleted Lists ● Use Bold Text to Emphasize Important Words ● Use Hypertext Links Empower Your Reader ● Readers create his/her own non-linear flow of information ● Speak of audience benefits, not from your point of view

Recent Changes Server-Side programming vs Client-Side Programming ●http://script.aculo.us/ ●http://code.google.com/webtoolkit/ ●http://mootools.net ●http://www.extjs.com/ ●http://www.icefaces.org/main/home/index.jsp ●https://www.jboss.org/jbossrichfaces/ ●http://jquery.com/ ●https://ajax.dev.java.net/ The Semantic Web ●Use informative names relating to content, not layout. For Example: id="header" id="branding" id="left-menu" id="navigation" Finding a Common Denominator ● iPhone ● High Definition TV ● Personal Computers ● Handheld Devices ● PDAs

Evolution of Sites ● On-Line Brochure ● Interactivity o Forms o E-Commerce o Searches ● Personalization Tracking and Recommendations: o Personalized Shopping o Personalized Searches ● Platform for user-generated content (Web 2.0) o Facebook o MySpace o YouTube o Blogs o Wikipedia ● Information Overload

The Future Web 3.0 Semantic Web = 3.0 John Markoff (NYT Nov 12, 2006) http://www.nytimes.com/2006/11/12/business/12web.html?ex=1320987600&en=254d697964cedc62&ei=5 Web 3.0 = 4C+P+VS (content, commerce, community and context plus personalization plus vertical search) Sramana Mitra (Forbes) http://www.sramanamitra.com/articles/web3/ Your Personal Shopper - More than just a travel agent content semantics social networks combination to yield personalized relevant results Examples: Search: http://www.headup.com/ Advertising http://www.peer39.com/

The Future Cross-Device Cross-Operating System Applications Adobe Air Titanium: http://www.appcelerator.com Appcelerator Platform One platform for Mobile, Desktop and Web application development

Questions ● Are Meta Tags Dead? ● GIF, JPG or PNG? ● Accessibility ● SEO, SEM, SMM, SMO ??? ● Twitter, Facebook, Digg?? ● Analytics? ● Flash ● Web applications, APIs and Mash-ups? ● Mobile Web? ● Copyright? ● Video Formats? ● Hebrew - UTF-8, Win1255, RTL Charlie Kalech Director, J-Town Productions Ltd. Helping Our Clients Succeed on the Internet Since 1994 http://www.j-town.co.il charlie@j-town.co.il Tel: 972-2-671-9918 FACEBOOK http://facebook.com/charlie.kalech TWITTER http://twitter.com/CharlieKalech LINKED IN http://www.linkedin.com/in/charliekalech

http://j-town.co.il	52
http://www.slideshare.net	4
http://www.linkedin.com	3
http://www.lmodules.com	1

Web Design For The Nondesigner

by Charlie Kalech

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 60

Statistics

Web Design For The Nondesigner Presentation Transcript