User Interface

User experiences for uPortal should be:

1. Useful. As practitioners, we can't be content to paint within the lines drawn by managers. We must have the courage and creativity to ask whether our products and systems are useful, and to apply our deep knowledge of craft and medium to define innovative solutions that are more useful.
2. Usable. Ease of use remains vital, and yet the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of web design. In short, usability is necessary but not sufficient.
3. Desirable. Our quest for efficiency must be tempered by an appreciation for the power and value of image, identity, brand, and other elements of emotional design.
4. Findable. We must strive to design navigable web sites and locatable objects, so users can find what they need.
5. Accessible. The concept that any user can access all the content of a Web document, including people with disabilities (more than 10% of the population). It's good business and the ethical thing to do, and it's the law.
6. Credible. Thanks to efforts like the Web Credibility Project, we're beginning to understand the design elements that influence whether users trust and believe what we tell them.
7. Valuable. Our sites must deliver value to our sponsors. For non-profits, the user experience must advance the mission. With for-profits, it must contribute to the bottom line and improve customer satisfaction.

Adapted from Peter Morville's User Experience Honeycomb.

User interfaces developed for uPortal and portlets should follow Web Development best practices. The starting point in best practice is "Web Standards".

Web Standards

Web standards are technologies and the guidelines and specifications for technologies, established by the World Wide Web Consortium (W3C) and other standards bodies, which are used to create and interpret Web-based content. The Web Standards Project (WasP) provides a good description of Web Standards.

A brief summary of the merits and benefits of Web standards includes:

• Simpler development and maintenance: Using more semantic and structured HTML makes it easier and quicker to understand code created by somebody else.
• Compatibility with future Web browsers: When you use defined standards and valid code you future-proof your documents by reducing the risk of future Web browsers not being able to understand the code you have used.
• Faster download and rendering of Web pages: Less HTML results in smaller file sizes and quicker downloads. Modern Web browsers render pages faster when they are in their standards mode than when they are in their backwards-compatible mode.
• Better accessibility: Semantic HTML, where structure is separated from presentation, makes it easier for screen readers and alternative browsing devices to interpret the content.
• Better search results: The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic markup this will improve search results.
• Simpler adaptation: A semantically marked up document can be easily adapted to print and alternative browsing devices, like handheld computers and cellular phones, just by linking to a different CSS file. You can also make site-wide changes to presentation by editing a single file.

A Web Standard Document

A document is said to adhere to Web standards when it complies with the guidelines and specifications set forth for the technologies used in the document. According to Web standards bodies like the Web Standards Project (WaSP), a Web document should use:

• Structural Semantic Markup Languages (HTML/XHTML) for structure
• Presentation Languages (CSS) for presentation
• Object Models (DOM) for objects
• Scripting Languages (ECMAScript 262/JavaScript) for scripting

Principles

Several key principles have emerged alongside the advent of Web Standards that are considered best practices:

• User-centered Design
• Semantic Markup, or the Separation of Presentation and Content
• Web Accessibility
• Unobtrusive Scripting
• Web Credibility

Fluid Project Design Handbook

The Fluid Project maintains a Design Handbook, a valuable resource on design and development best practices, including a section on Accessibility Resources: resources for Web and DHTML accessibility from both the design and technical perspectives.

Theme

• Theme

Skins

• Skins

XML/XSLT

uPortal uses XSLT to transform XML output from the Java code into HTML markup.

uPortal's rendering process uses two XSL transformations:

1. Structure Transform
2. Theme Transform

HTML

uPortal's Rendering Process outputs XHTML markup.

• Portlet Markup Template

CSS

uPortal uses CSS to visually format and style the page markup.

• uPortal Markup and CSS Naming Conventions
• uPortal has adopted the Fluid Skinning System CSS library.
• uPortal supports the JSR-168 PLT.C CSS Style Definitions as much as is possible.

JavaScript

uPortal uses JavaScript to enhance user interactions.

• uPortal has standardized on jQuery JS library.
• JavaScript should be used unobtrusively.

• User Interface
• Rendering Process
• Theme
• Skins

User Experience Goals (uPortal)

Design Concepts (uPortal)

User Experience (uPortal)

Markup and CSS Naming Conventions (uPortal)

Accessibility (uPortal)

Rendering Process (uPortal)

Skins (uPortal)

User Interface (uPortal)

Theme (uPortal)

Theme Configuration (uPortal)

• W3C
• Web Standards Project
• Web Accessibility Initiative (WAI)
• Web Credibility Project
• WSRP Specification
• JSR-168 Portlet Site
• Fluid Project Design Handbook

XML/XSLT Resources

• XML Language Definition
• XSL Language Definition

HTML Resources

• HTML 4.01, the last valid specification
• XHTML 1.0 Recommendation
• W3C's Markup Validator

CSS Resources

• CSS home page at W3C
• Fluid Skinning System

JavaScript Resources

• Mozilla's Official Documentation on JavaScript
• jQuery