Sunday, December 16, 2007
My blog so far
I have made some changes to my blog it now sports a new banner with a different design that I created on Paint.net and it has several mutimedia elements and RSS feed that was not there when I started.
I have shown more examples and discussed topics in details (blog on Folksonomy) that i used to do before. These examples have been explained visually - this has gained more importance after I learnt that I am a visual learner from the results of a small exercise we did in MSPTC on Learning Styles of Audience.
I plan to blog regularly on other topics of interest to me and would love to read more inorder to Learn and WRITE more.
Saturday, December 15, 2007
Writing For The Web- Lessons Learned
Web studies also reveal that the web is used by people who spend less than 2% of their time reading the content to find the information they want so that they can act upon it(Nielsen). That means web writing has to be user and topic –centered. People read differently online and writing for the web therefore involves the understanding of the principles of information architecture, usability testing that are beyond the realm of print or traditional copy writing. Web content needs to be concise, clear and to the point. Every design element, image, content added on the website should have a purpose . Grammar mistakes, long sentences, corporate jargons, should be avoided. When people read on screen their physical ability in reading a screen vs printed message, constraints of the screen, maintaining attention – all these have to be considered in crafting a message
Good writing means understanding the parameters of the broadcast medium such as print, broadcast, interactive. A good writer needs to have a fundamental knowledge of the web site usability issues, basic marketing principles and subject matter will adapt their tone and style to the Web.
Good writing makes a world of difference. The page layout and content has to be formatted to encourage user interactivity. There should be a good organized way of presenting the content in a clear, consistent manner. The information should be easily scannable. The use of headers, lists, HTML links, drop down menus should be used of easy accessibility and navigation. Video, multimedia content should be supplemented with the written content wherever necessary. When a copy is used take for example PDF files it is poorly edited, re-purposed to make a bad copy on the web.
For example, in this Nokia S60 website the software support has been developed and designed to help users find the information and act on it immediately. The header, drop down lists or forms have been put to good use in the Increasing productivity page that even has a input button that asks a question to the user whether they found the page useful as step in testing their web page usability.
The Plainsboro Township has a web page that contains information to its township residents and mostly makes use of PDF Files that take a long time to load, there is no mission statement or user centered design used. Long pages, use of PDF files make obtaining information make a badly designed web site.
One thing I learnt when doing a research about web writing is that it requires the collaborative work of a designer, writer, subject matter expert … it’s a team work. The information presented on the web should work in cohesion and the message communicated should convey the same meaning whether a image or written content is used. When designers work in a team where a writer is involved he/she realizes that web is a compromise and there are lots of things to consider like typography, space constraints, file size, his/her lack of knowledge of software tools are the limiting factors in web page designing.
The Eyes Have It
Eyetools, is a company that conducted the Eyetrack III study: "Eyetracking is a monitoring technology that determines where a person is looking. Special cameras called 'eye trackers' can watch a person's eye and capture fixations and eye movements with a remarkable degree of accuracy (typically accurate to 1 cm on a standard computer screen) without requiring any special headgear." Eyetracking is research that tracks where a person's eyes look while reading then analyzes the data to reveal patterns. By combining and reviewing data from multiple individuals during testing, you can discover representative patterns that apply to most of the population. For the Eyetrack III study we examined viewing patterns of prototype news websites, but you can use eyetracking to study how people view printed newspapers and magazines (editorial content and/or advertising), to gauge effectiveness of various forms of advertising, product packaging, and computer applications; it can be used in flight simulators, and even to track what people look at on shelves when grocery shopping. In other words, it's like getting inside of a person's head and watching what they see -- with the advantage that a computer is recording every eye movement and fixation for later compilation and analysis.
First Findings
Way back in the late 1980s, The Poynter Institute first got interested in learning more about news consumers' behavior through eyetracking research. Poynter affiliates Mario Garcia and Pegie Stark Adam, working with researchers and EYE-TRAC Research technology from Gallup Applied Science of Princeton, New Jersey, conducted the first eyetrack studies of print-newspaper readership. Their findings were published in 1991 in a book, "Eyes on the News"
Focusing especially on the use of color, the research produced some findings that startled and surprised the news industry. In his introduction to "Eyes on the News," Poynter's Roy Peter Clark wrote: "As I read (the findings), I sat scratching my head as myth after myth about newspaper reading fell by the wayside.
The research was groundbreaking. This was the first time that a significant independent study had been conducted for the newspaper industry using eye tracking technology.
• Color photos do not automatically draw readers. Content, size, and placement are more important.
• Readers will enter a newspaper page wherever the most powerful element is - and are willing to follow trails that editors lay for them.
• Readers look at facing pages as single units.
• Readers are willing to accept bold, even outrageous color experiments.
• Color does not detract from a reader's acquisition of visual information.
Back then, eye tracking technology wasn't as sophisticated as it is today. Test subjects sat at a desk with a bulky headpiece containing two video cameras and a reflective visor, with wires attaching the unit to a computer. This was as "realistic" a reading environment as could be created given the limits of the technology at the time.
Videotape of each participant's session was analyzed to record where the reader entered a page and the number of elements -- headlines, photos, cutlines, and text -- looked at along the path through the page. By seeing how long the eye remained on any one element, the researchers determined to what degree the material was processed.
It revealed, among other things, that most people enter a newspaper page through the dominant photo, then move to headlines, cutlines and secondary elements before reading the story. That study established design principles still followed in newspapers around the world.
"In general, text was the last point reached in the reader's journey," Adam says. "It was amazing to learn that most readers did not enter through a lead story as many editors assumed."
Original findings also revealed that newspaper readers see facing pages as one unit and that they read from right to left, lending credence to the belief that right-page advertising is read first. In 1990, color was key and eye tracking proved its solidity as a navigational device. "Today, color is everywhere and utilized in intelligent, new ways," Adam says. "It will be interesting to see which of our initial findings hold true."
Understanding how people read
According to psycholinguist Keith Rayner of the University of Massachusetts at Amherst, your eyes do not move smoothly across the text as you read. Instead, the typical reader behavior is to look at a word or several words in a group, then pause your eyes there briefly; this is called a "fixation," and it takes about 0.25 seconds on average. After a fixation, you move your eyes to the next word or group of words; this movement is called a "saccade" and takes only 0.1 seconds. (People often skip over short or predictable words such as "of," "in," "a," etc.) After this pattern is repeated once or twice, you pause to comprehend the phrase you just looked at (which on average takes 0.3 to 0.5 seconds).
According to Rayner, all these fixations and saccades result in 95 percent of college-educated people reading between 200 and 400 words per minute when reading an article; 300 words per minute is the average.
F-Pattern:
User interface guru Jakob Nielsen of the Nielsen Norman Group were on the road, giving seminars based on a recently completed an eye-tracking study that indicates how users consume Web pages–such as where people start browsing on a page, whether they have banner and text link blindness, where users look for navigation, how they react to different text types, relative attention allocated to text vs. pictures and more.
"The real highlight [of the study] is that peoples’ eyes flitter fast across pages. Very little time is allocated to each page element, so you have to be brief and concise in communicating online," Nielsen said. "They don’t look in on, across the lines of a page, and often fixate on something, such as the first few words of a headline, for only a tenth of second. The right-hand side is often never in view of the eyes. People look down the pages in an ‘F’ pattern with a few stripes at top–the first one longer than the second–and then down the long vertical stripe to see if is any else. Sometime the track turns into an ‘E’ pattern but it’s usually an F."
Pictures, images and moving objects tend to be more of an obstacle course for the eye, Nielson said. "It’s a bit of strange finding, but it’s consistent across Web sites. They tend to have a goal of distracting user," he said.
He gave an example of ecommerce sites with images of current promotions in the middle of a page that get tuned out. "If it’s a product associated with what they are interested in, it gets high attention," he noted. Similarly, animation can repel the eye if it’s not relevant to the user or if its overly complicated. "These are not spinning things that move around from all different angles, just a simple, predefined, one spin that plays on its own," Nielsen said.
Basically, users have become savvy surfers of Web pages, and that includes advertising content. "Advertising in general fares very poorly," Nielsen said. "There is almost no fixation on ads, and when there is, usually just in corner of the ad, perhaps attracted by some movement for a moment."
Ad placed on search pages are an exception. Search ads placed on the right side of a page, and especially at the top, get some amount of user attention, he said. The look and feel of text-based search page ads also carries over with a less negative effect on non-search sites. Non-ad page elements with the same shape or color of ads, such as banners, tend be ignored when people scan with their peripheral vision.
Image quality is also a factor in drawing attention. People in pictures facing forward is more inviting and approachable, Nielsen said. Obviously, fuzzy, small images are less inviting as are big glamor shots. Nielsen said the eye-tracking study also surfaced a counter-intuitive finding–people who look like models (perfect human specimens according to popular culture) are less likely to draw attention than ‘normal’ people. "A call center ad with model in it on the phone may be a good picture technically, but it will more likely be ignored," Nielsen said.
Nielsen’s advice: Understand the F principle, write eye-catching, concise headlines and display crisp images.
Using Heatmaps:
A heatmap is an aggregate view of all the individual user session images (like the one in question 4 above) for a single webpage on a single task. Researchers combine all the individual page sessions to create a single view of a page, revealing eye patterns from the group of test subjects.
This heat map was used to study:
SECTION 1:
•Compare viewing across different news design elements (e.g., font size, use of blurbs, number of headlines)
•Compare viewing across different news website styles and layouts that we modeled after current high-traffic news sites on the Web.
•Compare viewing of different article page layouts and writing styles
SECTION 2:
•Compare comprehension of material in multimedia format vs. text format
SECTION 3:
•Gather preliminary information on how people view multimedia/interactive free-form articles
Eye tracking methods for websites and UI’s
Remember those early generation websites? Their pages were like vast landscapes of text sprawling across and down screen after screen. Graphics were crude and too large for the typical home user to view.
Today, the online landscape is more diverse: flashing animation, graphical displays, streaming video, sounds that roar from pages unexpectedly
The Stanford-Poynter Project revealed that text may be a more immediate entry point than images on online news sites. This is surprising, especially in an interactive medium that attempts to heighten the user's experience through the integrated display of text, photos, video, and animated graphics. However, it makes sense that new rules apply to the new medium.
The study, which involved 67 subjects who were experienced and regular users on the web, confirmed the obvious for some and raised doubts for others. Jakob Nielson, said in an article that this study "makes a few of their (researchers') minor conclusions suspect, but the main findings are very robust and credible".
Previous studies of reader behavior with news in print found images to be the key entry points to the printed page. Traditional schools of design understandably teach the same thing. And many in the design community are steadfast that on-screen design follow print. That's understandable, too, since designers are using the same storytelling tools online -- photographs, graphics, and typography -- that they use in print.
The study, however, has indicated that more often than not, briefs or captions got the first eye fixations when the first page came up.
Does this mean that photos or graphics do not have a place on the homepage? Hardly.
With 64 percent of all available photos having fixations, photos clearly are essential. In fact, many online news organizations' log files show that photo galleries are among their most popular destinations.
In the Page Elements sections of the study, page elements for all pages were ranked by volume of fixations. Photos are third to article texts and briefs, which were looked at 92% and 82% of the time, respectively.
The conclusions of these early findings are not meant to encourage text-only presentation of websites, nor do the findings reveal that online readers prefer text to images to get their news.
The release of these early findings and the analysis of additional data, described in an accompanying piece by Marion Lewenstein of Stanford, help online news visitors by helping designers better understand their audience.
So, what can we learn from the early results of the Stanford-Poynter Project?
Improve Headlines and Briefs
Many times, headlines and briefs run in the newspaper with a photo or other graphic. However, once uploaded to the website, the text and visual elements are isolated from one another because of limited real estate on the screen. One solution is to rewrite headlines to compensate for the lack of visual support. More often, headlines are written to fit the column space allocated for the story. These limitations do not exist online, so optimize and rewrite headlines to do what they're supposed to do: bring the reader into the story. With headlines and captions drawing the eye first, this may be the first and only opportunity to bring online readers in.
Edit Online Photos and Graphics
Just as headlines are packaged directly from the print edition into online, photographs are often taken straight from the paper and displayed on the web. Unfortunately, the amount of graphic information displayed on screen is far less than in print because of the enormous difference in resolution. Print can display from 180dpi to 1200dpi whereas a standard computer monitor only can display 72dpi. Photo editing for online news should consider the following:
1) Is there a different photo more appropriate for online display, one with a single focus or a single subject?
2) Can the crop of the same image be tighter, to help the user focus on the main detail?
Understand Your Online Reader
The online medium is different from print. The habits of reading from a computer screen are different, of course, than reading a newspaper or magazine. It is common to observe people focused on reading a newspaper on a bus, in a coffee shop, or waiting in an airport terminal, isolated from distractions. In contrast, online readers are catching up with their news between answering e-mail, conversing with colleagues, or answering phone calls. The need for quicker access to information is much more prevalent online. Competition for attention is not limited to other online sites but includes daily activity in and around the user's computer.
Study also shows that the bigger size font is for headlines and help people scan while smaller font siz actually help people to focus and read more.
Usage of lists, bullets and white space is good.
As this video from Poynter shows how several usability issues in online reading can be overcome with this technology
Sunday, November 18, 2007
Go Flash or Skip
The website has made use of 3D elements; it has used nice spring colors that are effective and functional.
For the sake of convenience and lack of French language knowledge I have named the three pages in this website as GREEN, BLUE and ORANGE.
The three different Schools Of Art are distinguished by three colors green, orange and blue.
In the GREEN page the color is a compositional and unifying element, variety is created in placing the color elements with futuristic looking, and dome shaped buildings and metallic shiny car.
The proximity of the human elements near the passing cars, the landscape in the background with the buildings, the park-like setting and the dome shaped building, the big bowls of plant, the green rainbow are nice work of imagination and eye-catching compulsive work of art.
There is limited interactivity with the website at the click of a mouse the car moves there is a call-out window indicating a conversation between the man and the lady in this page The VOTRE IDEE sign board linear look creates hierarchy and is facing the dome shapes.
The BLUE color scheme with a green meadow forms the backdrop, the placement of the green meadow with the tiny looking human elements again in a park like setting creates visual hierarchy. The pink and white flowers, plants in the foreground, the low-flying blimps suspended in the air create variety. The green meadow is juxtaposed with blue billboard looking screen/big screen and the man position at the top creates visual interest and scale. The white fence creates line and visual interest.
The robot/alien looking character seen in the background creates movement, visual tension the same way the passing cars did in the GREEN page. The 3-D Robot arouses curiosity in me and I click on the next page.
ORANGE page or the Esta 3D Bellecour webpage shows the 3-D robot in the foreground beside the orange blob of paint. The movement of the robot/alien is realistic a vector illustration springs first same as the GREEN page with the architecture line drawings this becomes a full-blown 3-D element as it approaches the foreground. The 3-d robot/alien and the other younger robot are placed with the short grass growth that creates visual hierarchy, variety and visual interest – this page is dominated by the presence of the two robots and their wild actions.
There is a repetition of the elements such as the sign board this time in orange color, the trees, the grass and this repetition creates visual interest
The casual-looking human elements engaged in animated conversation appearing detached from the robotic elements and the parked car, the cityscape in the background creates an illusion of community and appears to be a student oriented environment. The learning environment is depicted as fun, open, casual and collaborative which is what it is supposed to be.
All the WebPages allow reader input on a cell phone's interface and they clearly target the students (audience) who are invited to open exploration of art, architecture and multimedia.
The logos in three different colors to distinguish the three pages in different colors with the B symbolizing the first letter of the name of the college Bellecour, the functional tabs that are consistent in color and brand imaging builds trust with the audience.
True to what Jakob Nielsen has said Flash 99% bad the website has small font, limited interactivity and flash typical poor intuitive qualities. Despite these drawbacks website however is able to convey its message clearly, consistently and effectively to the NetGen learning styles of its intended audience. I may not be a NetGen learner but that does not stop me from visiting interactive, Flash-spurned online games sites such as Orisinal. This website has beautiful feminine colors, interactive games with cool names , cute characters... Enjoy !