Week 6 : Interaction Design

Class been canceled due to Dr.Dayana was on MC (fever). We had given a task to draw a mindmap for topic INTERACTION DESIGN.
 

Commonly the Web is used for retrieving information, and there is very little in the way of interaction between users. Information transfer over the Web is mostly one way, from the Webmaster, to the reader. There are a few techniques to make the Web more interactive.

One method is to add a section to the web site that gives people a form that they can fill in with appropriate information, and then submit it. These can be used for email feedback, for entry into guest books that appear on the page, as general comment forms that get saved into a database, or as more interactive things such as polls and visible comments on documents.

Another method of making the Web more interactive is by setting up customisation features for users. This can be done by storing information about how the user wants information presented to them, what information they want presented to them, and also whether they want to be alerted to new or changing information, for example being alerted by email when a web page changes.

Principles for good navigation design

A site must:

1. Let me know where I am at all times
2. Clearly differentiate hyperlinks from content
3. Let me know clearly where I can go from here
4. Let me see where I’ve already been
5. Make it obvious what to do to get somewhere
6. Indicate what clicking a link will do

1. Let me know where I am at all times

‘Signposting’ is part of navigation (how can you navigate somewhere if you don’t know where you’re starting from). Clear signposting is always important, to let people know where in the site they are, down to the page level (particularly when you consider that someone could be entering via an unusual link or search engine result).

Where navigation includes “where you are now”, it must be clearly indicated. The WDFS side navigation differentiates between “here” nav and “there” nav by showing “here” in black text on a grey background with no hyperlink (even the presence of a hyperlink suggests it’s “there”).

Note: Tabs naturally show “here” from “there”.

2. Clearly differentiate hyperlinks from content

When navigation is apart from content, differentiate through complete physically separation, grouping and/or style from content.

When links are within content, you have to use style to differentiate. Conventional blue, underlined style with distinct ‘hover’, ‘active’ and ‘visited’ colours work really well. It has become generally acceptable to exclude the underline from links, although I strongly recommend keeping text hyperlinks in blue when on a white/grey background.

3. Let me know clearly where I can go from here

It must be obvious at a glance where I can go from here. That means that hyperlinks must be clearly distinguishable from content (see previous principle).

4. Let me see where I’ve already been

Being able to see pages you’ve already visited helps you to filter where you might want go now. It also helps you understand where you are in relation to where you’ve been.

HTML differentiates between unvisited and visited links by default. The standard colours work very well because they are conventional and easily recognised. If the designer must change the default link colour settings, they *must* provide alternatives that clearly differentiate visited and unvisited links. If tempted to change link colours because of your content’s background colour, think whether the background colour is really that important. Would white be a better solution?

5. Make it obvious what to do to get somewhere

Once a user knows where they can go, they need to know how to get there. It should be clear to tell what is navigation from what isn’t, without any thought at all.

Note: If you have to label your navigation “Navigation”, you’ve failed to make navigation clear enough.

6. Indicate what clicking a link will do

The target of a link must be obvious. i.e. The link must tell me either:

• what I’ll get
• where I’ll go
• or what will happen, when I click it.

The way to do this is to make the content of the link say either:

• what I’ll get
• where I’ll go
• or what will happen, when clicked

Navigation is one of the most important things to consider when designing a website. After all, it is one of the main ways that will determine how a user interacts with a site. It is also an important thing to consider as it has an effect on usability. Poor use of navigation can cause confusion which has a negative effect on usability.

Here are several example to let user know where they are during they navigate in the website :

1. Location

Navigation by design, needs to give the user awareness of where they are in the site’s structure. The most effective way of achieving this is to highlight the current section in the navigation itself. A great example of this can be seen below :

An example of navigation clearly communicating location

 

2.Breadcrumbs

Another way of communicating where a user is on a site is through the use of breadcrumbs. Breadcrumbs are especially needed for more complex sites that have multiple levels of navigation. The name comes from leaving a path behind from which you can follow back to your original location. So essentially it shows the exact point where you are, while giving you options to go back to other previous steps in the site’s structure.

3. Clear, Simple and Easy to Understand

One of the easiest ways of having a positive effect on usability is to make the navigation itself clear, simple and easy to understand. Some of this overlaps with good use of whitespace that will certainly help make navigation easier to read

 

4. URL

User also will know where they are according to the url of the website.

5. Title

Every title stated at every page of the website also state where are user now.

Effective Navigation Guidelines

While designing the navigation for your site keep the following points in mind:

