Effective 404 error page design, a way out!

Web Design
No Comments »
Bookmark and Share

404 error page “not found” page is not another way to say “server not found”, it is able to connect to the server but just unable to find the requested page.

You don’t want your visitors think it is the dead end, 404 error page needs to be taken into consideration to offer a more comfortable user experience, so you need to provide a way out.

A custom 404 page actually tells your visitors that you are not ignoring their request, but you are directing them what is next. Here is a list of things you can improve your 404 error page:

  1. Help people go back by placing a “go back” link
  2. Inform about the problem
  3. Enable a life-saving link to continue visitors’ browsing from that point.
  4. Place “previous visited page” tracker
  5. Make an additional page, personalise your page
Effective 404 error page design

Effective 404 error page design

Touchscreen Web Design Explorations – Three

Web Design
No Comments »
Bookmark and Share

Users normally use their mobile to read, search, download and communicate at odd times. There are things need to be taken into consideration in the early stage of design.

In what state do users operate (understand the core needs and use pattern of users)

How to display message in a way that easily attracts users’ interest (screening suitable layout for mobile display)?

Why do users choose mobile to browser websites (analyze differences between web application and client application positioning)?

Mobile terminal user intended usage, operation behavior and potential difficulties are far more complicated than client side sitting next to a desk.  Quoting a graphical report released by Harris on study of mobile usage pattern, we can know more interesting mobile internet user behavior.

iPhone applications have three classifications: Efficient type application, utility type application and immersion type application (for detail, see iPhone HIG). Different product positioning will produce different design strategy, which may affect user interactivity.

Less is more design principle

Mobile application should follow less is more design principle, easy to interact, clear reminder or feedback, less demand but precise action.

Clearly define Application Definition Statement for mobile usage scenario, help user concentrate in obtaining information and finish current task.

For page design, you can try to summarize the core functions using simple sentences. If you find it hard to summarize in a simple and precise way, that may increase user understanding cost and memory burden.

Touchable interface requirement should consider links and widget size. Take iPhone 3GS as an example, a suitable size for finger is 44x44pix; according to variation of gesture weight, iPhone widget responding area should be between 22x22pix to 55x55pix.

Transplant among different resolutions and ratios

Other, Website Development
Bookmark and Share

Issue with resolution is an eternal topic for handsets. Designers cannot avoid the resolution difference on various model screens and aspect ratio display compatibility.

iPhone 3GS and iPad screen has similar density resolution (163 ppi and 132 ppi), so basic adaptability issue can be solved by tiling interface background.



If directly copy iPhone 3GS photo to iPhone 4 Iris screen, the physical size of interface element will be reduced to ¼ of the origin, so both the image quality and the ease of operation reduce as a result.



Nowadays, In order to implement interface physical size resolution independence, we use pre-rendered method. Client side product needs to define interface independently according to various models; website product needs to differentiate versions, through recognize user agent to point to different URLs.

To ensure a higher flexibility and lower budget redraw, it is recommended to use vector path tool in <a href=”http://www.verecom.com.au/”>Photoshop for visual design</a>. For more detail, please refer to article ‘<a href=”http://www.verecom.com.au/”>Designing for iPhone 4</a> Retina Display: Techniques and Workflow’.

Touchscreen Web Design Explorations – One

Web Design
No Comments »
Bookmark and Share

High-end design spirit

What is the sort of high-end experience that brings pleasure? iPhone is an excellent representative of the mobile phone industry, but I prefer to consider it as an “art”. Its design elegance can be seen throughout every curves and material, as well as the design of the apps. Likewise high-end experience designer must treat it as a piece of art from the beginning to the end.

Balance between platforms

Touchscreen designs are mostly seen on iPhone and Android platform, (Symbian v5 is still restrained by keyboard, therefore is not counted as design target). Adaptation of different platforms needs to have balance between different software and hardware, in order to improve the interactive experience and system operation habit.

For example, iPhone only has home button (navigation is done through interface) no menu style, single page for single task. Android interface remain the back, menu, home and search functions.

If a more sophisticated design want to be achieved on Touchscreen, comparing Android-chrom and iPhone-safari, Android version is more complex, to ensure the unity of design, it often comprise the lower version, which makes it less attractive than Apple.

To pursue a higher level experience, you need to pass UA (user agent) in order to match different platform.

How to make key feature outstanding – part 1

1 Comment »
Bookmark and Share

Online marketing is about creativity, how to interact with your target group, how to promote new product, how to improve user experience, and how to inform users to try their product.

If this website only uses boring colours and shapes, surely it results no user to the website. How to promote a new product or highlight key elements or value? You’ve got to

  1. Draw their attention to the point (point G)
  2. Desire to hit the link (content)

Visual perspective (make your point stand out)

1. eye catching colour

Make the focal point differ than other parts in terms of colour.

2. different shape

A different shape will also draw attention from users

Logo and website optimisation – part 2

No Comments »
Bookmark and Share

4. Define logo alt text: to improve the usability and compatibility of the page

It worth mention that this also relates to SEO.

5. Define logo size: enhance efficiency of the browser.

Some people argued that it is not convenient for content maintenance. Perhaps it can be fixed by defining size in CSS.

6. Close all img tags for logo

We should not forget the standard of building a website, for those who are not familiar with W3C, here are two specs.

HTML 4.01 Specification
CSS 2.1 Specification

7. Compress logo with Gzip? Forget about it!

