Procrastination Blocks Creativity

It is while you are working on a new design that you will find yourself swamped with ideas of other projects.  Don’t let that throw you off track.  Simply jot them down and try brainstorming for the current project in hand.

Start From The Middle

It’s unexplainable, but for some reason web designers feel they have to start from the top of the Web page and design down.  Yes, ultimately, that’ the way you will have to think about the HTML or CSS, however, when  working on a design, best to focus on the most important part first, and usually it is not the navigation, branding, or advertising to be found at the top.  The same is true for content writing, as more often than not one starts off by giving a title to the article, and then having to change it later as the article is usually completely different from what the title says.  This means the title has to rewritten to match the content.

Take a Break From The Computer

While, you may initially do most of your rough drafts on the computer, take a break from it so that you don’t get hung up on technical issues like HTML or JavaScript.  Do some designs on paper, which are easier to erase or scratch out.

Take All The Time You Need

Don’t jump right in and start building a web page, take time planning your web page and when you think you’re done, take a little more time to go over the plans.  

  Ask for help

Never hurts to ask for help, but make sure those you do ask for help are people who can provide constructive criticism. 

If you’re really stuck, do something else

If, you seem to be stuck for ideas, give yourself a break.  Don’t force yourself to go on, do something else to allow your mind to get off the problem you are working on.  Most certainly, once your mind is refreshed, the ideal solution will b

1. Your website content should be both useful and interesting content, as well, it should be presented in an appealing manner with a quick download time.  The sites overall appearance i.e. backgrounds, fonts, etc. should remain consistent page to page and only web-safe colours and fonts should be used.
2. A professionally designed website loads faster due to a clear navigation system, unbroken graphics and links that work well.
3. Use a limited number of graphics appropriate to the content of your website, optimising the graphics used to improve load times.
4. Change the content of your site frequently to encourage return visitors.
5. Keep contact information easily accessible, responding quickly to requests for information or trouble reports.
6. Start a newsletter allowing visitors to keep in touch, tell them about any new changes to your site.  However, make sure you are not harvesting e-mail addresses for spam purposes.
7. Offering a loads of free stuff and members-only specials will add to its attraction.
8. Do away with too many animated graphics, unwanted pop-ups or music with no ‘off’ button, as these tend to annoy visitors.
9. Keep clean HTML tags.
10. Design a cross browser compatible website that is accessible to text only browsers, as well.

 There are certain design gimmicks that should be avoided since they prove to be red flags to an unprofessional web appearance:

• Animated bullets
• Too many graphic and / or line dividers
• Multiple banners and buttons
• Too much advertising
• Large Welcome banners

Other things to be avoided are:

• No Meta tags
• Under construction signs
• Scrolling text in the status bar
• Large scrolling text across the page
• Poor use of mouse over effects
• Poor browser compatibility
• Poor use of frames
• Poor use of tables 

Keeping all of the above in mind and you can be sure you will come up with website that is not only attractive but has a decidedly professional touch to it.

Bad Search

Search engines should be designed for usability and not made overly literal so they are unable to handle typos, plurals, hyphens, and other query terms variants.  Search is a user’s lifeline when navigation fails.  While, advanced search sometimes helps, it is the simple search that usually works best presented as a simple box, as that is what users are looking for.

PDF Files for Online Reading

Forget using PDF format for web designs, not only do they irritate but they also break the flow while browsing.  Even simple things like printing or saving documents are made difficult, since standard browser commands don’t work. 

 Not Changing the Colour of Visited Links

Links are a key factor in navigation processes.  Ensure visited and unvisited links have different colours so users are able to tell the difference between visited and unvisited links. 

Non-Scannable Text

A wall of text is deadly for an interactive experience, boring and painful to read.  It should be written with online not print in mind, drawing users into the text and supporting scannability with the following well-documented tricks of the trade:

• Sub-heads
• Bulleted lists
• Highlighted keywords
• Short paragraphs
• Inverted pyramid
• A simple writing style, and
• De-fluffed language devoid of marketese. 

Fixed Font Size

