independent study: web usability notes

Saturday, April 28, 2007

web usability notes

Typography: Readability & Legibility

Use common fonts at or above 10 points (12-14 pts for seniors, impaired and children)
Avoid busy backgrounds
Use black text on white backgrounds
Keep moving, all-cap and graphical text to a minimum
PDF text can be hard to read.
Anti-aliased text is hard to read esp. under 12 pts
Set type in % of body text sizes so it can be enlarged by viewers
Sans serif fonts easiest to read online - Verdana easiest to read

Typical Fonts on most Computers (recs may change with better monitors)

Arial, Arial Black (sans serif) clean, no frills 10+
Comic Sans MS (sans serif) friendly, youthful, fun, not serious hard to read
Courier New (cursive)
Georgia (mono space)best serif online traditional, more moedern than TNR
Impact (serif) for print, bold only in short headlines online
Times New Roman (serif) 12+ not good online
Trebuchet MS (sans serif) 10+ modern, simple, edgy, readable
Verdana (sans serif) most readable online, even small, modern, professional

Fonts and Colors

At most 4 colors and 3 typefaces of fonts in main areas.
Use size, boldface and/or color to show importance.
All-cap text reduces reading speed by 10%. Use only for short headlines and shouting.
Black on white or dark on cool light color easiest text to read.
Use contrast colors but not vibrant or bright colors that may vibrate or cause fatigue
No busy backgrounds with text.
Red and green are problems with color blindness. (8% men, .5 women) Use alternate clues.
View screen in grayscale to see if contrast is good.

Text images bad because:

graphics cause file bloat
not searchable
not selectable for use in word processing or map searching
doesn't scale or resize
screen readers can't read - must use alternate text, too.

Moving Text bad because:

looks like advertising
foreigners may have to look up words as they read
takes control away from readers
static text can be read faster
people may have to wait
some disabilities can't read easily

No comments:

Post a Comment

Notes on Multimedia

