#7 Experience Design (XD)

#7 Experience Design (XD)

It is the practice of designing products, processes, services, events and environments with a focus placed on the quality of the user experience and culturally relevant solutions.

While designing we should follow these steps:

Find your user needs: Each user demographic has a need that you are fulfilling. By defining why a user will visit your site, you can begin to build the design and content framework.

Identify your capabilities and constraints: Identify what you can do. Consider free web design services to start with.

Determine the best user experience: Combine your user needs with the key elements of your design layout. Key design elements include: post volume, visual and text weight and design simplicity (e.g. ESPN is complex while Disney is simple). If you are a photographer, consider a design layout with many large images and little text.

 Launch and test: The next step is to experiment to find the right design. Get customer feedback. If you can, ask prospective users to select their favorite layout and ask why they chose it. This will help you select a targeted design layout. Next it’s time to launch the site and gather user data. Google Analytics offers webmasters a website overlay to identify where users are clicking most often.

One of my favorite sites of user experience is http://www.shutterfly.com. It allows me to be creative, helps me to tell my own story in my own way. Has great designs and guides me in every step. Very easy to follow the steps and create the photo book or other albums. Other than this my all time favorite is http://www.google.com because of its huge options and ease and convenience.

User experience and usability have become synonymous, but these two fields are clearly distinct. UX addresses how a user feels when using a system, while usability is about the user-friendliness and efficiency of the interface.
Usability is big part of the user experience and plays a major role in experiences that are effective and pleasant, but then human factors science, psychology, information architecture and user-centered design principles also play major roles.

 

 

 

 

 

#6 Design for Usability

#6 Usability

What is usability

Any system designed for people should be easy to use, easy to learn, easy to remember, and helpful to users.

Usability is defined by 5 quality components:

• Learnability : How easy is it for users to accomplish basic tasks the first time they encounter the design?
• Efficiency: Once users have learned the design, how quickly can they perform tasks?
• Memorability : When users return to the design after a period of not using it, how easily can they reestablish proficiency?
• Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
• Satisfaction: How pleasant is it to use the design?

What is usability testing

Usability testing is done from the users point of view. This testing type makes an attempt to describe the “look and feel” and usage features or usage aspects of a product.

Nowadays there are many tools available in the market to perform the test.

Important factors while designing a site that focuses on usability

John Gould and Clayton Lewis recommend that designers striving for usability follow these three design principles.

• Early focus on users and tasks
• Empirical measurement
• Iterative design

We first need to understand how users interact with web-sites, how they think and what are the basic patterns of users’ behavior.

According to Jakob Nielsen, these are the ten general principles for user interface design. They are called "heuristics" because they are more in the nature of rules of thumb than specific usability guidelines.

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Match between system and the real world

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

User control and freedom

Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Recognition rather than recall

Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of use

Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list cconcrete steps to be carried out, and not be too large.

Site with good example of usability design

I found this site which talks about 20 websites to design
http://sixrevisions.com/usabilityaccessibility/20-websites-to-help-you-master-user-interface-design/

 

Topic#5 : Web Typography

Fonts and Typography in Web Design

When designing a Web page, we will most certainly use fonts. We need to understand both how fonts affect the design of the page, and how to affect the readers with fonts and typography. We the developers need to learn how fonts and typography can be used effectively in Web design.

I found the following resources :

1.   http://www.Yourfonts.com

YourFonts.com is a free service that allows you to create your own fonts. You can create a sample of your own handwriting in just a few minutes. The fonts you create are copyrighted by you and you can use them in any program you own or create custom banners for your websites.

2.   http://ilovetypography.com

I liked few points mentioned in this site :

a.   Contrast - Text exists to be read; make sure that it contrasts enough with the background to achieve that.

b.   Size – It should not be too small, so I am also making this page font size to Verdana 12. (even bigger is better).

c.   Hierarchy – May be by using different sizes of type to achieve it, but we can also use different styles; for example, all-caps, or using italic for sub-headings. Serif and sans serif faces can also be mixed to good effect.

