WE HAVE MOVED
Monday, January 3, 2011
Wednesday, November 24, 2010
HOMEPAGE-THE FIRST IMPRESSION
Ever heard the saying that "You never get a second chance to make a first impression"? Well, that is also true with websites. Despite the improvement and accuracy of search engines, the homepage is the 1st interaction the visitor has with the site, and is the only opportunity to create a good or bad first impression. From experience, the homepage accounts for the largest percentage of abandonment, between 40 and 60%. A poor home page can destroy any chance of achieving your website objectives within a few seconds. A good home page is the blueprint for every successful website. This makes the homepage the most important focus points since it performs numerous functions and caters to multiple stakeholders or audience.
First, the user makes a quick judgment about the site based on the overall appearance. Next, they decide whether they are in the right place by checking out what the site has to offer. Finally, they look around for what brought them to the site. Below are some important guidelines to consider when designing the homepage.
To create an effective homepage, emphasize what your site offers that's of value to users, this should Include a tag line that explicitly summarizes what the site or company has to offer. In addition, include a short site description in the window title. This will help direct search engine traffic and help keep the users onsite, assuming the title and tags have the necessary keywords.
Use color to distinguish visited and unvisited links, this should actually apply to the entire page, it reduces user frustration.
The page title should realistically target keywords; one key factor in search engine ranking is how closely the title of a page matches the user's search terms. This will ensure you get the right traffic, hence reduce the bounce rate.
Avoid clutter. Include only essentials that are critical or useful to your visitor's experience and your branding efforts. Having said that, void distraction and don't bog your homepage down with too much graphic. Designers have a tendency of focusing on their design prowess while ignoring usability.
Don’t violate design conventions, consistency is one of the most powerful usability principles. Don’t make the user think; when things are always the same the users don't think about where to find what they are looking for, instead, they know exactly where to go. Saves time and makes them happy.
The last and most important guideline, the users are highly goal-driven on the Web. They visit sites because there's something they want to accomplish, the ultimate failure of a website is to fail to provide the information users are looking for.
First, the user makes a quick judgment about the site based on the overall appearance. Next, they decide whether they are in the right place by checking out what the site has to offer. Finally, they look around for what brought them to the site. Below are some important guidelines to consider when designing the homepage.
To create an effective homepage, emphasize what your site offers that's of value to users, this should Include a tag line that explicitly summarizes what the site or company has to offer. In addition, include a short site description in the window title. This will help direct search engine traffic and help keep the users onsite, assuming the title and tags have the necessary keywords.
Use color to distinguish visited and unvisited links, this should actually apply to the entire page, it reduces user frustration.
The page title should realistically target keywords; one key factor in search engine ranking is how closely the title of a page matches the user's search terms. This will ensure you get the right traffic, hence reduce the bounce rate.
Avoid clutter. Include only essentials that are critical or useful to your visitor's experience and your branding efforts. Having said that, void distraction and don't bog your homepage down with too much graphic. Designers have a tendency of focusing on their design prowess while ignoring usability.
Don’t violate design conventions, consistency is one of the most powerful usability principles. Don’t make the user think; when things are always the same the users don't think about where to find what they are looking for, instead, they know exactly where to go. Saves time and makes them happy.
The last and most important guideline, the users are highly goal-driven on the Web. They visit sites because there's something they want to accomplish, the ultimate failure of a website is to fail to provide the information users are looking for.
Wednesday, November 10, 2010
HTML5 FORM FEATURES
I was inspired by last Week’s guest speaker, J Cornelius. The historical development of browsers, from Netscape, to Firefox up until IE7 got me interested. I was also very intrigued by HTML5/CSS3 features. The drag and drop feature is simply amazing. Before HTML5 this could only be done using third-party browser plug-ins such as Adobe Flash. In this Blog I will cover some of the cool HTML5 form features.
Placeholder
Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting content on the World Wide Web. The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty and not focused. The HTML5 placeholder attribute works exactly as the value attribute, except that when the user click on the text field, the placeholder text automatically disappears and the user can easily enter the required information. Browsers that don’t support the placeholder attribute will simply ignore it, without causing any harm. Here is an example of how to include a placeholder in a form
input name="firstname" placeholder="Please enter your first name"
Autofocus
The next cool html5 feature is Autofocus, if applied; the element will automatically receive the focus once the page is rendered. As soon as the page loads, it moves the input focus to a particular input field. This can be seen on some sites and most search engines. Browsers that don’t support the autofocus attribute will simply ignore it, and the user will have to manually move the cursor to the field. Here is an example on how to use autofocus input name="search"
Web sites can also use JavaScript to focus the first input field of a web form automatically. For example, the Google homepage will autofocus the input box so you can type your search keywords.
Email Address
Before HTML5, Millions of websites used forms to ask for email addresses, and they all used text input to capture this information. But HTML5 came up with a new type for the input element, named email. input type="email" name="email"
URL Field
Just like the email element, web addresses are frequently asked for. HTML5 introduces a new type for the input element, url, designed specifically for entering web addresses. This line could looks like this input type="url" name="url"
Date Pickers
Many companies use websites to book appointments or dates, most of these websites used JavaScript for this function. Thankfully, we don’t have to do that anymore, HTML5 defines a way to include a native date picker control without having to use JavaScript. The date element could looks like this input type="date" name="day"
Search Boxes
To enhance ease of retrieving information, many websites have implemented their own search engine. HTML5 has created a new element type for search fields, and a sample of the code could look like this input type="”search”" input type="”submit”"
Pattern Atribute
HTML5 comes with the pattern atribute, which lets you define how a user should enter the required information. The form will only accept an entry that matches the specified pattern. A good example is the telephone number or a zipcode field that only takes 5 numbers.
input name="Phone" placeholder="Phone" pattern="^0[1-689] [0-9] {8} $"
The cool thing about HTML5 is that in situations where the user is using a browser that does not support the above form element, the fields will be rendered as text, and the user will still be able to type in the details without any problem. So there is no need to panic.
Placeholder
Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting content on the World Wide Web. The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty and not focused. The HTML5 placeholder attribute works exactly as the value attribute, except that when the user click on the text field, the placeholder text automatically disappears and the user can easily enter the required information. Browsers that don’t support the placeholder attribute will simply ignore it, without causing any harm. Here is an example of how to include a placeholder in a form
input name="firstname" placeholder="Please enter your first name"
Autofocus
The next cool html5 feature is Autofocus, if applied; the element will automatically receive the focus once the page is rendered. As soon as the page loads, it moves the input focus to a particular input field. This can be seen on some sites and most search engines. Browsers that don’t support the autofocus attribute will simply ignore it, and the user will have to manually move the cursor to the field. Here is an example on how to use autofocus input name="search"
Web sites can also use JavaScript to focus the first input field of a web form automatically. For example, the Google homepage will autofocus the input box so you can type your search keywords.
Email Address
Before HTML5, Millions of websites used forms to ask for email addresses, and they all used text input to capture this information. But HTML5 came up with a new type for the input element, named email. input type="email" name="email"
URL Field
Just like the email element, web addresses are frequently asked for. HTML5 introduces a new type for the input element, url, designed specifically for entering web addresses. This line could looks like this input type="url" name="url"
Date Pickers
Many companies use websites to book appointments or dates, most of these websites used JavaScript for this function. Thankfully, we don’t have to do that anymore, HTML5 defines a way to include a native date picker control without having to use JavaScript. The date element could looks like this input type="date" name="day"
Search Boxes
To enhance ease of retrieving information, many websites have implemented their own search engine. HTML5 has created a new element type for search fields, and a sample of the code could look like this input type="”search”" input type="”submit”"
Pattern Atribute
HTML5 comes with the pattern atribute, which lets you define how a user should enter the required information. The form will only accept an entry that matches the specified pattern. A good example is the telephone number or a zipcode field that only takes 5 numbers.
input name="Phone" placeholder="Phone" pattern="^0[1-689] [0-9] {8} $"
The cool thing about HTML5 is that in situations where the user is using a browser that does not support the above form element, the fields will be rendered as text, and the user will still be able to type in the details without any problem. So there is no need to panic.
Thursday, November 4, 2010
Podcast: Luke Wroblewski and Innovations in Web Input
Jared had a chance to speak with Luke about some of the latest trends in web input. Jared led off the discussion, talking about Google’s latest public innovations, Google Instant. Google Instant is a new search enhancement tool that shows results as you type. It's a much faster service.
They also chat about innovations in web input, where your users can instantly have their content on your site without entering it again and again. You can make use of work done by others, by using or getting input from other sites, For the first time it is possible to get rid of entry forms. Input can come from anywhere, we can get user information from already existing resources, for example, to sign up, you don't have to enter all the information and upload a picture, you can link it to your email, facebook or web extensions to get the same information.
Lastly, Luke discussed Apple's Ping, it's social networking site for music, according to him, ping is the worst product they have come up with. They ignored market insight, to sign up, ping asks you to upload a picture, which has to be approved by google. To make matters worse, the name you use on ping has to match the names on the credit card you use on the itunes site. To share music on ping, you have to go to itunes, you cannot share music from your collection of music you purchased through itunes. He calls it a social networking site for itunes.
They also chat about innovations in web input, where your users can instantly have their content on your site without entering it again and again. You can make use of work done by others, by using or getting input from other sites, For the first time it is possible to get rid of entry forms. Input can come from anywhere, we can get user information from already existing resources, for example, to sign up, you don't have to enter all the information and upload a picture, you can link it to your email, facebook or web extensions to get the same information.
Lastly, Luke discussed Apple's Ping, it's social networking site for music, according to him, ping is the worst product they have come up with. They ignored market insight, to sign up, ping asks you to upload a picture, which has to be approved by google. To make matters worse, the name you use on ping has to match the names on the credit card you use on the itunes site. To share music on ping, you have to go to itunes, you cannot share music from your collection of music you purchased through itunes. He calls it a social networking site for itunes.
WEB USABILITY
Most people will notice the similarity between this blog and the previous one, it almost sounds like Web Accessibility part 2. As most of you, i found it hard to differentiate the difference between web usability and accessibility, as most topics overlap. Unlike web accessibility which is mainly about making websites accessible with a focus on disabled users, web usability is about making your website usable to all, in such a way that your site users can find what they're looking for quickly and efficiently.
Usability on the Web is important in achieving the Website goal. For a business usability is crucial if you want to have customers continue to return and to get sales and make money. If your customers can't find what they want, they won't be buying, and chances are, they won't be coming back.
According to Jakob Nielsen, Usability can be improved
"Usability is like cooking: everybody needs the results, anybody can do it reasonably well with a bit of training, and yet it takes a master to produce a gourmet outcome" ¹
What can you do?
Focus on your content. Content will get people to your site and give them the information so they keep coming back. If you've created a usable website, The content should be relevant and easy to find, you should see what your customer is looking for.
Don't make the user think,the user should be able to see what they are looking for. Your site visitors will not study each menu item carefully before making a considered choice as to which link to select. They might glance down the site menu but, more likely, they’ll just hit the first link that looks about right. Why reinvent the wheel? Use the most common tittles, names and conventions that the users are familiar with.
Test your site's usability with your users.Who are your users? What are their tasks and online environment? Test early in design using prototypes. Don't wait until the end when it's too late to change the design. If you do nothing else to improve your site, this would be the best thing.
Architecture – it's 80% of usability, Build an efficient navigational structure. Put lots of links on your site so that your readers can navigate as easily as possible. This will give your readers a lot of different ways to get to the information on your site.
Users are impatient. Design for a 2-10 second maximum download. After 10 seconds, your customer has lost interest in your page, and might close the page, no matter how interested they were in the topic. You don't want to lose the user but you also can't control all aspects of the download. One way of avoiding this is controlling the weight of the page.
¹Jakob Nielsen's Alertbox, http://www.useit.com/alertbox/anybody-usability.html
Usability on the Web is important in achieving the Website goal. For a business usability is crucial if you want to have customers continue to return and to get sales and make money. If your customers can't find what they want, they won't be buying, and chances are, they won't be coming back.
According to Jakob Nielsen, Usability can be improved
"Usability is like cooking: everybody needs the results, anybody can do it reasonably well with a bit of training, and yet it takes a master to produce a gourmet outcome" ¹
What can you do?
Focus on your content. Content will get people to your site and give them the information so they keep coming back. If you've created a usable website, The content should be relevant and easy to find, you should see what your customer is looking for.
Don't make the user think,the user should be able to see what they are looking for. Your site visitors will not study each menu item carefully before making a considered choice as to which link to select. They might glance down the site menu but, more likely, they’ll just hit the first link that looks about right. Why reinvent the wheel? Use the most common tittles, names and conventions that the users are familiar with.
Test your site's usability with your users.Who are your users? What are their tasks and online environment? Test early in design using prototypes. Don't wait until the end when it's too late to change the design. If you do nothing else to improve your site, this would be the best thing.
Architecture – it's 80% of usability, Build an efficient navigational structure. Put lots of links on your site so that your readers can navigate as easily as possible. This will give your readers a lot of different ways to get to the information on your site.
Users are impatient. Design for a 2-10 second maximum download. After 10 seconds, your customer has lost interest in your page, and might close the page, no matter how interested they were in the topic. You don't want to lose the user but you also can't control all aspects of the download. One way of avoiding this is controlling the weight of the page.
¹Jakob Nielsen's Alertbox, http://www.useit.com/alertbox/anybody-usability.html
Thursday, October 21, 2010
Accessibility and Web Standards
Web accessibility is access to the Web by everyone, regardless of disability; it refers to the practice of making websites usable by people of all abilities and disabilities. To make this happen, it is important for websites to be based on standards and guidelines. As a result, this makes it necessary for the people involved in building and maintaining these sites to be able to build accessible websites. When sites are correctly designed, developed and edited, barriers to information are eliminated and all users can have equal access to information and functionality.
Apart from designing websites accessible to people with various disability, one other way of increasing accessibility is designing websites that work with all browsers and devices. Since we cannot dictate the browser or device the user will be using, designers need to create websites that render well across all browsers, this can be achieved by adhering to the W3C (World Wide Web Consortium) set of international standards for the web. Using valid, semantic, and well-structured markup combined with accessibility best practices makes for a better experience for many more users.
This will make the site accessible to
• other browsers or operating system
• users that have CSS disabled or do not support it
• user agents that do not support JavaScript
• mobile and handheld devices
• accessibly marked up forms enhance usability for everybody
• users will be able to increase font size without making text unreadable
Accessibility is building one site that works for everybody, disabled or not, and whatever user agent or operating system they prefer. Designing with web standards ensures equality and access to information and resources, users will not be frustrated or abandon a website because some links or tabs to not work.
Apart from designing websites accessible to people with various disability, one other way of increasing accessibility is designing websites that work with all browsers and devices. Since we cannot dictate the browser or device the user will be using, designers need to create websites that render well across all browsers, this can be achieved by adhering to the W3C (World Wide Web Consortium) set of international standards for the web. Using valid, semantic, and well-structured markup combined with accessibility best practices makes for a better experience for many more users.
This will make the site accessible to
• other browsers or operating system
• users that have CSS disabled or do not support it
• user agents that do not support JavaScript
• mobile and handheld devices
• accessibly marked up forms enhance usability for everybody
• users will be able to increase font size without making text unreadable
Accessibility is building one site that works for everybody, disabled or not, and whatever user agent or operating system they prefer. Designing with web standards ensures equality and access to information and resources, users will not be frustrated or abandon a website because some links or tabs to not work.
Wednesday, September 29, 2010
WEB TYPOGRAPHY
Typography is the art of designing letters, words, paragraphs, and how they interact with each other, and Web typography refers to the use of fonts, letters and paragraph on the Web. Typography is the main attribute of web design, with some designers believing Typography is 90% of web design. When most people visit websites, the odds are that they immediately look at the text. Visitors typically rely on text to accomplish whatever they’re visiting the site for. That alone should make typography, the art of arranging text, a major priority for any web designer. Bellow are same basic web typography rules
Legibility
One of the principles of durable typography is legibility, to achieve this web designers need to use the right font size. Don’t set body text below 10 or 12PX, and if possible make it bigger. Setting type to big makes it easier for visitors to read the content.
Make good use of Space
Don’t be afraid to leave blank spaces in your pages. Negative or white space will help focus attention on the text. A reader should never have to plow through a forest of buttons and fancy graphics to get simple information
Make Use of Sans-Serif
Always use sans-serif fonts for type on-screen. And remember Arial, Verdana, and Georgia are the only safe fonts for the web. Serifed fonts have a higher chance of displaying poorly, becoming blurry or even pixelated. Avoid fancy type and never use italic type on the web.
Create Contrast
Always use dark text on a light background or vice versa. For example, pale pink text on a pale blue background doesn’t read well. Text exists to be read, make sure that it contrasts enough with the background to achieve that
Always use web safe colors.
Don’t relying on color to achieve legibility, and remember that websites can appear very different on different monitors and browsers, hence the need to make use of safe colors.
Make use of CSS
CSS provide easy consistency between your typography across the entirety of a website. With solid CSS, formatting becomes easy and you can move between pages of your website seamlessly
Web Typography is easily overlooked or not being taken into consideration when designing the site. Spending time on the text can transform the design elements that support the rest of the design and help create a site that is appealing and functional.
Legibility
One of the principles of durable typography is legibility, to achieve this web designers need to use the right font size. Don’t set body text below 10 or 12PX, and if possible make it bigger. Setting type to big makes it easier for visitors to read the content.
Make good use of Space
Don’t be afraid to leave blank spaces in your pages. Negative or white space will help focus attention on the text. A reader should never have to plow through a forest of buttons and fancy graphics to get simple information
Make Use of Sans-Serif
Always use sans-serif fonts for type on-screen. And remember Arial, Verdana, and Georgia are the only safe fonts for the web. Serifed fonts have a higher chance of displaying poorly, becoming blurry or even pixelated. Avoid fancy type and never use italic type on the web.
Create Contrast
Always use dark text on a light background or vice versa. For example, pale pink text on a pale blue background doesn’t read well. Text exists to be read, make sure that it contrasts enough with the background to achieve that
Always use web safe colors.
Don’t relying on color to achieve legibility, and remember that websites can appear very different on different monitors and browsers, hence the need to make use of safe colors.
Make use of CSS
CSS provide easy consistency between your typography across the entirety of a website. With solid CSS, formatting becomes easy and you can move between pages of your website seamlessly
Web Typography is easily overlooked or not being taken into consideration when designing the site. Spending time on the text can transform the design elements that support the rest of the design and help create a site that is appealing and functional.
Subscribe to:
Posts (Atom)