Forget using CSS style sheets which unfortunately give websites the power to disable a Web browser’s ’change font size’ button and specify a fixed font size.  About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40.  Respect user preferences, letting them resize text as needed.  As well, specify font sizes in relative terms, not as an absolute number of pixels. 

Page Titles With Low Search Engine Visibility

Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need. 

For your homepage, begin the with the company name, followed by a brief description of the site.  For pages other than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page.

Anything That Looks Like an Advertisement

Selective attention is very powerful, therefore, it is best to avoid any designs that look like advertisements, such as, banner ads, avid animation or blinking or flashing text, pop-up purges, etc.

Design Conventions

Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen.  The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it. 

Opening New Browser Windows

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer’s carpet.  Designers open new browser windows on the theory that it keeps users on their site.  The strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. 

Not Answering User Questions

The ultimate failure of a website is to fail to provide the information users are looking for.  Sometimes the answer is simply not there and a sale is lost because users assume your product or service doesn’t meet their needs, as there are no specifics.  Other times the specifics are buried under a thick layer of marketese and bland slogans.  Since users don’t have time to read everything, such hidden info might almost as well not be there. 

The worst example of not answering users’ questions is to avoid listing the price of products and services.

 “I want you to read my message” doesn’t have the impact as “I WANT YOU TO READ MY MESSAGE”. 

Typography Gets The Attention

Using typography by changing font sizes to get attention is not a new bag of tricks.  However, before making your headlines 48px or larger, a few simple rules have to be followed. 

1. Ask yourself if it’s really important.  Announcing a 30% off book sale might be important for avid readers, but the huge font size may act as a turn-off for others.
2. It also depends on the standard font size used on your web page.  If, everything is in 20 pt. and your headline is in 30 pt., there is no noticeable difference.  However, 8 pt. text and a 16 pt. headline makes all the difference.
3. Set down a font size standard for all company events that may trigger and increase in headline size.  But, changing the font size is not the only way to get attention.  Play with the font e.g.

•  For emphasis switch from Arial (family) to Arial Black (family).
• Use a colour that attracts attention e.g. red.
• Change the style or weight of text by italicising or making it bold.

Other Ways to Get Attention

There are other ways apart from changing the font size or colour to get attention, such as: 

1. Images / Graphics:  Always, attention-getters, the correct images and graphics enhance and emphasise the message your words are trying to convey.  Since, people are visual, the aphorism ‘a picture says a thousand words’ has never been truer.  See Google, and you will see that it uses pictures to emphasize various holidays and events.
2. Layout: Completely change the layout of your web page to attract attention to an event, just as Amazon did by replacing their front page with a letter from its President, thanking customers for their loyalty.
3. Animation: Use animation instead of flat images to attract attention.  Many web designers use this in splash pages to showcase their skills and make their site more interesting.

 Within Limits

However, it is easy to go overboard with these techniques.  If, every other line of your site is bolded or in red or is blinking, then nothing will stand out.  Be discreet when using these techniques, as announcing 30% off for a book sale with the same intensity as a newspaper announcing a murder, war or robbery, will only drive away visitors to your site.  Adopt a ‘less is more approach’ for a even-handed outcome. 

• Agile Data (AD)
• Agile Microsoft Solutions Framework (MSF)
• Agile Modeling (AM)
• Agile Unified Process (AUP)
• Dynamic System Development Method (DSDM)
• Extreme Programming (XP)
• Feature Driven Development (FDD)
•  Scrum
• Usage-Centered Design (UCD) The majority of agile projects teams made up of less than ten people, co-locate, have direct access to stakeholders and tools, such as, whiteboards and corkboards, development machines, development tools, including testing tools.  They take a test-driven development (TDD) approach, writing a unit test before they write enough production code to fulfill the unit test, and rarely have access to usability labs.

Agile projects are comprised of four phases, as under:

1. Iteration 0: The first week of agile projects referred to as ‘Iteration 0’ is project initiation involves gathering of initial support and project funding; working actively with stakeholders, understanding the scope of the system, building the team, putting together the initial system architecture; and setting up the environment.
2.  Development phase sees agilists deliver high-quality working software that meets the changing needs of stakeholders.
3. Release phase is all about agile practitioners transitioning the system into production.
4. Production. During this phase, the fundamental goal is to keep the system useful and productive, keeping it running, while helping users use it.

