I have a website with a terrible User Interface, from graphics design to user experience. I doubt anyone coming to the site would want to come back again [but they do!] unless they really really need it .
I just decided to give the site a face-lift, and I considered hiring a professional to re-design the interface. Being the terrible perfectionist I am, I doubted a local designer would understand the elements of user experience or consider balancing a killer design with a performance tuned website. Knowing myself, I called up some friends to get some good resources on UI Design and User Experience Best Practices.
Spending few days, reading, summarizing and processing these resources, i started working on a concept for my Website UI upgrade, i came up with something, which i know is far from perfect. However i know it's 1000% better than the old design, and I learned a lot about User Interface Design and User Experience which i wanted to share with the community.
The Site
- Site URL is http://www.tadwina.com
- The site is a Regional Blog Aggregator, focusing on blogs in the middle east, with 20K-100K daily views.
- The Main Site's users speak the arabic language, are less than 25 years old.
- The site's rank is 597 in Egypt according to Alexa.
The Challenges
- There are no references to similar websites in the region. International aggregators [Technorati, BlogHer, Networked Blogs] are built around differnt concepts.
- On the Website, there are thousands of blogs, half a million posts, 10 different and distinct ways to slice the data, with unlimited combinations. All these compete to show on the home page.
TIP 1: Blocking Out Homepage Components Using Microsoft One Note, which is an amazing tool for organizing your thoughts, i started blocking out the Homepage :-
we have the following Components:-
- Posts, Blogs, Bloggers.
and the following Filters on these components:
- Countries, Cities, Language, Gender, Categories, Sections and Tags.
and the following views of these components:-
- Latest, Features, Top Views, Last 24 hours, Favorites, Real Time , Editorial Picks.
and on the home page we would also need:-
- Ads, Logo, Seach, Navigation System, Social Aspect, About the site
 |