• Organized Links
  Make sure your links are well organized according to the order of importance. Visitors should be easily able to find what they are looking for under different categories.
  E.g. All our main links are found on the top i.e. our services, products,portfolio, resources etc.Other interesting links are found on the right of the page. These are common and consistent throughout the site.
  Finally if the web page belongs to a guide E.g web design guide you will find the related links below the right menu and also at the bottom of the page.
  
  Note: Related links are very important as visitors coming to a particular page will probably be interested in more information you have under the same topic.
• Clear and Prominent
  Once you have decided on your navigation links, you need to think of the best place to put them. Navigation should be clear and consistent. Try to design your navigation on the top or on the left as these are the first places our eyes go to. Also locate the primary links high enough on the page so that they are visible without scrolling. Navigation images should be seamlessly integrated into the site design. Avoid putting navigation links at the bottom of the page as visitors will need to scroll right down to see the links. If you like you could put the important links at the top AND bottom of the page just to make sure your visitors don't miss the link.
• Consistent
  Navigation should be clear and consistent. The important links of your website should be on every page, in the same location, and in the same sequence. Don't confuse your visitors by putting your navigation links in different places in different pages.
• Easy to understand
  Make your links easy to understand and to the point. Usually you won't have enough place to have long links so make use of the space wisely. Visitors need to know where they will go on clicking on a particular link, so make sure your links are understandable or nobody is going to click on your links, which will defeat the purpose of designing a good navigation system.
• DHTML Menus
  If you have a large number of links under categories and sub-categories you could use navigation menus to organize your links. There are many cut 'n' paste scripts available on the Net that you could use to create great navigation systems.

Keeping these basic points in mind you can go ahead and design an effective navigation system for your site. Take a look at other sites to get some ideas on good navigation techniques! Another good idea would be to use eye-catching visuals and small chunks of information to draw visitors to click on a link.

SELF REVIEW

Interaction design is very important in the designing the web. This is because to make sure that our user not lost in our website during they navigate. So that the we must provide the user with a clear and easy to understand instruction or guideline for user when they navigate in our website. So that, we need to use some tips or good guideline how to create an attractive navigation in our website. If user fell that easy to navigate and explore our website, it will attract them to come again in our website. The most important thing is, we need to create our website more to dynamics rather than statics. It is because a statics website is very boring. A secret here is giving user to more control in our website. So that it will give user power on navigation in the website.

Week 5 : Basic Web Design

Web design :

Web design is used a general term to describe any various tasks involved in creating web page more specifically it refer to jobs focused on building the front -end of a webpage.
Web design is the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, microblogging clients and RSS readers.
Web design is the creation of digital environments that facilitate and encourage human activity,reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

Purpose of web design :

What is the purpose of Web Design ?

• To inform or to persuade users.
• This is accomplished by:
1. delivering content
2. presenting the content in a way that benefits the user

Four primary aspects influence web design:

• Content
• Technology
• Visuals
• Economics

Therefore, you have to plan a site that:

• Well structured
• Easy to navigate
• Quick download time

Three parts of web design:

• Information Design
• Interaction Design
• Interface Design (Visual or Presentation Design)

SELF REVIEW

Web design is very important before we develop a website. This is because to make sure that we are develop website which is appropriate with it's user and has a good quality. We develop a website based on user need not based on our need or developer need. Basically, there are three parts of web design which are information design,interaction design and presentation design. Information design is about the flowchart of website. This is about how to organize and design the content of website including the text, graphics and others.While, interaction design is about the storyboard of the website. It is including the interaction, navigation and control. The last part is presentation. It is also called as a website's prototype. This is about the presentation of style and layout of the elements on the screen of website. It is about how the website will looked like.

Week 4 - Project Management in Web Design & Production

Subtopics :

-Web Development Team

-Roles Involved In A Web Development Project

-Issues on Management of Web Development, Duration, Financial and Co-Operation

Team management is a collective term used to describe various strategies and processes that are designed to promote unity and coordination between the members of a group or team. The goal for any team management process is to actively involve all group members in working toward a common goal, providing a means for each group member to participate in that endeavor. There are a number of different approaches to forming and organizing teams, as well as overseeing or managing their ongoing function. As with many management strategies, there is no one ideal mode of team management that fits every situation and setting.

The Web Site Design and Development Process

There are numerous steps in the web site design and development process. From gathering initial information, to the creation of your web site, and finally to maintenance to keep your web site up to date and current.The exact process will vary slightly from designer to designer, but the basics are generally the same.

1. Information Gathering
2. Planning
3. Design
4. Development
5. Testing and Delivery
6. Maintenance

