Differences between revisions 11 and 12
Revision 11 as of 2010-11-23 04:21:00
Size: 3507
Editor: shoobe01
Comment:
Revision 12 as of 2010-11-23 04:21:12
Size: 3501
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 7: Line 7:
Pages and elements or content sections within a page should almost always labeled. Pages and elements or content sections within a page should almost always labeled. Pop-ups and other free-standing elements should have titles similar to the page level title.
Line 9: Line 9:
Pop-ups and other free-standing elements should have titles similar to the page level title.

Titles must be used in a consistent manner, in size, location, content, and style.

The simplest method for pages is a straightforward title bar, which is shown in all the page diagrams in the book.
Titles must be used in a consistent manner, in size, location, content, and style. The simplest method for pages is a straightforward title bar, which is shown in all the page diagrams in the book.

Problem

Every key element should be labeled to make context or process completion clear.

Titles should always be attached to free-standing elements, such as pages, windows or Pop-Ups. Follow the OS design guidelines for the use of title bars.

Solution

Pages and elements or content sections within a page should almost always labeled. Pop-ups and other free-standing elements should have titles similar to the page level title.

Titles must be used in a consistent manner, in size, location, content, and style. The simplest method for pages is a straightforward title bar, which is shown in all the page diagrams in the book.

Variations

Except for very odd designs, always a horizontal bar or space with title in text.

Can include icons. Try not to be needlessly repetitive and use a more specific icon. For example, if a popup then don't repeat the app icon if the window behind is clearly the app. Either display nothing, or use the space for icons that indicate the state, such as an error triangle if there's an error.

Subsidiary titles are text, but can be stylized to be boxed, indented etc.

If the OS calls for it, the title of the running application may be displayed in a special title style. If so, there is no need to repeat the application name within the page title area. In some cases, the application title bar may disappear shortly after the application is loaded.

Build all content with a hierarchy, and title sections to follow and express this to the end user.

Interaction Details

Generally none. Sometimes clicking a title does something, like jumps to home... Should this be a pattern or just a note it can do stuff... Anything it does should be related to the title bar, like jumping to top, not something random, and should be OS-wide if possible.

PAGE title does that... individual section titles can be links to subsidiary info. If so, don't hide it. Underline or otherwise make it clear this is a target.

Presentation Details

Design should follow the OS guidelines, whenever possible. Even if significant changes are required for unique branding of your product, make title bars of similar size, shape and position to the rest of the OS.

Basically, go hire a writer or at least pick up a style guide. But in short...

Label everything similarly. Use the same voice, and tense, and capitalization (sentence vs. title case), and so on.

Hierarchy of presentation... Design the whole product around a simple hierarchy, and stick to it. Don't go too deep.

Just like H level elements in HTML (H1, H2...) there are similar title and other display hierarchies built into native OS development kits. Often, as with semantic web concepts, these have default attributes assigned which can be useful when building the product and can add value to the user experience. Even if additional styles are imposed, try to use these basic attributes as the first definition level.

Indenting and how to make it not too deep so it wastes space... Mostly left aligned.

Antipatterns

Avoid jargon. Etc.

Do not repeat content; if the application is described adequately, do not repeat the application name in a subsidiary page or Pop-Up title.

Check all content, not just those in the primary path, or that got mocked up. Errors can be frustrating, etc.

F

Examples

Titles (last edited 2014-05-05 14:27:19 by shoobe01)