| Blocking out the Homepage |
TIP 2: Use a Grid System.
A grid system is a guideline for graphic designers to layout their compositions in an organized way, it is a concept that applies to all sorts of art, and existed hundreds of years before the web era.
I used the 960 Grid System [http://960.gs] as you can see in the image above, as you can see it gives you a visual guide to block your components vertically. 960 refers to the widest browser area in a 1024 wide screen, which is now considered as the standard where more and more users are upgrading from the 800*600 resolution.
This presentation is an excellent resource on using 960 grid system for web design.
http://www.slideshare.net/huer1278ft/grids-are-good-right
 |
| Figure 1 - Initial Design |
TIP 3: The Golden Ratio(φ)
This Magic Number is always linked to proportional beauty and is used in web design by dividing the page into proportionally pleasing areas, it can be approximated to the rule of third, where you always try to break your designs by thirds to make them visually appealing, or use the percentage of 28.27% [61.73%] to be more compliant with the phi value of 1.62.
I used that to break the homepage vertically, but I didn't try that horizontally to be honest
The Fold is a terminology used in newspapers, and above the fold means all the content that you can read when the newspaper is folded. Same concept applies to Web Design, where above the fold means all the content you can see before you scroll the page. if you look at figure 2 below, i put a double line horizontally to indicate the fold, the first one at 550 pixels, and the other at 600 pixels, considering a screen resolution of 1024*768 [assuming the screen has the browser header and the Windows toolbar which eat another 150 pixels]
You can see that the fold is right at the end of the Feature Area, so it guarantees that at least one section of the site appears to the user without being cut down.
 |
| Figure 2 |
This might sound very obvious, but it's very important. a site needs the following:-
- - Site ID - Usually a logo and a catch line summarizing what the site does. in our case, that's the logo at the top right [it's an arabic site if you haven't figured that out already], and a catch line saying 'home of the arabic blogs'
- - Primary Navigation - Menus or tabs in a constant accessible location across all pages.
I used Tabs for primary navigation, and put that at the top of the page right below the logo. i had 2 main groups [Blogs, Posts and Bloggers] and [Images, Videos], everything else is secondary. - - Secondary Navigation - in my case i had first to realize how to break the primary groups of my site in a way that appeals to the users and allow them to find what they want by browsing the menu. I figured that i had to dissolve all boundaries that relate to countries, gender, language, and simply use user's interest into different categories [art, technology, politics, etc...] to break each of the main site's components [blogs,posts and bloggers]. Major sites like Technorati do this.
The users will still find ways to navigate through countries, gender and language, but in a different way. - - Navigation to Utilities - Services, Site Info and User, these are utilities that are common to sites regardless of their domain, and are neded in the main navigation.
- - You Are Here indicator - using Highlighted Tabs, and arrow/color indicators you can indicate where you are on the site. Breadcrumbs are an excellent way to indicate where you are, but i still didn't figure out where to put that [yet]
- - Page Name - Every page needs a name, maybe the homepage only doesn't, because it's obviously doesn't, i never saw a page with the title homepage inside the page body.
- - A way to Search - Not everyone likes to browse, some people are link Dominant, some people are search Dominant, and a search box is very important to any website, ours is at the top left area - as simple as a search box and a search button, i could add search categories [blogs, posts, bloggers], but for now i am trying to just simplify it, why make the user think? the search engine should be smart enough.
- - a Way Home - this is a reset button, i want to go back to where i started. a linkable logo, a home icon are the traditional conventional; you can even have both!
 |
| Navigation Conventions |
Tip 6: Color Theory to the rescue
I am terrible with colors, i am an engineer i am not an artist ! well, the keyword to that is - color theory. and again, as Golden Ration proved to be a mathematical answer to Proportional beauty, along came the color theory, a whole science that describes the theory beyond the harmony and relation of colors.
You can find tons of online tools to create your own color palette, but of all, i liked the Adobe Kuler tool.
http://kuler.adobe.com/
For my website, i picked Orange and Blue, and started creating my own palette, Orange is a color of vitality, energy, and it works best with so many other colors, while blue is a color of elegance and its a standard for the web [Facebook!]
If you wish to better understand Color Theory, i recommend this article [3 parts].
This is a series of articles by the amazing Cameron Chapman
Color Theory for Designers
 |
| Adobe Kuler for Color Palette Creation |
Tip 7: Design pages for Scanning, not Reading.
As indicated by Steve Krug in his famous book "Don't Make Me Think", people don't read pages, they scan them. And based on this concept, he defined 5 points to a successful design for scanning, not reading:-
- Create a clear visual Hierarchy
- Take Advantage of conventions
- Break Pages into clearly defined areas
- Make it Obvious what's clickable.
- Minimize Noise
I made the following to apply this principle:-
- Depend on Spaces and Grouping to create a visual Hierachy, the Feature Area for instance is separated from top navigation, from the area below it and next to it. at the same time, the Feature Components are closely attached as one group. same for the listing of latest posts below the feature area. They are narrowly spaced.
- Scan the small image below, and even without knowing the language or even seeing the small font, there are certain areas you will scan and stop at, namely: the feature area at the top, the big orange titles of each post, and the left section numbered 1 to 5 [in arabic] with a clear blue background, for the top blogs. If you do so, then i succeeded at making you stop and look at the feature, the post titles and the top 5 blogs by scanning the page.
- I want the users to click on the Read More link of every post, to do that, i put it in big orange color, put a background color behind it to define its scale, and highlight it with an orange arrow, i tried to make it inviting yet not distracting.
- The design has 2 main colors, blue and orange, complemented by a filler color, gray. while i have green in my palette, but i eliminated it from early iterations to keep away any noise.
- users love tabs, they understand what they mean naturally, i use that convention heavily in the main navigation, in the latest posts below the feature image, in the feature image itself [numbered 1 to 6] and in the top blogs area. it might be a problem that i am showing the tabs visually differently in each one of these, i certainly need an expert opinion about that...
 |
| Full Design |
Fitts' Law , proposed in 1954, suggests that the time required to rapidly move to a target area is a function of the distance to and the size of the target. Yes, i know you are asking for an example, here is one. you have a large page and at the bottom of it there is a paging area with the numbers 1 to 10, using a very small font. You can imagine the torture required to move your mouse quickly to the bottom of the page then start pointing it accurately to click a certain page number without hitting the numbers next to it. ha?
And the answer is simple, make the clicking area bigger or smaller [proportional to where the mouse was before that action], users do not have patience, and the 10 other competing websites are only a click away.
 |
| Fitts Law |
TIP 9 : Color Coding
Color Coding makes a visual contract with the reader, you sign a contract with the reader that whenever he sees that colors it means something, before reading what's inside.
I am using color coding here for the Blog Categories, where each category is assigned a different color. currently using this on the home page for each post area, by adding a color coded post category right below the post image. the pointy rectangle is also becoming a standard in web 2.0 websites.
 |
| Color Coding |
I still didn't give the footer enough time in my design, so i believe i can still make it better. Being at the end of the page doesn't make it less important than the header and here is why:-
 |
| Footer |
- Search Engines process the footer and do not ignore it, so whatever relevant information you put in there is picked up by the search engines.
- It is a great place you could put information about your site's mission and purpose, a small sitemap, your copyrights, privacy and valuable other information.
- some users scroll down to the footer, believe it or not, and if you don't have any attractive links over there, they are going to leave the site. you could put links to popular pages, random pages, search box, or even a link to the top of the page for those lazy readers :)
- You will be surprised some readers even start reading a page from the bottom up, similar to newspaper readers who prefer to read the newspaper from the end to the beginning, strange but true
TIP 11: Design for Search Engine Optimization
SEO would require a complete article to talk about it, but here are quick tips to maintain SEO in your design:
- Use Relevant Text in the correct areas. Use a text driven navigation menu [Javascript rather than flash] to ensure the search engine will process all important words. in our case here, the first navigation level has the words [blogs, post, bloggers, images, videos]. The second level has all categories [politics, sports, technology, art, stories, etc...]
- Use Large Text to make important phrases stand out, such as post titles, feature titles, and guess what, TAGS. doing that will tell the search engines that these are more important than others.
- Use your keywords on your homepage to tell search engines that these are important. my target keywords are used alot [without spamming of course] in the navigation menu, titles of different areas and links to other pages. i also use my keywords in the side area that gets replicated for all the site's pages, this has a huge weight when your site has hundreds of thousands of pages.
- Make your navigation hierarchy URL friendly, search engines love URL Friendly websites.
- Check all Links on your home page, make sure that link text is relevant to the page it is linking to, use keywords for the page it is linking to. for example, don't use a 'Click here' text link to go to the video blog pages. name it 'Video Blogs' Page. this increases the weight of the page a lot.
TIP 12: ADS = Food
if you depend on Advertising for making a living out of your website, then you already know that placing ads on your page is an art and science job, and screwing it up will screw up your business.
Here are some tips for placing Ads to fit in your design:
- Select carefully where you put your ads. putting your ad at the top of the page is number one place for getting the top revenue. if i tell you where else to put your ads, then i would be lying to you! you have to pick all the places that get the most attention. for me this is the top of the page and the left side area. I use google ads reports to experiment different places and settle on the most beneficial ones.
- Do not put too many ads. first of all, putting many ads means more distraction to your readers, they will spend a lot of time figuring out where your content is, and can end up abandoning your site completely.
- Blend your ads in your content. and i don't mean here to cheat your readers thinking that your ads are part of your content, no, there is a thin line here in between. Making an Ad stand out as an Ad will make readers automatically skip it without even looking. Blending an Ad in your site will make your readers look at it, know that it is an AD, then decide what they want to do next.
- Use Relevant Ads to your readers. with Google Adsense you can now ban certain ad categories.
- If you are using Contextual Ads from Google Adsense, place them in proximity of your content. I put an Ad at the top of the page and have my navigation right below it, including all my keywords. I also have another one on top of my tag list.
TIP 13: The Social Network - Trust your friends not your sites
your friends will watch something, you are going to watch it, no matter how good or how terrible. The more people will share links to your site, the better traffic it gets, the keyword here is SHARE.
Share on Facebook, share on Google Buzz, share on Twitter, all with different names: Like, Recommend, Share, Tweet, Buzz, Proxalominate [i wouldn't be surprised if that turned out to be a name]
I am using Facebook Connect to sign in users, they do not need to create another account on the site. they can instantly gain access to personalized information by simply signing in to their Facebook, isn't that nice?
They can also share any post or any blog using this little social widget right below the post.
Tip 14: You May Read the following books as well
The Smashing Book - is a collection of articles on Web Design
Principles of Beautiful Web Design - has a lot of concepts behind design
Don't Make Me Think - full of examples on user experience
Conclusion
I hope the tips above are useful , and if you have any questions, any additional tips, you are most welcome, i appreciate your feedback.
No comments:
Post a Comment