Technology

UI Engineering

In recent years, our perception of what user interfaces should be has dramatically changed. Web 2.0 has set the bar high. Good UI Engineering does not happen by accident. It's an iterative process that involves utilizing user research to make sure your design decisions are focused on what matters most, the end user.

Deciding on where and how crucial information is displayed on a webpage and figuring out the logical flow for your web applications is only half the battle.New options of AJAX, Ruby on Rails (RoR), Rich Internet Applications (RIA), Mashups, Web Services, and Widgets have meant a whole new approach towards UI. The other crucial piece of the puzzle is documenting your design so that the business team, developers, and designers are all on the same page.

We set up a specialist team called User Interaction Technologies (UIT) to serve this renewed expectation. UIT provides usability, visual design, and UI engineering services to our clients.

UIT serves the following customer requirements:

• Product interface conception and design prototyping
• Usability analysis and improving UI of current products
• Replacing page-centric design with highly interactive interfaces
• Use of mashups, RSS, web services (REST & SOAP). and Programmable web
• Designing interfaces for products that need to address special constituency of users (senior citizens, kids, Gen Y, etc.)

Our UIT team is a very composite team with graphic designers, usability analysts, web programmers, and backend integration experts. Some of the services we use as part of UIT are:

Interaction Design and Visual Design:

Interaction design involves designing and documenting the user flow and interface screens. The objective of our interaction design documents is to easily explain how users will interact with a website or application. We believe in having a user-centered design methodology when it comes to creating interfaces. In order to understand the best way to represent information on a screen, or how a specific user should traverse a website, we conduct in-depth user research and a do an extensive competitive analysis. We refer to the user research in an effort to always keep the user's needs and goals at the forefront of our design decisions. If available, we will also examine your existing log files to understand the current user paths.

Visual design makes the first impression on a user. Our understanding of the importance of visual design stems from our experience as a product company. Our teams have a long history of designing UI elements—navigation graphics, wireframes, icons, logos, and branding—based on market feedback that is optimized for usage scenarios, such as mobile devices, thick clients, dial-up, broadband, etc.

Information Architecture -

Can your users find the information they need on your website? Does your search functionality actually yield appropriate results? Navigation systems can be tricky. Making sure the content you work hard to create is actually being found is imperative to providing a good user experience.

Information architecture is the process of categorizing and labeling content in a way that makes sense to your users so they can navigate your site with ease and find what they need. It's impossible to attain good usability without having a solid information architecture.

We utilize the following tools and methods to make sure your users can find the information they are looking for on your website or application:

• Content Inventories - A content inventory is basically a listing off all the content that currently exists on a website. The page address and title as well as other important meta data are all documented in a spreadsheet. After compiling a content inventory we gain an in-depth knowledge of exactly what information is currently available and how it's organized.
• Card Sorting - Your users are truly the only ones that can tell you if your navigation fits their needs. Get their input on your architecture upfront by conducting a card sort. A card sort is a usability test that focuses on understanding exactly how your users think about the contents of your website. During a card sort a user will sort a pile of cards, labeled with a piece of content, into different categories that make sense to them. When they are finished they will label these categories. After conducting a few card sorts with different users you will start to see patterns and overlap in how your users think about your content. You can use the data collected from this exercise to build an architecture that reflects how you know your users would look for information on your website.
• Contextual Inquiry - A contextual inquiry involves spending time with your users and watching how they live and work. The idea is to study and observe people in their own environment in order to better understand how your product can fit into their routine and help them. It entails leaving the office and entering the homes and workplaces of your users to uncover their needs.
• Site Maps - A site map documents the pages that will be on a website or application and their relationship to each other. Visually, they resemble organizational charts. Site maps can also convey certain characteristics about the pages themselves, such as: whether or not they are dynamic or static, the type of layout or template they will use, if the page contains a form, etc. Site maps are typically relied on as the roadmap for your website.

The following are some of the documentation methods our PLM team prefer to use when doing interaction design:

• Wireframing - A wireframe is simply a sketch of how the layout of a webpage should look and behave. Key page elements and their location are decided on and drafted. Proposed behavior, structure, navigation, and content layout are all captured within the wireframe. We can tailor our wireframes to include specific details that are important to the intended audience. For instance, if the wireframes are going to be utilized by the development team we will be sure to include annotations specific to functionality. You can think of a wireframe as the blueprint for your website.
• User Flows and Storyboarding - Creating a logical and straightforward flow of the different screens that are wireframed is the crux of producing a usable application. We conduct flowcharting and storyboarding to decide on what the exact sequence of screens should be that a user has to traverse to complete a desired task. Flowcharting is a very high-level conceptual model of the different possible design flows. You can think of a flowchart as a decision tree for the user experience (i.e. If the user does "x" show screen "y"). Storyboarding is simply a much more defined flowchart. A storyboard is like a wireframe, but instead of just one sketch, a series of detailed interfaces are wireframed in order to step through a sequence of screens.
• Prototyping - Prototyping is typically done in preparation for a usability test. A few different types of prototypes that can be created such as Flash, SilverLight, HTML/CSS and Clickable PDF.