Agile projects are very different from traditional projects where a business analyst creates a requirement model, then hands it to an architect to create a design model, which then is handed to a coder to write a programme and then tested by a tester.  Projects using Agile methodology have developers working closely with their stakeholders, getting a better understanding of their needs, pairing together to implement and test their solution, and then showing it to the stakeholder for quick feedback.  From a user experience point of view, the agilists approach to modeling and testing is very different to that of traditionalists.

Usability, a quality attribute of an Agile system encompasses learnability, efficiency, memorability, error recovery, and end-user satisfaction, and is a highly structured, product development process, with the focus on understanding product user’s needs and goals.

We’ll take up where we leave off tomorrow!

The background colours of a website, its header, text, headlines and sub-headlines colours, all have a psychological impact on site visitors.  For example, look at the colour chart and you will find how certain colours are associated with certain traits and emotions.  However, colour associations are not universal and our personal association and cultural backgrounds also influence our experience of colours.  For example:

Red is associated with passion, danger, warning, excitement, food, impulse, action, adventure, strength, boldness, determination, desire and courage.

Pink is associated with softness, sweetness, innocence, youthfulness and tenderness.

Orange is associated with comfort, creativity, celebration, fun, youth, affordability, enthusiasm, cheerfulness, affordability and stimulation.

Yellow is associated with curiosity, playfulness, cheerfulness, amusement, attention-grabbing, comfort, liveliness, intellect, happiness and energy.

Green is associated with money, nature, animals, health, healing, life, harmony, durability, reliability, safety, honesty, optimism and freshness.

Blue is associated with success, seriousness, calmness, power, professionalism, depth, stability, loyalty, reliability, honour and trustworthiness.

Purple is associated with royalty, justice, ambiguity, uncertainty, luxury, fantasy, dreams, power, nobility, mystery, elegance and magic.

Grey is associated with neutrality, indifference, reserved. conservatism, traditionalism, intelligence and seriousness.

Brown is associated with earth, nature, tribalism, primitive, simplicity, endurance, relaxing, confident, casual and reassuring.

Black is associated with seriousness, darkness, mystery, secrecy, elegance, sophistication, formality and strength.

White is associated with innocence, purity, cleanliness, simplicity, newness, virginity and peace.

 Divided into warm and cool categories, yellow / orange / red are associated with the warmth and heat of the sun and fire; while blue, green and violet bring to mind the coolness of the leaves, sea and sky.  And while, warm colours seem closer to the viewer, vivid cool colours can overwhelm light and subtle warm colours.  So, it is advisable to use warm colours for a website’s foreground and cool colours for the background to enhance depth perception.

A very powerful element in web design, colours evoke certain responses and can be used to support the purpose of a website.  A good accent colour, Red stimulates people into making quick decisions and is good for food sites.  The calming effect of Blue when combined with warm colours (yellow, red) results in vibrant and high-impact designs, while a blue and white combination works best for business sites.  An attention grabber, Yellow is effective for stimulating mental activity.  While, Green is cool and pleasing to the eye, used as a pre-dominant colour in a website, it has been known to drive people away.  So, unless you are designing a Golf website, or one associated with nature or lawns, it is best used for website accents only.  As for, Orange it is a colour the young find highly acceptable.

Affecting shopping behaviour, psychologists believe colour impression account for 60% acceptance or rejection of a product or service.  Determining how colour affects shopping habits, like the psychologists, market researchers also validate the belief that colour affects shopping habits.  For example:

• Red-orange, black and royal blue capture the interest of impulse shoppers.

• Pink, teal, light blue and navy interest budget shoppers who plan in advance what they need to purchase.
• While, traditionalists respond best to pastel pinks, rose and sky blues.