For logos that would stay for long time, we can set a longer cache to reduce requests to server. It is useless to compress with Gzip on server side, but different case for css/js/html documents, and it is compulsory if server pressure allows. (most css/js/xml document sizes can be compressed up to 70-80%)

Logo and website optimization – part 1

SEO, Web Design
No Comments »
Bookmark and Share

You must have come across some slow loaded websites. They make you leave earlier before the whole page content loads. This week I want to start from <a href=”http://www.verecom.com.au”>optimizing logo image</a>, to ensure essential elements such as logo is loaded in no time. Below is a list I will be discussing in the following weeks:

  • pre-load logo image: logo image and background should be the first elements displayed on the website, avoid empty space and without background;
  • combine logo into background: to reduce page requirements;
  • optimize compressed logo: keep the file size to the minimum;
  • define alt text for logo image: increase page usability and compatibility;
  • define logo size: to improve browser rendering efficiency;
  • turn off logo tag: to improve browser rendering efficiency.

Pre-load logo

Before anything else, load necessary images first: in this way, logo can be displayed first on the page (unless you do not want it to show first). Google homepage uses this method to combine logo and background, do a right click on the logo, you can only view background image, but not logo as a separate image. On the search page, the original image around logo should look like this:

Images around logo

Images around logo

Optimize compressed logo

  1. png8 is the first choice
  2. fireworks does a better job in compress image than photoshop
  3. at last, compress with dedicated compressing tool (e.g. PngOptimizer)
  4. if you do not have this tool, install firebug onto firefox, then install page speed, as a performance analyzer, and directly save compressed image.
  5. too complicated? Go for online compressing tool then http://www.smushit.com/ysmush.it/.

What determines the quality of a website – Part 2

Web Design
No Comments »
Bookmark and Share

From the user point of view

Information design
For an interactive designer, whom needs to collect information on website content, positioning, target audience, and also a closed collaboration with the content provider in order to produce a appropriate solution with matching visual representation.

A former procedure to produce a solution is: Useful -> Ease of use -> Want to use

However most of users do not have the knowledge of graphic design and usability design, so their judgment on a website is heavily relying on the first impression, which therefore brings the visual design as a prerequisite, therefore visual design should not be overlooked.

Visual design
Visual design consists of use of colour scheme, texture, text and image and attention to visual detail. Successful visual design can create a powerful first impression to the user, but if colour scheme is over colourful, and too many textures applied on buttons, may leave user an impression that the website is not professionally designed and not reliable, as a result, they will not come back again.
Ultimately a website is to deliver an overall impression, and visual plays a heavy role.

Other factors
Stability is another consideration for the quality of a website. 404 error page should not appear on the website, and all functions should be tested before launching.

Edited By Dan Li

What determines the quality of a website – Part 1

Web Design
Bookmark and Share

Visual design is not my profession and strength, but recently because of work, I kept thinking about this topic. So I might as well explore the factors that determines the quality of a website, hoping to give some feasible design guideline.

What is so important about quality?

Quality can improve credibility and reliability of a website, which then gives your users a good first impression, initial trust.

Ordinary users do not understand user experience, nor colour dimensions, even the quality are not their concern, but they evaluate a website through the first impression.

1. What does this website do?

2. Is this website credible?

3. Is this website professional?

It only takes a few seconds to leave the first impression to the users: is this website worth trying?

Within the few seconds, users certainly not have the time to read the long-winded “about us” article, nor do they bother to experience the interaction process through searching, shopping and registration.

So what affect user decision within seconds?

1. Branding and reputation – you may not find the visual attractive, but if you have enough reputation, e.g. “as seen on TV”, that may help to stay longer.

2. Channels – user may enter a particular website through other sites they know well, for example links in eBay or partnership sites, though the website itself lack of reputation, but through its friend sites, it could affect user decision.

3. Content, also the base – a few seconds, user can skim through and get the idea of what this website does and if it fits what they need. Headlines, bold letters, pictures and price, all are helpful for user to make judgement.

Now in some companies, content and brand strategists are recruited to plan columns and contents.

Edited By Dan Li

Think twice on what your users say

E-Business Development, SEO
No Comments »
Bookmark and Share

Do not just listen to your users’ words, because users get used to describe what they expect as a particular feature, which misleads you as though that is exactly what they need the most. Also, users have great imagination, sometimes lack of logic, if you are not careful, your product can be ruined because of these few users’ requests.

Users are limited by reality, they tend to find a simple linear solution in real life, and refuse to think innovatively. For instance, if cell phone battery life is short, users only can think of maximizing the capacity, but not through other ways of supplying more battery, such as through walking, or cycling to give more energy.

No matter in what situation, you should first listen to your users’ opinion, then carefully analyse, and find out what they really expect.

Add more value but less interruption to your users

Apps store has a most useless application ever on a highest price, it is called “I’m Rich”, it can do nothing except showing a photo of a precious stone, sells at 999 USD. After 8 boring people bought the app, it was taken down from the Apple’s official website.

My point is not to fool your user, but to sincerely produce something that adds visible value to the users. Otherwise, no matter how great your product is, it may end up in the rubbish bin following Google Wave.

The common way to measure this value is saving time. Cloud solution, mobile solution are increasingly popular among users. Of course they can find alternative method in accomplishing their goals, but…just slower. So less interruptions in using the product saves more time for the users.

Edited By Dan Li

Web Design Sydney by Verecom   Australian Business Directory by VereDirectory   Free Business Directory by FreeDirectory
Log in