d.   Space – Let your type breathe! Don’t be afraid to leave blank spaces in your pages. This negative or white space will help focus attention on the text—and it’s the text that speaks loudest, so let it be heard.

3.   http://fontsinuse.com

Fonts in use is a beautiful site that in its own words, aims to “catalog and examine real-world typography”. This site is great not only for the typography fans, but also for those who want to learn more about what makes for effective typography and effective uses of type.

4.   http://typophile.com

It is a typographic community that has been on the web for more than a decade. Explore it!

5.   http://typedia.com

it's a place where users can learn more about a typeface or font creator. Typedia also functions as a wiki, so anyone can join and add his own images, pages and information to the living, breathing typography tomb.

I think these resources will give us an idea about web typography.

Customize It

#4 Customize your Blog

 

Personalizing your blog is very important. We can adjust templates, layouts, backgrounds and more with  Template Designer of blogger.com.

We can even use our own image as blog background. Go to Design | Template Designer | Background, click on Background Image, and click  the new “Upload image” option, which allows us to select and upload the image. There are a variety of options such as alignment, repeat, and scroll for how to display your new image.

In this case I have made the following changes by using the Design option:

I changed the back ground of my blog and inserted an image from my laptop.

 Also I entered a header description “This is my first blog creation” and changed the font colour to white.

I have added a gadget to show the popular posts, also added the copyright at the bottom.

About RSS (Rich Site Summary):

#3. Let’s Talk About RSS

RSS Rich Site Summary (originally RDF Site Summary, often dubbed Really Simple Syndication) is a family of web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format. An RSS document (which is called a "feed", "web feed", or "channel") includes full or summarized text, plus metadata such as publishing dates and authorship.

It's an easy way for you to keep up with news and information that's important to you, and helps you avoid the conventional methods of browsing or searching for information on websites. Now the content you want can be delivered directly to you without cluttering your inbox with e-mail messages. This content is called a "feed."

RSS is written in the Internet coding language known as XML (eXtensible Markup Language).

What Is an RSS Reader?

An RSS reader is a small software program that collects and displays RSS feeds. It allows you to scan headlines from a number of news sources in a central location.

Where Can I Get an RSS Reader?

Some browsers, such as the current versions of Firefox and Safari have built in RSS readers. If you're using a browser that doesn't currently support RSS, there are a variety of RSS readers available on the web; some are free to download and others are available for purchase. I tried google reader :  http://www.google.com/reader/view/#stream/feed%2Fhttp%3A%2F%2Fsanjayguptamd.blogs.cnn.com%2Ffeed%2F

How to Use RSS

Get an RSS Reader – The first thing you’ll want to do if you’re getting into reading sites via RSS is to hook yourself up with an RSS Feed Reader.

There are many feed readers going around with a variety of approaches and features – however a good place to start is with a couple of free and easy to use web based ones like Google Reader and Bloglines.

The best way to learn how to use either Google Reader or Bloglines is to simply subscribe to some feeds and give it a go. Both have helpful help sections to get you up and running.

 After trying the above technique I felt as if a single website is reading for me, rather than visiting 10 different websites. It involves two steps :

1. Need a home (sign up into google reader)

2.connect the reader and the favourite website by subscribing to get all the updates of the favourite websites.

 You can click the icon or subscribe button(in the left), then the right hand side of the page will give all the details, then click or copy the url of your page and paste it onto your reader, then you can read the updates always.

Aggregator refers to a web site or computer software that aggregates a specific type of information from multiple online sources

RSS works by having the website author maintain a list of notifications on their website in a standard way. This list of notifications is called an "RSS Feed". People who are interested in finding out the latest headlines or changes can check this list. Special computer programs called "RSS aggregators" have been developed that automatically access the RSS feeds of websites you care about on your behalf and organize the results for you. (RSS feeds and aggregators are also sometimes called "RSS Channels" and "RSS Readers".)