Using Text in MM Inform the user, where to go, how to navigate through the project, and what will...
-
Upload
kristina-garrison -
Category
Documents
-
view
214 -
download
0
Transcript of Using Text in MM Inform the user, where to go, how to navigate through the project, and what will...
Using Text in MM Inform the user, where to go, how to
navigate through the project, and what will you see when you get there
Title and Headlines: What's it all about
Menus: Where to go Navigation: How to get there Content: What you see when you get
there
Text A MM principle: it is important to design
labels for title screens, menus, & buttons using words that have the most precise and powerful meanings to express what you need to say Examples:
Quit/close, Terrific/the answer was correct
Test the design by letting others try to find out what you mean.
You may want to use thesaurus
More Text Using
Dual Role:
Visual representation of message
Graphical Element
Fonts Is a collection of characters of the same
size, style and belonging to a particular typeface family Typical font styles: Bold, italic, & underline Size measured with points (point = 1/72’) Typeface--A family of graphic characters
Color
Arial
Courier
Times
Other Terminology Serif and sans serif: the little decoration at the end of a
letter stroke Leading
Kerning
Character metrics: measurements applied to individual characters
Case--upper or lower
Leading
Text Leading
Leading specifies the amount of vertical space between lines of text
Measured in either zero or positive points
Greatness is not found in possession, power, position or prestige. It is discovered in goodness, humility, service and character.
Greatness is not found in
possession, power, position
or prestige. It is discovered
in goodness, humility,
service and character.
PIXEL (.ppi aka .dpi)Measurement for monitor resolution# of pixels per inch of monitor displayA display setting of:
1280 x 1024 has 1.3 million DPI, 800 x 600 has 480,000 DPI
POINT (.dpi)Measurement for printer resolution# of dots per inchAbsolute type size - usually used in printingHigher dpi = better resolutionPoints are a print unit of measure (used with Word processing software
Text Size
NOTE: A point size of 72, will always give you a font that is
one inch high when printed.If you sent this MS Word Document to a printer and measured between the lines, it would be one inch. For print it doesn’t matter if you print from a Windows machine or a Mac, a 72 point font size on paper is always one inch high.
Text Size: Points – when printing
PIXELWindows machines are set at 96 dpiMacintosh machines are set at 72 dpi
PC 1/6 of 96 = 16 (25% larger)
Mac 1/6 of 72 = 12 (smaller)
Text Size: Pixels – when viewing on a monitor
Creating Your Own Type: ResEdit on Mac
Creating Your Own Type:Fontographer
Designing with text I
Use legible (مقروء) text for small letter typing and don’t use decorative text in this case
Use as few different type faces (fonts) as possible in the same work, you may change the size or style
In text blocks adjust the line spacing & avoid tightly packed lines (difficult to read)
Designing with text II
Vary the size according to the importance of the text
In large headlines it is important to adjust spacing between letters (unkerend)
Explore different font colors and various backgrounds
Use drop caps and initial caps to accent ((توكيد your words
Choosing Text Fonts III Minimize number of centered lines in a
block of text To bring the attention, use graphically
altering of the text Surround headlines with white spaces Use meaningful words Bold or emphasize text to highlight ideas
or concepts Distinguish text links with colors and
underlining
Navigations
In designing your system, the test for good navigation design is:
The user never needs help to get to a particular destination
Menus for Navigation
Avoid using more than few levels in menus especially if you don't provide a map or a way out
Use short words rather than long phrases or sentences. Example:
play video can be shortened to video press quit can be shortened to quit
Buttons for interaction There are three types of buttons: text,
graphics, and icon Rules of text selection apply to text buttons There are automatic button-making tools.
Making the buttons from bitmap gives flexibility in designing buttons
Default buttons are good because the users will know exactly what to do with them
Fields for reading People prefer reading a hard copy rather
than reading from screens, thus take the following in consideration Try to minimize number of paragraphs per
page Use a font that is easy to read rather than
pretty font Try to have a whole paragraph and avoid
breaks where user have to go back and forth
Hypermedia
Hypermedia is a multimedia designed with links through which the user can navigate and interact.
It is applied to text( coming next) and to images.
A complete picture can be decomposed and viewed as small parts with more details.
Examples: Multimedia maps. Human body.
Hypertext
Hypertext is a way of linking words to other words.
Used especially when the amount of text and symbolic content in the project is large.
Help in retrieving information in a fast, nonlinear and intuitive way.
Using hypertext system, we can electronically search the text for important
words, locate reference to these words, and then immediately view the pages containing them.
Hypertext
Authoring systems incorporate hyperlink facilities that allows identifying words (hot words) then link them to other words, pages or activities such as playing a sound or a video.
This powerful tool need to be designed so that they make sense.
Hypertext and hyper images are what the world wide web is all about.
Lost in Hyperspace ?
where am I ? how did I get here ? what can I do here ? where can I get to ? how do I go there ? what have I seen so far ? where else is there for me to see ?
Creating a hypertext link in Director To turn any selected range of text into a hypertext link that
links to a URL or initiates other actions we do the following:1. Select the text you want to define as a hypertext link.2. Open the Text inspector.3. In the Hyperlink text box, enter the URL to which you want to link, or enter any message you want to send to the on hyperlinkClicked handler then press enter. For example:
property spriteNumon hyperlinkClicked(me, data, range)
if data starts "http//" then gotoNetPage(data) end if end
Designing for Interactivity
Electronic media do not existin a legal or societal vacuum
• They may have broad impact, effects,and implications.
• They are subject to the customs, rules,and laws of society.
• However, currently untested legalimplications arise from various forms ofelectronic publishing --
• And we live in an increasingly litigioussociety.
Electronic Media -- Vacuum
• impact, effects, and implications• customs, rules, and laws• untested legal implications• litigious society
Edit Text Edit Text
for Clarityfor Clarity
Too cryptic Clear and understandable
Designing for Interactivity I
Typeface
•An Important Message–conveys mood
–communicates attitude
•Reader Understanding–can help, or
–can hinder
Distracting Clear
Limit the Number of Fonts and Type SizesLimit the Number of Fonts and Type Sizes
TypefaceTypeface• An Important Message
– Conveys mood– communicates attitude
• Reader Understanding– Can help, or– Can hinder
Designing for Interactivity II
Use Simple, Clear FontsUse Simple, Clear Fonts
DistractingClear
Uses of Typel Serif type
– works well in smaller sizes, especially in the body of text
– looks busy and cluttered when used in large sizes
l Sans-serif– ideal for large headlines and other displays– difficult to read in long blocks of text– Looks best when surrounded by lots of white space
Uses of Typel Serif type (for example, Palatino)
– works well in smaller sizes, especially in the body oftext
– looks busy and cluttered when used in large sizes
l Sans-serif (for example, Arial Narrow)– ideal for large headlines and other displays– difficult to read in long blocks of text– Looks best when surrounded by lots of white space
Designing for Interactivity III
For Further ReadingMarr, David (1982). Vision: A computational
investigation into the human representation andprocessing of visual information. Freeman: SanFrancisco.
Parker, Roger (1993). Looking good in print: A guide tobasic design for desktop publishing (3rd Edition).Ventana Press: Chapel Hill, NC.
Peretz, Isabel (1993). Auditory agnosia: A functionalanalysis. In S. McAdams & E. Bigand (Eds.),Thinking in sound: The cognitive psychology ofhuman audition (pp. 199-230). Oxford UniversityPress: Oxford.
Porkorney, Cornel & Gerald, Curtis (1989). ComputerGraphics: The principles behind the art and science.Franklin, Beedle & Associates: Irvine, CA.
For Further ReadingMarr, David (1982). Vision: A computational investi-
gation into the human representation and process-ing of visual information. Freeman: San Francisco.
Parker, Roger (1993). Looking good in print: A guideto basic design for desktop publishing (3rd Edi-tion). Ventana Press: Chapel Hill, NC.
Peretz, Isabel (1993). Auditory agnosia: A functionalanalysis. In S. McAdams & E. Bigand (Eds.),Thinking in sound: The cognitive psychology of hu-man audition (pp. 199-230). Oxford UniversityPress: Oxford.
Porkorney, Cornel & Gerald, Curtis (1989). ComputerGraphics: The principles behind the art and sci-ence. Franklin, Beedle & Associates: Irvine, CA.
Avoid Hyphenation and UnderlinesAvoid Hyphenation and Underlines
Distracting Clear
Designing for Interactivity IV
Avoid Avoid Excessive Excessive and and Improper Improper Use Use of of CCoolloorr
• Limit colors to three or fewerLimit colors to three or fewer• Use a plain, contrasting backgroundUse a plain, contrasting background• Use bright colors for foregroundUse bright colors for foreground• Use pale colors for backgroundUse pale colors for background• Be sure colors will appear correctly on the user’s screenBe sure colors will appear correctly on the user’s screen• Avoid clashing colorsAvoid clashing colors
Designing for Interactivity V
Use Dark Type on a Light BackgroundUse Dark Type on a Light Background
Easier to read Harder to read
Text
For example
CD-ROM educational titles aimed at preschoolers would have little text, while adult educational titles such as foreign language studies might rely heavily on text
Use of text in multimedia applications varies on:
The type of application Educational, Entertainment, Business
Audience ie. Children, teens, adults, Elderly, ESL
SerifTailsScriptBody paragraphs: used for documents or screens that have large quantities of textTimes Roman, Courier New, Century Schoolbook, Palatino
Sans-SerifNo tailsBlock-orientedHeadings, titlesArial, Verdana, Helvetica, Arial Black, Comic Sans MS
Font Types
Fun Fonts
Try out this website http://www.fontscape.com/explore?7AR
More Examples
No Kerning
Kerning (244)
When designing a MM application, think about:
Contrast
Alignment
Proximity
Repetition
Avoid making 2 elements just similar, either make them the same (same font, color, etc…) or make them VERY different.
Items are aligned - creates stronger cohesive unit
Group related items together
Repeat some aspect of the design throughout the entire design i.e. Bold font, thick rule, bullet, colors, font types
Design Considerations: CONTRAST
Cool Quotes•See everything, overlook a great deal, improve a little.
•Between two evil, choose neither; between two good, choose both.
•Give with no strings attached, and you will receive in the same manner
See everything, overlook a great deal, improve a little.
Between two evil, choose neither; between two good, choose both.
Give with no strings attached, and you will receive in the same manner
Cool Quotes
Design Considerations: CONTRAST
Design Considerations: ALIGNMENT
Fun Things for a Professor to do the First Day of
Classes:
Ask students to call you "Tinkerbelle" or "Surfin' Bird".
Growl constantly and address students as "matey".
Show a video on medieval torture implements to your calculus class. Giggle throughout it.
by Alan Meiss
Fun Things for a Professor to do the First Day of Classes:
Ask students to call you "Tinkerbelle" or "Surfin' Bird".
Growl constantly and address students as "matey".
Show a video on medieval torture implements to your calculus class. Giggle throughout it.
by Alan Meiss
This is Okay But this looks better!
Examples from: “The Non-Designer’s Design Book by Robin Williams
Design Considerations: ALIGNMENT
Design Considerations: PROXIMITY
What do you think when you look at the second box compared to the first box?
Remember Physically grouping things together implies a relationship
The MenuEggs BenedictPecan Crusted TroutSteak and Kidney PieApple CrispCheese FondueMacaroni and CheeseStrawberry CheesecakeLemon MousseCaesar SaladRoast Chicken
The MenuEggs BenedictPecan Crusted TroutSteak and Kidney PieCaesar Salad
Roast ChickenCheese FondueMacaroni and Cheese
Strawberry CheesecakeLemon Mousse
Apple Crisp
Examples from: “The Non-Designer’s Design Book by Robin Williams
Design Considerations: PROXIMITY
Design Considerations: REPETITION
Repetition of Bullet type Spacing Light text Heavy text Alignment Indentation
Brad PittMovies
Thelma and LouiseLegends of the FallOceans Eleven
RelationshipsGwyneth PaltrowJennifer AnistonAngelina Jolie
ChildhoodBirthday: December 18, 1963Born: Shawnee, Oklahoma
Design Considerations: REPETITION What repetition can you see in this Microsoft web page?
Text and Graphics
Consider the form as well as functionality The user clicks on each of the boxes to reveal an animation and a text description of that stage. Functionality helpful, but the grey color background is boring
Navigation Strategies
Linear Hierarchical
Hypermedia Composite
Both boxes above say the same thing.
Which design do you like better?
Can you put your finger on what makes one “Better” than the other.
Before we begin building websites, let’s get some design basics:
Good Design Is As Easyas 1-2-3
1. Learn the principles.They’re simpler than you might think
2. Recognize when you’re not using them.Put it into words – name the problem.
3. Apply the principles.You’ll be amazed.
Good Designis as easy as . . .
Learn the principlesThey’re simpler than you might think
Recognize when you’re not using them.Put it into words – name the problem.
Apply the principles.You’ll be amazed.