1. Divide the story into its logical, nonlinear parts, such as: a lead or nut paragraph, essentially addressing why this story is important profiles of the main person or people in the story the event or situation any process or how something works pros and cons the history of the event or situation other related issues raised by the story 2. Decide what pieces of the story work best in each medium. Video · to depict action · to take a reader to a place central to the story · to hear and see a person central to the story. Still photos · emphasizing a strong emotion, especially stills with audio · staying with an important point in a story · create a particular mood. · more dramatic and don't go by as quickly as video · Panorama or 360-degree photos, especially combined with audio, to immerse in location · 4. aoid using audio alone graphics · Animated graphics show how things work · . Graphics go where cameras can't go, into human cells or millions of miles into space. map · Does the story need a map? · a location map, or layered with other information? · GIS (geographic information systems) and satellite imaging are important tools · Interactive GIS can personalize a story by letting readers pinpoint things in their own cities or neighborhoods - such as crime or meth labs or liquor stores or licensed gun dealers. Text · describe the history of a story (sometimes in combination with photos) · describe a process (sometimes in combination with graphics) · provide first-person accounts of an event. Often, text is what's left over when you can't convey the information with photos, video, audio or graphics. Make sure the information in each medium is complementary, not redundant. A little overlap among the different media is okay. It's also useful to have some overlap among the story's nonlinear parts, as a way to invite readers to explore the other parts of the story. But try to match up each element of a story with the medium that best conveys it. Interactivity · gives reader both input and control · By making the story nonlinear, you've introduced an element of interactivity, because the user can choose which elements of a story to read or view and in which order · By including online forums or chats, you give readers input into a story · interactive games so reader can construct own story, like planning a development · Institute for Interactive Journalism. BACKPACK JOURNALIST · Laptop computer with: o Photoshop o Dreamweaver o IMovie or Pinnacle Studio 8 (or Final Cut Pro or Adobe Premiere) o Flash o text editor such as Word. · Video camera and accessories o lenses, filters, microphones, (1 shotgun microphone) headphones, batteries, cables, tripod o Digital video tape (more than you think you'll need) o Lens cleaners (brush, tissues, solution -- clean lens before every outing) o Absorbent soft towel (for emergency lens cleaning) o Duct tape (if some part of your camera breaks o Pocket knife (remember to put this in your checked luggage when traveling) o Rubber bands o Extra batteries for microphones (replace these every few months) o Camera and microphone manuals (unless you've memorized both) o Plastic bags for camera (as emergency protection if you don't have a raincoat for your camera, or if you're moving between extremes of heat and cold and need the camera to adjust slowly) o Plastic bags, small and zip-lock for used DV tapes o Water bottle (for you) o Power bars (for you -- you never know when you're going to skip a meal) o Pens (if nothing else, to jot a quick ID on the tape you've just shot) o Small notebook o Backpack journalist vest with many pockets (have towel, batteries, DV tape, notebook, pen, knife and duct tape within easy reach) o All main equipment should fit in a camera/computer case that works for you, one that is configured as a backpack, preferably, especially if you also have to carry a satellite phone. If you're flying, never check your camera bag -- always carry it with you. You may have to check your tripod, so buy one that fits into your suitcase. The Backpack Journalist at Work Memorize your rough storyboard, or have a handy reference to it Shoot a series of sequences (see Sequences in the Shooting Tips tutorial) If a part that works better in stills pay more attention to framing and setting up the shot, with close-ups and extreme close-ups that will likely be used as still photos. Consider doing interviews twice: once while the person is actually doing the action that will be depicted in video clips, and another in a quiet, controlled area to describe again the action and comment on the implications of the action. The reason is that the sound in the field may be contaminated with airplanes overhead, lawnmowers being used nearby, protestors, etc., that mask the words. You may get enough in the action shot for part of a pithy quote, and then overlay the audio from the controlled setting to explain the action. Be flexible -- opportunities for unanticipated video, stills and other interview materials suitable for text are likely to pop up when you least expect them. Go for them -- don't hesitate. Tape is cheap. Visuals aren’t like print – if you miss the shot, you can’t use the phone to fill in the gaps. The only thing you can do is describe it in text, or put a talking head on camera to describe the action, neither of which is as effective as getting the real action, either in video or stills. If you have to file multimedia stories daily: · Review your tape and grab still photos and potential video clips as you go · Write detailed information on your tapes, such as the tape number, date of video, main subjects, important sequences, your name and phone number (in case you lose the tape). · Make notes on the story elements as you go through your tape -- send a nut graph and rough storyboard to your editor. Usually, if you're filing daily, you will have designed a couple of templates to choose from that will lay out some basic schemes for including video, photos and text on a Web page. · Edit still photos and video clips in the field (rather than deferring to judgments of the editor back home). · Send still photos (sending video clips from the field can still be dicey, so send photos, which take less bandwidth, first). · Write accompanying text blocks and send them in. · Send video clips (this often takes some time to process, so it's a good opportunity to prepare for the next day). · Send appropriate graphics if available (scientists especially often work on their own laptops and may have information to give you). If you're not on a daily deadline: · The strategy's a bit different if you don't have to file until you're back at your desk, especially if you're working on a longer feature story. In the field: · Review and label your tapes every night · Transcribe interview material that's likely to go into text blocks or captions · Make notes on the shots and information you need to get the next day · Review your rough storyboard and make adjustments if necessary Back in the office: · Review your tape, grab obvious photos and video clips for later editing · Do a detailed storyboard · Gather the rest of the information you need for the story (graphics? maps?) · Start assembling the content for the pages, rough text blocks first, then the visual elements. It's likely that you'll be working with your immediate editor and graphics editor at this point, so you may be doing some back-and-forth on photos and video

Notes on Shooting Video Tips

Roll 30 sec Blank Tape with lens cap on before You Start Shooting Avoids crinkles at the start Check your audio with headphones on Shoot selectively Not when changing shots or focusing Shut up when shooting Hold your shots for at least 15 seconds, before you pan, zoom or go onto another shot. Avoid panning and zooming start with a static, wide angle shot, and hold it for 15 seconds. Then make your move to zoom in or pan, and hold the next static shot for an additional 15 seconds. This will give you three useable shots - the wide-angle, the close-up and the zoom in between - to choose from in the edit room. to get a close-up it's better to keep your camera set to a more wide-angle view and move the camera closer to the subject of your shot, than to have the camera farther away and zoom in for the close-up. A telephoto shot using the zoom feature will accentuate movement by the subject and make the shot appear shaky. Shoot in Sequences Shoot your video in sequences, where you take a general scene or an action and break it into various parts or segments and shoot each one, rather than doing it as one long shot. This is especially true when shooting B-roll such as crowd scenes or nature shots, rather than a static shot of an interview with someone. a good ratio to shoot for (literally) is 50 percent closeups and extreme closeups, 25 percent medium shots, and 25 percent wide shots. Framing and Composing Your Shots Be aware of composition in your shots and how you frame your shots, particularly with interviews. For example, avoid a shot of a person with a plant or pole in back of them Headroom and Noseroom Leave the proper amount of noseroom and headroom in front of and above the person you're shooting. It's better to have that room below the person's face, space you then could use when you're editing the video to add a title with the person's name. But don't have the shot too low where you crop the top of the person's head. And if you're shooting a person standing, don't chop them off at the knees - get their entire body in the shot.. One approach is the rule of thirds: one third of the frame should be above the person's eyes one third of the frame should be the person's face and shoulder area one third of the frame should be the person's lower torso. And if the person is looking to the side, add space in the direction in which the person is looking, in front of their nose. Depth of Field Be aware of ways to increase the sense of depth within your shot, since video images are inherently flat. If you're shooting someone, try to include other objects in the background or foreground that give the viewer a sense of depth. a wide angle shot will provide a much better depth of field than a telephoto shot where you've zoomed in on your subject. Change Angles and Perspectives Try to change point and/or angle of view after every shot. Look for interesting perspectives. Don't shoot everything from eye level - it's boring. Especially try shots where you hold your camera close to the ground and shoot up toward your subject. if you're shooting someone working at a computer terminal, take one shot from over their shoulder, then another that is a close-up of their hands and fingers using the keyboard and mouse, then a shot from over the person's other shoulder, then a low angle shot looking up at them and then a facial shot. Or hold your camera above your head to get a different perspective on a scene. Do a close up shot, because that often provides a more intimate view of a person. This is especially important with video on the Web, because the video viewers use small windows and wide-angle shots won't display much detail. move the camera closer or farther away. Get People in Your Scenes Tripods for Steady Shots If you must shoot without a tripod or other support, shoot a wider angle shot. The wider the focal length, the steadier the shot or find something to steady your camera - i.e. lean against a tree, put the camera on top of a trashcan, etc. Anticipate Action in Your Shots Anticipate action by trying to predict where the subject/action will go, and then be ready to shoot it when it moves into the frame of your shot. Think ahead and get positioned for the action that's to come. Let action happen within the frame. Don't constantly move the camera in an futile attempt to catch everything. And don't be afraid to allow your subject to move out of frame, rather than trying to follow them with your camera. If you follow the person while they walk with your first shot and always keep them in frame, and then cut to second shot of the person sitting down, it can create a mental disconnect for the viewer as to how the person got to the second position. Shooting an Interview Ask the person you're interviewing to look at you, not at the camera. Try to avoid a straight-on shot - shoot the person from a slight angle to the left or right. Don't use the zoom feature to get a close-up shot of the person - that accentuates movement. Instead, move the camera a little closer to the subject. Don't have your interviewee sit in a chair with wheels or that squeaks. And watch out for nervous activity that creates noise - Don't do a pre-interview off camera where you tell them the questions you'll be asking beforehand. It makes them sound stilted and canned, just give them a general idea. When you start the interview, have the camera roll for a few seconds before you ask your first question. And during the interview, relax and listen. Don't nod or make gestures Doing Sit-Down Interviews start with a set-up shot from behind and to one side or the other of the reporter that focuses on the person talking while the questions are asked. Because this shot will show the person at an angle, leave extra room in the shot in the direction the person is looking (rather than centering the person in the middle of the frame). Then do a wider angle shot from the same position that includes the reporter while the subject of the interview is responding to a question. Finally, move your camera to get a frontal shot of the reporter listening to the person - which is called a reverse shot or cut-away. This is shot from behind the person being interviewed. And again get both a close-up and a wider angle shot. It's important that in this reverse or cut-away shot, you position the camera on the same side of the room as it was when you did the first shot from behind the reporter. So visualize that there's an axis that runs from the interviewee to the reporter. When you are taking your first shot from behind and to one side of the reporter, stay on the same side of that axis when you move the camera to do the front-on shot of the reporter. generally do not film the reporter actually asking the questions - just the answers of the interviewee and/or the reporter listening while the questions are answered Microphones If you're using a handheld microphone, hold it about 5-6 inches below the person's mouth, while also making sure that the microphone is not in the frame of your shot. And tell them to try to ignore the mic and concentrate on the camera. If it's noisy, then use a lavalier clip-on microphone to reduce the ambient sound. But watch for necklaces or chains on a person's neck, or buttons on a shirt, that could rub against the lav mic and create noise. With a lav mic, you'll need to "dress the mic" - properly attach it to the person you're interviewing Ask the person to run the cord to the lav mic up the inside of their shirt (so the wire won't show in your video). Then clip the mic to the outside of their shirt, about 5-6 inches below their mouth. Try to center the mic as much as possible. If you have it too far to one side, it won't pick up the audio well if the person then tilts his/her head to the other side while talking. Use this same procedure if the person is wearing a t-shirt, running the cord up under the shirt and clipping the mic near the top of the shirt. If the person has a necktie, run the wire down the back of the necktie and through the little label on the bottom back of the necktie. If it's windy, the lav mic will pick up the sound of the wind. In this case try to clip the mic closer to the person's mouth, or switch to a hand-held microphone with a windscreen on it that muffles the noise of the wind. Previous Next Avoid High Contrast in Lighting usually best to shoot with the sun to your back If the sun is directly overhead, hold your hand over the top edge of the camera lens. This will in effect extend the sun screen and avoid having the camera misread the amount of sunlight. Using Manual Exposure most difficult lighting situations should be solved first by changing the position of the camera or the subject - such as not shooting into direct sunlight. One example of when you will have to set manual exposure iis on a bright day where there's lots of movement and light contrast in front of your camera, such as buses passing by with large billboards on their sides that reflect the bright sunlight. The camera then will open and close its exposure in response to these changes or when bright light is behind a person and you cannot move them In these cases, aim your camera at the light setting you want for your shot and then switch from auto to manual exposure. For example, if you're shooting an interview with someone, zoom in on the person's face, hold the shot there and then switch from auto to manual exposure. The camera then will retain or lock in whatever setting you selected throughout your shoot, despite any changes in the lighting. Get All the Shots You Need start with an establishing shot A-roll is the main subject of your shot, invariably with audio such as an interview with someone. B-roll is the background video for your film, often just video over which you'll lay an audio track (such as the person talking in the A-roll). So don't forget to shoot a variety of B-roll. Another type of shot to look for is natural sound (called "nat sound"). This is film that has some natural background noise - traffic on a street, birds chirping in a park, etc. This audio can add depth and impact to a two-dimensional video tape. Label Your Tapes Keep each mini-DV tape in its plastic box to avoid dust getting into the tape. You can shift the little white switch on a tape from record mode to save mode to avoid accidentally recording over a tape on which you already have video.

independent study

Saturday, April 28, 2007

web usability notes

No comments:

About Me

My Web Sites

Blog Archive

Notes on Multimedia

Notes on Shooting Video Tips