Designing Web Interfaces

This week we learned about designing web interfaces. We learned about the different design issues which are color, visuals and text. For example, we learned that by combining visual elements with text you can enhance information clarity. It is also important to highlight important components. When it comes to text, one shouldn’t use all caps, or too many different fonts. Also, contrast and spacing is very important to ensure readability. Color is another important aspect. When we think about what colors to use on our page we have to consider the functionality of the color scheme. Colors should be used to provide emphasis and increase interest. We also learned about different graphic file formats. GIF, or Graphic Interchange Format, is the preferred file format for images with large areas of the same color. It supports 8 bit images. GIF files can also be used to create brief animations. JPEG, or Joint Photographic Experts Group, files are the preferred file format for photographic images and supports 24 bit images. PNG, or Portable Network Graphics, files can be 8 or 24 bits and uses a lossless compression scheme.

We also learned the four principles of design, sometimes referred to as the acronym C.R.A.P. which stands for contrast, repetition, alignment, and proximity. Contrast helps to organize your information. You can add contrast with typefaces, rules, colors, spacing between elements, textures, shapes, etc. Repetition unifies all parts of a design. Strong, repetitive elements help to organize the page into visual units. Alignment helps create unity on the page. And when it comes to proximity, group related items together and try to avoid too many separate elements on a page.

Usability

Over the past week our group has been focusing on analyzing the usability of the Neighborhood Health Services web site. Appropriately, we are studying usability in lecture as well.
On Thursday we learned to define usability as both a quality and a process. When testing for usability we want to know what impact the product has on the end-users. The process by which is to design the web site with the users' needs as the central focus. This is important because when a user is unable to navigate effectively through a web site to find the information they are looking for there will leave the site and look elsewhere. If a web site cannot provide the user with the information they need then that web site is not preforming its primary function.
We also learned about usability engineering, which is an approach to system
design in which levels of usability are specified quantitatively in advance, and the system is engineered toward these measures, and user-centered design, which is a design philosophy and a process in which the needs, wants and limitations of the end user of an interface or document are given extensive attention at each stage of the design process.

Search Engines and Metadata

This week was review week. In addition to reviewing for the midterm, we learned this week about search engine optimization. This is the process of refining website content, developing inbound links, and improving overall site structure and content in order to increase the web site’s ranking in search engine results and directories. This is very important because web searches are one of the most popular methods for finding information on the web. A web site’s rank on a search results page is crucial to whether or not the site gets a hit from the user. Most users will only hit sites on the first results page. And more often than not, they will click on only the first few results.
We also learned that search engines calculate a site’s popularity based off of a combination of data about how much traffic the site receives, the age of the site, the number of links to the site, and the site’s file structure and naming scheme.
Another important term from this weeks lesson was metadata, which is data about data, more specifically in web site design, metadata is used to describe the information contained in the web site so that when users search for it on the web the search engine will associate the web site with that particular metadata being searched for (if applicable).

Wireframes

This week in class we have been focusing on wireframes. Wireframes are grayscale block diagram showing overall navigation and blocks of elements. They demonstrate elements a web page or application screen will contain. A wireframe does not need to link to anything and does not include any visual design. Also, wireframes must include; key page elements such as the header, footer, navigation, content objects, and branding elements, and their locations, grouping, labeling and place holders. In addition, we learned about different types of wireframes, which are high-fidelity, low-fidelity, and annotated wireframes. The low-fidelity wireframe is a rough, non-graphical wireframe which focuses on navigation elements, whereas the high-fidelity wireframe contains some color and content, and simulates the actual page.

As far as our group work is concerned, this week we began working on the new navigation system for the Neighborhood Health Services web site. We also met with our new client on Thursday at 3:00pm. Our assignment for the week is to create wireframes for certain pages of the Neighborhood Health Services web site. The lecture ties into this assignment in an obvious way. This is, the lectures were all about wireframes this week, and we are each making a wireframe, individually.

Site Map

This week we focused primarily on the functionality of site maps. I unfortunately was unable to attend class on Tuesday on account of my being sick, but in class on Tuesday my group members participated in the in class activity, which was a tutorial on how to create a site map and maintain a site map. The subject of the lecture on Tuesday was labeling, which is exactly what the activity entailed. Labeling can be done with either text or icons, and are used to name contextual links, headings, navigation systems, and index items. On Thursday we learned more about site maps. A site map is a hierarchical visual model of the pages of a web site, and is used to promote usability, accessibility, and searchability. There are two types of site maps: textual and visual. In class we also learned how to build a site map using various site map building tools.

These two lectures can be applied to our current work with our client, Neighborhood Health Services, Inc. in that this week we are actually creating a site map for their web site. We are meeting as a group on Sunday in Strozier at six to create our formal site map.

More on Personas and Scenarios

Over this past week we have been working on our Personas and Scenarios for the Neighborhood Health Services web site. The purpose of this assignment is to better understand the target audience of the Neighborhood Health Services web site, so that we may take provisions to best accommodate them during their visit to the Neighborhood Health Services web site. My persona was a patient named Jamaal Williams. Putting me in Jamaal’s hypothetical situation and attempting to use the web site proved to be quite insightful, as this made specific flaws in the architecture of the web site much more apparent to me. For example, as Jamaal I found it impossible to find a phone number for Neighborhood Health Services, Inc. There was also little about the site to hold such a user’s attention for more than a minute.

In lecture this week we have been discussing organizing information. More specifically, we discussed why we organize information, and different methods for doing so. For example, organization schemes, which are best for browsing, and organization structures, which are best for hierarchical structures, i.e. top down approach.

As a group we also completed the in-class activity, which was a content inventory for our client’s site.

Personas and Scenarios

The focus over the past week has been on how people interoperate information. For example, we discussed ways in which users access any given web site. This can be done randomly, where the user can jump in at any random point on the site. Or there is linear access, where users follow a path to their destination on the web. The third is nonlinear access, which allows for many different paths through the information space. Knowing this is useful because it helps us better understand the different ways information can be structured. It should be considered which method of access would best suit the target audience of the Neighborhood Health Services web site. We also learned how to create effective personas and scenarios, which is our next assignment.

As far as our group work is concerned, we have been working on our Client and Audience Analysis. We broke the assignment down into five sections and then compiled them together. I completed the section on research methods, interview questions, and materials gathered. We have spoken to our new client and the project is still a go. Also, we are sticking with our initial plans as closely as possible to avoid discrepancies in previous vs. upcoming assignments.