Principles of web design malaysia:A GuideKevin Kell (contact)
Principal, UsableXperience Seeing
http://www.uxpr.com
In creating this document, I stumbled upon the intention providing an immediate and concise introduction to important design principles was served quite nicely through the use of an outline format.The listed 11 principles are important lessons gathered from numerous years of employed in the software program development field. 1) Use a goal-(being on the web isn’t it)-and give it a lot of thought.
÷ Determine your main goal, and be specific and knowledgeable about that goal. I suggest to sketch or write out an illustration of the foods you want your web site to perform.
÷ Use affinity diagramming, brainstorm, and become all team members involved.
÷ Each page require to have its own goal:i.e., specifically what does this page accomplish?
÷ When you are finished with each page: step back and ask yourself (should be ready to answer -Âyes’ to each and every question):
÷ Does this page meet its own goals?
÷ Does each page further the goals of those site? 2) Be able to justify your site-Âwhy should your site exist?
÷ Have the ability to answer the following questions:
÷ What would you like this web site to do?
÷ What do you want the user to achieve?
÷ Let s discuss you aiming to communicate?
÷ How is each bit of real info best presented?
÷ Content is king-æ In case you don’t have anything to convey, don’t let those HTML files off your hard disk.Investigate all of the resources that is available to you prior to design your site. Watch what content and features will attract users.
÷ Avoid -Âunder construction- pages and content-free pages. 3) Use effective communication procedure
÷ Keep text length short (generally), since most users is not going to take the time to read long passages for the display screen.Experts report:
÷ Reading online is less fast
÷ People are distracted by hyperlinks
÷ They might rather follow a link than scroll
÷ Shorter documents download faster.
÷ Readers scan the text for the page for the hypertext links.
÷ Utilize the available Tech writing talent!
÷ An editorial voice can be a great asset into a internet page.Discover a voice that may be warm, open, and friendly.Don’t sound patronizing or egotistical; talk to your readers, not right down to them. 4) See your audience’s wishes
÷ The majority of folks aren’t willing to spend a day learning what’s contained in your websites.Obtain them to the information they need as rapidly as you can.Which can be sure thanks to satisfy your audience.
÷ Learn the demographics of this audience:their age, occupations, skill levels, interests.
÷ Ensure that your pages fulfill the goals of your audience-you will not be your audience. Therefore, it’ll take some data-gathering in order to design on your intended audience.
÷ Which are the common tasks that your audience will be using your pages to perform?Here are a few examples:
÷ Get details about your business service
÷ Recognize how you use, etc.
÷ Thus, your structure should directly reflect your audience’s needs, expectations, and goals.So ask queries about your audience. 5) Manage expectations (overviews)
÷ If you already understand the needs and goals of your respective audience, you could structure your site appropriately.
÷ Enable the user to view what are the whole site appears that at a glance, this can are certain that the audience will be able to fulfill their needs ahead of later.
Snyder:Will it be clear exactly where the user would naturally go once they click on each link?
÷ A contents page is a superb method to tell users what’s on the dating site just before ought to jump one single link; it will serve as both a navigational aid plus a simple map .
÷ Identify the leading goal each page in first couple of inches of screen space.
÷ Provide a summary or quick overview of the page prior to the user clicks the link, maybe quick blurb relating to the major points contained in a really long page.You should answer the following questions:
÷ What’s around the page?
÷ What is able to I do here?
÷ Where can I go from here?
÷ The foremost categories should differentiate themselves from a single another and may even quickly and clearly communicate their contents. 6) Navigation, navigation, navigation
÷ Navigational aids on every page are a must, because users can easily wander away in just a complex site.Even better, make your navigational aids standardized across all pages.
÷ Blueprint the probability that anyone has jumped within your site.Would a user manage to find up around from anybody page?Can they be able to get to your own home page easily?
÷ Allow users start viewing your pages in different ways (e.g., search boxes, navigational paths, sequential paths, tables of contents, and indexes).Prepare yourself for your personal audience using your pages in ways you didn’t expect.
÷ Give you a broad, not deep structure: buried pages are rarely found and they are difficult to locate again.
Important bits of information should be shallowly within the the structure.
Produce a hierarchy by making categories that reflect conceptual distinctions users would create between many kinds of information, not you.
Normally, avoid for people to be able to navigate, users should not need to navigate greater than 4 to 5 levels to reach information.Ifyour site contains more levels than that, you should reconsider your site’s structure.
÷ Karen Evans urges designers to have leaving your computer and endeavor to imagine just what site structure would naturally be in all of its connections and complexity:
Realize the hierarchy very understandable-Âcreate a model that appeals to your audience.
Apply a skeletal framework: visualize how it is that the structure of your site should work.Visualize the connections and complexity.
÷ Go away from a understanding of the information-Âorganize it concerning user needs. 7) Follow standard design practices:Analyze, design, prototype, experiment
÷ HTML is really a different environment for design given that designers themselves can build the merchandise.Also, this product can continually evolve through iteration.
÷ Nevertheless, develop your pages according a precise process:analyze your audience along with your goals, find a good design by resulting in a quick and dirty prototype with all the involvement of users and design team (including usability), after which obtain your usability specialist test your websites.
÷ Test:define both your usage and usefulness goals for success.
Check out raw results-Âusage stats and hit counts.
Check out usability results-Âhow many users succeed or fail on certain tasks?
Increased usability will have consequences internal on your company-Âsuch as lowered customer service costs.
Appropriate graphics for the most part
÷ They must advance the goals within your site. Don’t use gratuitous graphics.
÷ Graphics ought to be only used when the information contained there justifies the associated fee in speed and resources.A lot of people don’t have got a T1 line connected to their house.
÷ Huge banners parading your logo aren’t worthwhile and are wasteful of space.
÷ Image maps should be used carefully.They are tricky to program, and completely terrible if everything doesn’t work right.Be certain you add text buttons for people who have text-only browsers or image loading deterred.
÷ Heller andRivers advise:
÷ Use images with small dimensions and storage sizes.
÷ Reuse images for a passing fancy page.
÷ Reuse images for a passing fancy site.
÷ Don’t forget to make use of the visual tools are available to you:
÷ Borders-Âwhen whitespace won’t work, in case a big change of context.
÷ Whitespace-it can be used to generate a conference product be noticeable or blend in.
÷ Tables-Âthey are extremely useful in organizing layout.
÷ Fonts-Âfonts will also be part of the user’s experience. 9) Provide many help features.
÷ Tell users -ÂWhat’s there on the positioning.-Â. Users need to master how to navigate and orient themselves within 15 seconds.
÷ The user need to tell what’s global (e.g., features, navigation aides, etc.) to your site:
÷ What’s going to let the user to abtain home page?
÷ What should the user have the ability to access anywhere on the dating site?
÷ The reader should also be able to tell what exactly local and specific to each page, like text or other content.
÷ A graphical map of the page links is likely to be the single most helpful components of your site.
÷ A visible language would permit users to know when they’re in the site and as you they’re not.The visual language is comprised of your pair of meanings, the things you choose to say is likely to be -Âyou are here- or just about anything you can be alone with.Produce a consistent visual language by making use of:
÷ An identical images or backgrounds throughout your site.
÷ Consistent layouts of text and user interface
÷ Consistent color idea
÷ Common illustration style
÷ Any element can be utilized to create a meaning, just be certain to limit the volume of meanings you communicate on any one page. 10) Design for low bandwidth connections.Users shall be accessing the web from many alternative places and a lot of other ways.
÷ Users can be connected by modems, LANs, or from abroad
÷ Whatever the connection, there exists points of which the complete Internet experiences bandwidth problems under high load conditions.
÷ Place yourself within the user’s shoes:Test your websites with a modem
÷ Provide alternate text labels for your graphics:
Users should still could possibly your site with images turned off.
Use the same words and ordering since the graphics 11) Planning for differences:your pages will probably be viewed on different hardware and software platforms.
÷ Apple Macintosh, Windows, OS/2, and UNIX.
÷ It is essential to understand the medium itself.The formatting text may result within a lot of different views and layouts counting on platform and browser.
÷ Make sure the features employed will likely be displayable by your audience’s browsers.Don’t use cutting-edge features unless your audience is prepared because it otherwise you construct multiple versions of this site.
÷ You must address very cheap common denominator.Decisions here get challenging when one has to spend money on the differences between platforms.
÷ Each page in your site should really be tested by using a type of browsers on a variety of platforms.