Use your commonsense to select the right colour from the numerous existing shades of the same colour, zero in on your target audience and what psychological message you wish to convey through colours used.  And, as far as colours in text are concerned, black text on white backgrounds may seem more than a tad dull, however, they are the most readable and eye pleasing of them all.  Forget about yellow text on white background, which apart from being unreadable, causes eye-strain and will have people quitting your site rather too soon.  A lot of sales can be lost by using text that strains the eye.

To sum up colour psychology, colours are perceived to influence our decisions in life, select them wisely as like words, they can be used to great effect!

While, it is not easy to correlate product sales with colour, however, it has been noted that when the red can of sugar-free Canada Dry Gingerale was changed to green and white, sales shot up more than 25%.  Clear indication, there is some validity in applying colour psychology in life and web designs, as it plays a significant role in every tactical advantage.  Replacing bar codes, scanners, database queries with colour proved rather useful for one medical equipment manufacturer, in quickly identifying the department s borrowed device belonged to. 

Similarly, applying colour psychology in thermal map web designs, could be an informative alternative to featureless blog calendar archived entries.  And, many users have indicated that the presence of colour hinted at the possibility of finding relevant information.  So, while people equate blue with calm and spells corporate competence, online retail can increase sales by incorporating and suggesting a match from a range of conservative to adventurous coloured ties for a dress shirt an online customer is considering buying.  At the right time and the right moment, accessory suggestions can increase orders by supporting the psychology behind the shopping process. 

A site like www.esty.com does just that by supporting user psychology with a shop-by-colour feature that supports shopping.  A far cry from ‘colour astrology’ charts, me-too colour schemes that screamed -Boredom.

Whether, a colour evokes a positive or negative emotion, it is dependent on the context it is used in.  Colour studies teach casinos how to direct your gaze, hospitals how people use colour to find their way, and colour has also been known to impact learning.  Using colour psychology helps improve focus and relieves classroom eye fatigue.  Applied to human psychology, colour has been known to instruct and reduce accidents in the workplace, showing colour psychology is more sophisticated than colour charts make it out to be.

While, today we have seen how colour helps increase sales and learning, tomorrow, we delve a little more into the influence of colour psychology in other areas, as well.

You must not concentrate only on making web pages compellingly impressive, one must also utilise one’s skill and talent to ensure site user-friendliness, getting together a site that aims to reach as wide an audience segment, as possible. 

Web designers needs must understand the capabilities of a human eye and produce user friendly web designs that cater not only to web users with normal sight, but even those with partial eye-sight, or those who are blind or suffer from red-green colour blindness. 

To be a successful web designer, up your basic knowledge about how the human vision works, how the colour blind react to various designs, etc.  Subject to huge variances, even in normal vision, the size of elements affects an individual user’s colour perception.  Each and every individual views colours and shade intensities very much differently than others. 

Light setting levels affect the inconsistencies in colour patterns, just like your hair colour changes depending on the strength of lighting you see it under.  People with retina cones that are more sensitive to the colour blue, see the colour blue even when others cannot perceive it.  They seem to view the world with ‘blue rather than rose-tinted glasses’.  A web designer must be aware of conditions such as these and why you perceive your web design differently than others. Aside from keeping the key aspects of impaired vision and accessibility in mind, a sensitive web designer should also be aware how assistive technology can manipulate his design e.g. screen readers or text / image magnifiers, software employed by the physically disabled to enhance user interface experiences.

Some Internet users are able to read only certain colour combinations, such as, yellow text on a black background, with no room for greyscale.  This means that good legibility for visually challenged and impaired users should have strong contrast as the main element of the design.  Manipulate screenshots of your designs by testing their effectivity using a programme like Adobe Photoshop, converting images to greyscale, then to monochrome, seeing how it might be viewed using the most extreme visual manipulation.  This can be done by increasing the contrast level to +100, a particularly useful approximation of difficulties colour blind users experience in discerning one colour / shade from another. 

Become a successful web designer by adjusting your colour application now, always keeping in mind that a design cannot be considered impressive, if few people appreciate its user friendliness! 

Tomorrow we talk about the psychology behind using certain colours in web design, psychology that off-shore Siterack uses to good avail!