Phase One: Information Gathering

The first step in designing a successful web site is to gather information. Many things need to be taken into consideration when the look and feel of your site is created.This first step is actually the most important one, as it involves a solid understanding of the company it is created for. It involves a good understanding of you – what your business goals and dreams are, and how the web can be utilized to help you achieve those goals.It is important that your web designer start off by asking a lot of questions to help them understand your business and your needs in a web site.Certain things to consider are:

• PurposeWhat is the purpose of the site? Do you want to provide information, promote a service, sell a product… ?
• Goals
  What do you hope to accomplish by building this web site? Two of the more common goals are either to make money or share information.
• Target Audience
  Is there a specific group of people that will help you reach your goals? It is helpful to picture the “ideal” person you want to visit your web site. Consider their age, sex or interests – this will later help determine the best design style for your site.
• Content
  What kind of information will the target audience be looking for on your site? Are they looking for specific information, a particular product or service, online ordering…?

Phase Two: Planning

Using the information gathered from phase one, it is time to put together a plan for your web site. This is the point where a site map is developed.

The site map is a list of all main topic areas of the site, as well as sub-topics, if applicable. This serves as a guide as to what content will be on the site, and is essential to developing a consistent, easy to understand navigational system. The end-user of the web site – aka your customer – must be kept in mind when designing your site. These are, after all, the people who will be learning about your service or buying your product. A good user interface creates an easy to navigate web site, and is the basis for this.

During the planning phase, your web designer will also help you decide what technologies should be implemented. Elements such as interactive forms, ecommerce, flash, etc. are discussed when planning your web site.

Phase Three: Design

Drawing from the information gathered up to this point, it’s time to determine the look and feel of your site.Target audience is one of the key factors taken into consideration. A site aimed at teenagers, for example, will look much different than one meant for a financial institution. As part of the design phase, it is also important to incorporate elements such as the company logo or colors to help strengthen the identity of your company on the web site.

Your web designer will create one or more prototype designs for your web site. This is typically a .jpg image of what the final design will look like. Often times you will be sent an email with the mock-ups for your web site, while other designers take it a step further by giving you access to a secure area of their web site meant for customers to view work in progress.

Either way, your designer should allow you to view your project throughout the design and development stages. The most important reason for this is that it gives you the opportunity to express your likes and dislikes on the site design.

In this phase, communication between both you and your designer is crucial to ensure that the final web site will match your needs and taste. It is important that you work closely with your designer, exchanging ideas, until you arrive at the final design for your web site.

Then development can begin…

Phase Four: Development

The developmental stage is the point where the web site itself is created. At this time, your web designer will take all of the individual graphic elements from the prototype and use them to create the actual, functional site.

This is typically done by first developing the home page, followed by a “shell” for the interior pages. The shell serves as a template for the content pages of your site, as it contains the main navigational structure for the web site. Once the shell has been created, your designer will take your content and distribute it throughout the site, in the appropriate areas.

Elements such as interactive contact forms, flash animations or ecommerce shopping carts are implemented and made functional during this phase, as well.

This entire time, your designer should continue to make your in-progress web site available to you for viewing, so that you can suggest any additional changes or corrections you would like to have done.

On the technical front, a successful web site requires an understanding of front-end web development. This involves writing valid XHTML / CSS code that complies to current web standards, maximizing functionality, as well as accessibility for as large an audience as possible.This is tested in the next phase…

Phase Five: Testing and Delivery

At this point, your web designer will attend to the final details and test your web site. They will test things such as the complete functionality of forms or other scripts, as well last testing for last minute compatibility issues (viewing differences between different web browsers), ensuring that your web site is optimized to be viewed properly in the most recent browser versions.

A good web designer is one who is well versed in current standards for web site design and development. The basic technologies currently used are XHTML and CSS (Cascading Style Sheets). As part of testing, your designer should check to be sure that all of the code written for your web site validates. Valid code means that your site meets the current web development standards – this is helpful when checking for issues such as cross-browser compatibility as mentioned above.

Once you give your web designer final approval, it is time to deliver the site. An FTP (File Transfer Protocol) program is used to upload the web site files to your server. Most web designers offer domain name registration and web hosting services as well. Once these accounts have been setup, and your web site uploaded to the server, the site should be put through one last run-through. This is just precautionary, to confirm that all files have been uploaded correctly, and that the site continues to be fully functional.

This marks the official launch of your site, as it is now viewable to the public.

Phase Six: Maintenance

