Thursday, October 22, 2009
The Importance of Meaningful Communication - A Talk
Here are the details of a talk I will soon be giving entitled 'The Importance of Meaningful Communication'.
Friday, March 14, 2008
5 ways to integrate text and pictures
Redundancy - image and text give the same information, we can get rid of one and the same message will still be relayed to the viewer. E.g. Photo of boy with lolipop - caption "boy with lolipop".
Complementary - we need both image and text to understand the concept. e.g. a flatpack furniture assembly manual normally contains both textual instructions AND diagrams - without the diagrams it would be extremely hard to follow the instructions.
Supplementary - most information is contained in one of the formats (image/text). For example the image might 'supplement' the information given in the text. In a newspaper article about war, the bulk of the information might be contained in the text itself, but a photograph showing a wounded soldier would supplement the text.
Juxtapositional - there's a clash of ideas between the information presented in each format, using irony in many cases to get the message across. For example an ad campaign for a political party - image of a bright sunny beach with "Life is Great!" logo, text beside talking about problems with the current government.
Stage setting - one mode 'sets the stage' for the other mode. E.g. an image at the start of a chapter of a children's book sets the stage for what that chapter is about.
Complementary - we need both image and text to understand the concept. e.g. a flatpack furniture assembly manual normally contains both textual instructions AND diagrams - without the diagrams it would be extremely hard to follow the instructions.
Supplementary - most information is contained in one of the formats (image/text). For example the image might 'supplement' the information given in the text. In a newspaper article about war, the bulk of the information might be contained in the text itself, but a photograph showing a wounded soldier would supplement the text.
Juxtapositional - there's a clash of ideas between the information presented in each format, using irony in many cases to get the message across. For example an ad campaign for a political party - image of a bright sunny beach with "Life is Great!" logo, text beside talking about problems with the current government.
Stage setting - one mode 'sets the stage' for the other mode. E.g. an image at the start of a chapter of a children's book sets the stage for what that chapter is about.
newspaper design analysis
On http://www.smashingmagazine.com/2008/02/11/award-winning-newspaper-designs/ we get a good example of some extremely well designed modern newspapers.
My personal favourite is the first one on the list: elEconomista (Madrid, Spain).
The layout is quite complex, yet never looks cluttered - for example on some pages, the text flushes to the shapes of the images (not justified as would normally be the case), yet the 'neatness' of the layout doesn't suffer as a result. The colours are bright without being gaudy - the use of orange, green, black and white as their signature colours is quite daring, but they pull it off extremely well. The shade of green they use tones down the orange, and balances the color scheme perfectly. Expert use of white-space makes everything appear clean and readable.
On http://www.berkeley.edu/news/berkeleyan/2007/01/17_newspapers.shtml we see an example of a newspaper printed in San Fransisco in the 1900's. Interestingly, the layout style is very similar to that of most newspapers printed today, newspaper designers ultimately follow the same basic rules when designing newspapers today as they did back then. Of course designers back then didn't have the luxury of colour ink, all papers up until
My personal favourite is the first one on the list: elEconomista (Madrid, Spain).
The layout is quite complex, yet never looks cluttered - for example on some pages, the text flushes to the shapes of the images (not justified as would normally be the case), yet the 'neatness' of the layout doesn't suffer as a result. The colours are bright without being gaudy - the use of orange, green, black and white as their signature colours is quite daring, but they pull it off extremely well. The shade of green they use tones down the orange, and balances the color scheme perfectly. Expert use of white-space makes everything appear clean and readable.
On http://www.berkeley.edu/news/berkeleyan/2007/01/17_newspapers.shtml we see an example of a newspaper printed in San Fransisco in the 1900's. Interestingly, the layout style is very similar to that of most newspapers printed today, newspaper designers ultimately follow the same basic rules when designing newspapers today as they did back then. Of course designers back then didn't have the luxury of colour ink, all papers up until
Friday, December 14, 2007
An overview of user experience in relation to multimedia design
User experience is a wide field incorporating marketing, computing and psychology. User experience governs overall experience and measures satisfaction with a system.
It's important to focus on user experience when designing multimedia, as a good user experience will encourage repeat buys/visits.
Designing a good user experience involves firstly mapping out the sequence of events required to complete the task. E.g. A user, using amazon.com, wants to find a book on actionscript - they might perform a search on the word 'actionscript'; From the list presented, they might look at the star ratings of user reviews to help them decide which one to go for; Then they might click a link for a particular book to discover more about that book - contents, reviews, etc.
This sequence of events should be storyboarded by the system designer, to graphically represent the tasks involved.
When considering user experience, identifying unnecessary steps in the task sequence is also very important. Uneeded steps will frustrate the user, and might cause them to give up on your system/product. Using the amazon.com example, if you had to click a book's link to view it's price (i.e. it wasn't just displayed in the list returned by the search), it would make it a very frustrating experience for the user as they wouldn't be able to easily compare prices of the list of actionscript books displayed to them. The less time it takes for the user to access the information they want on amazon.com, the better the user experience.
It's important to focus on user experience when designing multimedia, as a good user experience will encourage repeat buys/visits.
Designing a good user experience involves firstly mapping out the sequence of events required to complete the task. E.g. A user, using amazon.com, wants to find a book on actionscript - they might perform a search on the word 'actionscript'; From the list presented, they might look at the star ratings of user reviews to help them decide which one to go for; Then they might click a link for a particular book to discover more about that book - contents, reviews, etc.
This sequence of events should be storyboarded by the system designer, to graphically represent the tasks involved.
When considering user experience, identifying unnecessary steps in the task sequence is also very important. Uneeded steps will frustrate the user, and might cause them to give up on your system/product. Using the amazon.com example, if you had to click a book's link to view it's price (i.e. it wasn't just displayed in the list returned by the search), it would make it a very frustrating experience for the user as they wouldn't be able to easily compare prices of the list of actionscript books displayed to them. The less time it takes for the user to access the information they want on amazon.com, the better the user experience.
Usability vs Usefulness
Usefulness measures how the product matches user needs, how relevant the product is to the user. Usability is a measure of how easy the product is to use.
My mobile phone is useful because it has an alarm clock. It's usable because it's easy to navigate to the alarm clock (by accessing main menu).
My mobile is a nokia 3210, I find that nokia phones are the most usable on the market as they have a very simple and easy navigation system and user interface.. and this system is pretty much standard throughout their range of phones, so that if you know how to use one type of nokia phone, you'll generally be able to use any other type.
My mobile lacks some useful features such as a camera or video. But the basic features it does have are very easy to use - i.e. I would give it a high usability rating, but maybe a lower usefulness rating because it lacks some of the features I would like to have, such as a camera.
My mobile phone is useful because it has an alarm clock. It's usable because it's easy to navigate to the alarm clock (by accessing main menu).
My mobile is a nokia 3210, I find that nokia phones are the most usable on the market as they have a very simple and easy navigation system and user interface.. and this system is pretty much standard throughout their range of phones, so that if you know how to use one type of nokia phone, you'll generally be able to use any other type.
My mobile lacks some useful features such as a camera or video. But the basic features it does have are very easy to use - i.e. I would give it a high usability rating, but maybe a lower usefulness rating because it lacks some of the features I would like to have, such as a camera.
Choosing a typeface: website vs poster
Website:
Serif vs San Serif
In websites it's better practice to use a San Serif font - such as arial - as it improves legibility on-screen (typefaces with delicate serifs may display irregularly).
Typeface characteristics
Size - consider that the user sits quite close to the screen - 10-14 point typeface should be large enough. Also consider target audiences - people who are visually impared will need the font size to be higher (accessiblity considerations).
Emphasis - Avoid italics - it's hard to read onscreen. Avoid underlining as it can give the impression that the text is a hyperlink. If you need to emphasise, increase the weight (i.e. make bold) or size of the type.
Spacing - Choose a type face that uses proportional spacing - it has higher visibility. Note: proportional spacing takes into consideration the fact that for example the letter 'i' takes up less space than the letter 'w' - as opposed to fixed width spacing where letter spacing is the same for all characters regardless of width or shape.
Justification - Don't fully justify text, always left justify paragraphs as it increases reading speed.
Leading (vertical space between lines of text) - should be about 15% of the size of the the font face.
Alignment - grid structures on a website are a good way of organising information as it is a type of layout that makes it easier for the user to scan through content quickly and easily. Minimise the number of alignment points onscreen - Don't jump between alignment types, for example left alignment to centered alignment within one block of content, keep it consistent.
Density - make good use of whitespace as it increases legibility, the screen should not appear crowded. As a general rule of thumb, overall density should be no greater than 30% of screen area.
Standing out - avoid 'gaudiness' for example black text against yellow background to make text standout on a website. This is more appropriate for road signs! Instead use, for example drop shadows or distinct outlines around text.
Control fields - isolate important content from the background, so that it doesn't 'get lost' or blend in. For example providing a shape around a logo makes it stand out, and gives a distinctive 'branding'. In essence, it's like putting a picture frame around a picture to help it visually stand out.
Poster:
Serif vs San Serif
There aren't the same issues with using Serif fonts on a poster as there are on a website. Sometimes serif fonts can actually improve readability when printed on paper.
Typeface characteristics
Size - Should be large enough to read from a distance - title should be extra large to catch attention. In general size of typeface would be a good bit larger than that of a website.
Emphasis - It's ok to use italics on posters for emphasis, as there aren't the same issues as there are with reading onscreen. But use emphasis consistently. Don't mix and match.. e.g. the following example would be overkill on a poster: It's important to emphasize with changes in typeface
Spacing - same rules generally apply as for websites
Justification - In contrast with websites, fully justified text can be used on posters, especially if the poster is divided into blocks of content. The rules aren't as strict as they would be for websites. Infact full justification can help the appearance of the poster.
Leading - same rules generally apply as for websites
Alignment - same rules generally apply as for website. However, for example center alignment of all text on a website would be a bad thing, however on a poster, it might be appropriate.
Density - there should a lot of whitespace used in posters, maybe even moreso than on websites, as the information should be more concise and to the point.
Standing out - gaudiness is sometimes ok for posters (as opposed to websites) as it grabs a persons attention - e.g. black text against a yellow background. It won't 'hurt' the eyes as the person won't be looking at it for as long.
Control fields - same rules apply as for websites - isolate important information, such as logos, using control fields in your poster.
Serif vs San Serif
In websites it's better practice to use a San Serif font - such as arial - as it improves legibility on-screen (typefaces with delicate serifs may display irregularly).
Typeface characteristics
Size - consider that the user sits quite close to the screen - 10-14 point typeface should be large enough. Also consider target audiences - people who are visually impared will need the font size to be higher (accessiblity considerations).
Emphasis - Avoid italics - it's hard to read onscreen. Avoid underlining as it can give the impression that the text is a hyperlink. If you need to emphasise, increase the weight (i.e. make bold) or size of the type.
Spacing - Choose a type face that uses proportional spacing - it has higher visibility. Note: proportional spacing takes into consideration the fact that for example the letter 'i' takes up less space than the letter 'w' - as opposed to fixed width spacing where letter spacing is the same for all characters regardless of width or shape.
Justification - Don't fully justify text, always left justify paragraphs as it increases reading speed.
Leading (vertical space between lines of text) - should be about 15% of the size of the the font face.
Alignment - grid structures on a website are a good way of organising information as it is a type of layout that makes it easier for the user to scan through content quickly and easily. Minimise the number of alignment points onscreen - Don't jump between alignment types, for example left alignment to centered alignment within one block of content, keep it consistent.
Density - make good use of whitespace as it increases legibility, the screen should not appear crowded. As a general rule of thumb, overall density should be no greater than 30% of screen area.
Standing out - avoid 'gaudiness' for example black text against yellow background to make text standout on a website. This is more appropriate for road signs! Instead use, for example drop shadows or distinct outlines around text.
Control fields - isolate important content from the background, so that it doesn't 'get lost' or blend in. For example providing a shape around a logo makes it stand out, and gives a distinctive 'branding'. In essence, it's like putting a picture frame around a picture to help it visually stand out.
Poster:
Serif vs San Serif
There aren't the same issues with using Serif fonts on a poster as there are on a website. Sometimes serif fonts can actually improve readability when printed on paper.
Typeface characteristics
Size - Should be large enough to read from a distance - title should be extra large to catch attention. In general size of typeface would be a good bit larger than that of a website.
Emphasis - It's ok to use italics on posters for emphasis, as there aren't the same issues as there are with reading onscreen. But use emphasis consistently. Don't mix and match.. e.g. the following example would be overkill on a poster: It's important to emphasize with changes in typeface
Spacing - same rules generally apply as for websites
Justification - In contrast with websites, fully justified text can be used on posters, especially if the poster is divided into blocks of content. The rules aren't as strict as they would be for websites. Infact full justification can help the appearance of the poster.
Leading - same rules generally apply as for websites
Alignment - same rules generally apply as for website. However, for example center alignment of all text on a website would be a bad thing, however on a poster, it might be appropriate.
Density - there should a lot of whitespace used in posters, maybe even moreso than on websites, as the information should be more concise and to the point.
Standing out - gaudiness is sometimes ok for posters (as opposed to websites) as it grabs a persons attention - e.g. black text against a yellow background. It won't 'hurt' the eyes as the person won't be looking at it for as long.
Control fields - same rules apply as for websites - isolate important information, such as logos, using control fields in your poster.
Friday, November 23, 2007
Useable Product - Digital Voice Recorder
Digital voice recorder - Olympus VN-2100PC Digital Voice Recorder - present for my dad.
- Easy to use for 'technophobes' - simple button interface
- Hooks up to pc with usb, records mp3s (small file sizes),
- four different audio quality settings,
- built in mic but you can also plug in your own (for better audio quality),
- Large LCD screen,
- can arrange audio files into folders,
- integrated speaker
- pocket size
- slow playback mode (facilitates typing transcripts)
Subscribe to:
Posts (Atom)