User Interface (UI) Design

Often the web is used for applications, and not just information display. The idea behind User Interface design is taking the users point of view in design. The user's needs are most important in how the data is presented. For this to happen, usability studies must take place with the actual end users. Examples include a simple form that you might enter your address and credit card information, to a full-blown application such as a renewal of service. In the first example, getting the correct needed information and order, and laying the form out cleanly is fairly straightforward. In the second example of a renewal of service, there are several steps in a renewal process.

Finding out which steps must proceed others, presenting visual cues or icons for repetitive actions, and using clear terms (not jargon) are all important factors in user interface design. Typical web based applications are viewed "in the field" so a major factor is the speed of the application.

Some of the essentials of User Interface Design are as follows:

• Understand the user expectations, goals, and constraints - Using fixed width fonts to control input text field size
• Using background colors vs. images, as applications do not have time to wait for extensive artwork
• Multiple style sheets, based on monitor resolution
• The use of icons to represent repetitive actions
• The ability to work around back end code, such as JSP, ASP, Vignette code - Streamlined process to complete the offer or service - Different views based on permission and login
  

View the User Interface Examples

Seeing through the users eyes is the best way to ensure good usability. For example, when doing a usability test, we look for:

1. What navigation path is followed, where does the user go?
2. Is anything distracting, or broken?
3. What if anything works well?
4. Where does your eye go on a page, does this change if you are "looking for something"
5. Is the interface consistent
6. Any effective use of color or icons to help navigation?
7. Observe any thoughts and behaviors

Some other User Interface techniques that FrontEndTech utilize include
Market research, focus groups, questionnaires, interviews, heuristic evaluation, usability testing, and observation. Methods include: surveys, usage analysis, etc.

Factors of UI include
Operating Systems, Browsers, Monitor resolution, etc. Good UI design is task / profile oriented, and conforms to a three click guideline. Sitewide context at all times, navigation controls and a consistent menu system.

Problems include
Plugins, frames, download speed, scrolling concerns, readability, contrast, etc.

Rules for good testing
Make sure the tester fits the profile of the sites target audience. Do not help, or assist the tester, ask them to think aloud while navigating with a task at hand. A typical task might be find this information within the site, then watch how they attempt to solve a need within the site. Video recording is an essential part of good testing, to be able to exactly return to the test data.

User Interface Design is all about taking the users perspective, and making things happen in the order that the user would expect. Typically the back end is programmed to collect or pull data in JSP, ASP, Filemaker, PHP, Lasso, etc. The screens are typically very light on graphics and must be cross browser and platform compliant. Page sizes are under 30k, utilizing CSS to minimize code bloating. Well formed code is especially important here, due to the extra load time poor formed code creates. We eat, breathe, and live tables and CSS, let our experts help you build your next web based application.

Click the image for a larger view.

Sybase Application Build your own Portal application HTML, Graphics, UI design California Schools Three total surveys Fifteen pages each Data collection, reporting UI design Cisco Systems Intranet work UI design Twist open tables One of over 20 screens MySybase UI design Set Preferences Screens To view live site you must register Add or remove from a list Steps to the left, clearly oganized Grouped categories 3 column, relative width NuptialNet CSS Shadowed form CSS styled form buttom Popup with confirm, and close. UI Styled to match site. View live Cybercomp demo 1999 Rollover product demo view live site