Page Comparison

Plan before you start

1. Ask who is the user? What are they looking for? When do they need this information? Why?
2. Develop a sample user profile summary.
3. Gather workflow and task requirements.

Choose best practices

1. Design for probability not possibility. What works? Are there other resources/ other UC's? What kind of standards are we using?
2. Outline the current process (Visio, Word, etc.).
3. Create a navigational model and/or prototype of the new process.
4. Choose phases of the new process if you can't accomplish everything by the deadline.

Design and prototype screens

1. Prototype screens with the end user to quickly develop functional and intuitive interfaces.
2. Is it clear how to navigate, view, update, delete data?
3. How many clicks does it take?
4. Continue working closely with the end-users.

If you use the SNAP GUI template

1. Implement the SNAP the consistent style sheets or Portal style sheets, header and footer for your basic template. Refer For Portal applications, refer to How to Use GUI Templates for coding instructions.
2. Make sure your application is WebAuth enabled.
3. Group 'help' topics together, i.e., any user guides, demonstrations, or documentation.
4. If your application uses tabs, limit them to between 6 and 8. If you feel you need more, maybe you should rethink your design.

5. Spell out tab names (no abbreviations). Do not use ALL CAPS. Use sentence case. Example: Name.

1. It is recommended that you use icons.  Refer to the reserve icon list .
2. Check the SNAP the Portal writing style guide for consistent language.

Develop system and review form guidelines

1. Left align columns are for text. Money (currency) should always be right aligned.
2. Minimize columns to two.
3. Guide the user to help. For example, use an icon where the user may need further instruction.
4. Field labels on forms should be aligned to the left for easier scanning and be readable from top to bottom. In addition, the labels should be brief so that users can see the label and understand its meaning.
5. Review the GUI Manual for detailed instructions.
6. Obtain regular acceptance test signatures with your end users to verify system functionality against requirements.

Make your layout easy to follow

1. Use limited action verbs for command buttons. For example: Search or Go.
2. Limit the use of command buttons. Keep them at the bottom. The common action should be listed first. If you have more than 2 options, re-think your formatting.
3. Keep scrolling to a minimum.
4. Error messages: Give the user an escape route and/or someone to contact. If possible, the error should be displayed as the user is filling out the form, not once they have submitted it. If this isn't possible, review the GUI Manual for detailed instructions.
5. For more information about layout design, review the GUI Manual.

• Images and animations. Use the Alt attribute to describe the function of each visual.
• Image maps. Use the client-side map and text for hotspots.
• Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
• Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."
• Page organization. Use headings, lists, and consistent structure. Use CSS (cascading style sheets) for layout and style where possible.
• Graphs and charts. Summarize or use the longdesc attribute.
• Scripts, applets, and plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
• Frames. Use the noframes element and meaningful titles.
• Tables. Make line-by-line reading sensible. Summarize.
• Check your work. Validate. Use tools, checklist, and guidelines.