The development of your web site is not necessarily over, though. One way to bring repeat visitors to your site is to offer new content or products on a regular basis. Most web designers will be more than happy to continue working together with you, to update the information on your web site. Many designers offer maintenance packages at reduced rates, based on how often you anticipate making changes or additions to your web site.

If you prefer to be more hands on, and update your own content, there is something called a CMS (Content Management System) that can be implemented to your web site. This is something that would be decided upon during the Planning stage. With a CMS, your designer will utilize online software to develop a database driven site for you.

A web site driven by a CMS gives you the ability to edit the content areas of the web site yourself. You are given access to a back-end administrative area, where you can use an online text editor (similar to a mini version of Microsoft Word). You’ll be able to edit existing content this way, or if you are feeling more adventurous, you can even add new pages and content yourself. The possibilities are endless!

It’s really up to you as far as how comfortable you feel as far as updating your own web site. Some people prefer to have all the control so that they can make updates to their own web site the minute they decide to do so. Others prefer to hand off the web site entirely, as they have enough tasks on-hand that are more important for them to handle directly.That’s where the help of a your web designer comes in, once again, as they can take over the web site maintenance for you – one less thing for you to do is always a good thing in these busy times!

Other maintenance type items include SEO (Search Engine Optimization) and SES (Search Engine Submission). This is the optimization of you web site with elements such as title, description and keyword tags which help your web site achieve higher rankings in the search engines. The previously mentioned code validation is something that plays a vital role in SEO, as well.

Roles Involved In A Web Development Project

There are a number of key roles that must be fulfilled in order for a web project to be successful in turning visitors into leads and customers:

Role 1 - Web Strategist

Tying company goals and visitor needs into a website is perhaps more difficult that it looks. Unfortunately, the most common strategy here seems to be 'emulation' (copying your competitors), which has led to a glut of websites with the same problems that seem to have become a 'web standard'.The Web Strategist should be responsible for creating the overall site strategy and then developing an actual site map, which will be followed by the rest of the development team.

Role 2 - Copy Writer

Despite the web's awesome power to communicate with images, I believe that the web text is still the most important element on a site. Effective copywriting can capture the imagination of the reader, and create a highly emotive reaction. Good web copy is always written for a specific target audience, and often from the point of view of that target audience. Oh, and there's some need for spelling and grammar checking too.

Role 3 - Graphic Designer

Graphic design continues to be an integral element to an effective web presence. Good graphic design accomplishes much more than just a "wow, that's cool" response. We suggest that graphic design supports the overall site strategy by creating an instant 'that's what I'm looking for' feel, and also creating a clearly defined flow through the site.

Role 4 - Technical Programmer

Putting all of these elements into an actual site is yet another role. HTML vs. FLASH vs. PHP, etc. What screen resolution to develop for? How to facilitate lead capture through forms? etc. Not to mention the myriad of choice relating specifically to e-commerce - cart choice, credit card transaction processing, etc. Are all elements that you'll rely on your Technical Programmer for.

Role 5 - Site Promoter

I read something the other day that said, building a website is like "putting up a billboard in our basement". Your site promoter's role is to increase the number of qualified visitors to the site. The key here is that it should be done in a cost effective manner. Pay-per-click, partnerships, landing pages, affiliates, e-newsletter sponsorships, etc, can all be effective if done properly.

Role 6 - Web Strategist (Reprise)

After the site is developed, live, and has some traffic, the Site Strategist should continue to play a role in reviewing web metrics and other data such as pay-per-click management results to determine where the site still needs work.

SELF REVIEW

The process of management for web can be divided as 3 parts which are, pre-production,production and post production.

The pre-production is refer to the planning process. In this process, we need to analysis, planning and design the web. It is more to create a blueprint of the website. This phase we more focus on target user, message to deliver, purpose of the website and also about the organization of the website.This process is more to planning for interactivity, navigation, usability and interface of the website.

While the production is the constructing of web site. For example we more concentrate on content research, interface research, graphic development, animation development,animation development, audio recording, video recording and web authoring or programming.

 

The third phase is pre-production. Pre-production is mean that testing and evaluation for the website. beside that it also related to feedback from client, product revision and product documentation or packing.

 

In developing web, we also need a team which is called web development team. This team is very important to develop a website. Each person at the development team has different skill and talent for developing the website.So that, we can produce a good website. This mean each role of person in our website development team play the important roles. The great website is normally produced by a good web development team.

However for a develop educational website,we have at least five members. Members that are contribute are project manager, content area specialist, instructional designer, web developer/ programmer/database administrator and media specialist (graphic artist animator and etc).