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.

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.

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

Design principle – final

Web Design
No Comments »
Bookmark and Share

Microsoft Windows user experience design principles:

1. Reduce concepts to increase confidence
2. Small things matter, good and bad
3. Be great at “look” and “do”
4. Solve distractions, not discover-ability
5. UX before knobs and questions
6. Personalization, not customization
7. Value the life cycle of the experience
8. Time matters, so build for people on the go

(Source: http://msdn.microsoft.com/en-us/library/dd834141.aspx)

iPhone human interface design principles:
iPhone Design principle
Figure 1 http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html

1. Metaphors

When you design applications, please learn about the existing metaphors in iPhone operation system, and do not redefine these metaphors.

2. Direct Manipulation

With multi-touch interface, iPhone users can enjoy a high level direct control over the operation system. Using gesture to communicate with the object gives user a feeling of control, as they do not need any media in between, such as mouse.

3. See and Point

Users no longer need to remember the steps of an application, because now the design is more intuitive.

4. Feedback

Besides seeing the result of their operation, users also need to have an immediate feedback from their action, especially in an application that takes long time to take effect.

5. User control

Let users initiate action and control behaviour, but not the application. Keep actions simple and direct, so that users can easily understand and remember them. It is best to adapt standard command or familiar user behaviours.

6. Aesthetic Integrity

Users expect a nice interface appearance, promise interests and encourage discoveries. Make sure your interface design elements are delicate in the application, so that they can provide a unify experience.

Edited By Dan Li

Web Design principle part 2

Web Design, Website Development
No Comments »
Bookmark and Share

It is worth noting: the design principle is an aid rather than a base for creative ideas.

It is helpful to use design principles to screen on all sorts of ideas, but if it gets too adhere to these principles, or even just to design around these principles can destroy creativity. Although it seems secure to brainstore design ideas within the framework of the principles. However, if we are confined by that, it is difficult to come up with surprising ideas.

This kind of idea is bound by specific principles. it is easy to gather different inspirations to enrich it.

The main points of design principles:

1. which is built on the basis of design research
2. it is concise
3. it is memorable
4. it runs through the entire design
5. it should be “easy to use”
6. it results from different sets of ideas
7. it is not self-contradictory

Finally, let’s share some examples of design principles once again:

1. quick, eye-catching, the use of pleasure
2. with a simple way input information into the calendar
3. it is more than just a calendar (memo to reminder and other functions)
4. easy to share, you can easily see your entire life schedule

Edited By Dan Li

Web Design principles part 1, an example from google

Web Design
Bookmark and Share

As designers, we accumulate all kinds of good ideas over time, however before we begin a web design project, it is often a dilemma of which style to choose. Is it better to go for a eye-catching style? or vintage collage style? Which one is the most creative yet appropriate? Today we are going to talk about how design principles can aid us in this process.

Firstly, what is the design principles?

Design principles should reflect the core value of a product or a service, and they ought to be concise and memorable, which to be kept in mind throughout the process. In addition, all principles should not be in conflict with one another, but constantly be refined to become better aid for better product services.

Let’s take a look at 10 google user design principles. (For more detail, please go to http://www.google.com/corporate/ux.html)

1. Focus on people their lives, their work, their dreams.
2. Every millisecond counts.
3. Simplicity is powerful.
4. Engage beginners and attract experts.
5. Dare to innovate.
6. Design for the world.
7. Plan for today‘s and tomorrow‘s business.
8. Delight the eye without distracting the mind.
9. Be worthy of people‘s trust.
10. Add a human touch.

Edited By Dan Li

Web Development Program

Web Design, Website Development
No Comments »
Bookmark and Share

Strength of any website depends upon the language it is coded in, therefore it is imperative for a web site developer to analyze and select only that language which not only supports the SEO ranking but is also user friendly.

One such language which is most preferred in the programming world by the web developers is Asp.Net. It is a web application framework developed and introduced in market by Giants Microsoft to allow programmers to build dynamic web sites, web applications and most importantly web services.

Web services mean that you can have several pieces of your application on different servers all around the world and the entire application will work without any glitches. Now these can even work with normal .NET Windows applications.

Version 1.0 of the .Net framework was released in January 2001. It was built in a Common language runtime, which allows the programmers to write Asp.Net code using any supported .Net Language. Ever since its first version was released, it has been a proven, well-established technology for building up anything from shopping cart system for E-commerce project, to create personal, web based photo gallery to a complete catalogue. This among many other features makes this language among the most preferred programming
language present in programming world today.

Edited By Henry Lu

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