Tuesday, June 30, 2009

Building Process Flows for Business Processes

For this assignment, I diagrammed the activities to process a financial aid grant application.

During the first iteration, I only included 2 actors and unlabeled. But after feedback from the class, I added 2 additional actions and realistic job role labels. I also added more description in the title to make it clear that this is a financial aid grant application versus another type of grant application. Other aesthetic improvements include removing the gray border lines that separated the job roles; in place of the lines I have added pastel colors to make more natural borders.

Rough draft version (click on image for larger view):



Final version (click on image for larger view):



Tuesday, June 23, 2009

Internet Access Between 1998 and 2000: A Comparison of Demographic Data

Project Overview:
The idea of the “digital divide” has appealed to me since the late 1990s when computer manufacturers freely distributed computer equipment and telecommunications corporations started wiring public schools. The “digital divide” is the concept that of the” haves” and “have nots” in reference to access to computer technology; with a particular focus on comparing people based on ethnicity, income, education and location. Research during this era revealed that low income people, people from rural areas and non white people did not have access to computers and the internet as readily as higher income people, people from suburban areas and white people.

I decided to create my analytical data representation for internet access based on ethnicity, income, education and location between the years 1998 and 2000. My goal is to show a connections between income, education, location and ethnicity as it relates to internet access.

Process:
I began with the idea of looking at trends in broadband access using the demo graphical information from above. The more research I did on analytical data displays, I realized in order to tell a more compelling story, I needed to not only look at trends among demographics but also compare spans of time. Early research on internet access focused on dial-up not broadband. In an effort preserve the integrity of my analysis, I choose to use a set of data that provided a one to one match.

During my brainstorming activity it became clear to me that since I had four variables I wanted the data display to be as clean as possible; therefore I used graphics instead of words to portray the data. My sketches show the progression from using lines and symbols to full blown graphics.

(Click image for larger view)

Brainstorm sketches.

The Data:
This table lists the data used in my graph.
(Click image for larger view)


I used Tuft’s fundamental principles of design to prepare and display my data (Reference A).

Fundamental Principles of Analytical Design:
1) Comparisons: show comparisons, contrasts and differences between data. For my data set, I am comparing internet access of certain groups of people. The contrast and differences are evidenced in the gaps between populations based on demo graphical information.

2) Causality, Mechanism, Structure and Explanation: show the cause and effect. Based on the data I have provided, these relationships can be made:
  • people with higher income levels have greater access than people with lower income
  • college graduates have greater access than non college graduates
It has been reported that on average college graduates earn more money than non college graduates. Therefore, the conclusion could be drawn that the higher income people are college graduates, in which the cause is they graduated from college and the effect being they earn more income and therefore larger numbers of this group have internet access.

3) Multivariate Analysis: show more than 1 or 2 variables. My data set contains four variables: income, location, education and ethnicity. Here are the data set definitions:
  • Income - greater than $75K a year, lower than $35K a year
  • Location - Urban, central city and rural
  • Education - college graduate, high school graduate, and no high school degree
  • Ethnicity - Caucasian, Latin, and African American
4) Integration of Evidence: completely integrate words, numbers, images and diagrams. The integration principle has been demonstrated by using a graph structure to display the data. I have used graphical illustrations, combined with words and numbers to communicate the data.

5) Documentation: thoroughly describe the evidence. I used a data set compiled by the NTIA and ESA. This information is clearly displayed on the diagram.

6) Content: provide content of quality, relevance and integrity. The content provided can be used to track the trends in internet access between 1998 and 2000.

(Click image for larger view)


Conclusion:
The major trends in internet access between 1998 and 2000 are:
  • In 1998 there was a huge difference in access based on income. In 2000 this gap has been narrowed.
  • Location is still a major factor in access. Rural and central city populations continue to lag behind urban populations. Research has show that in some rural areas the internet has not been available.
  • The gaps between education levels are significantly higher in 2000 than 1998. By 2000 the more educated people have larger numbers with access to the internet.
  • The gaps between ethnicity did not change much between 1998 and 2000. Non white people had major lags in internet access.
Have intentionally not drawn cross relational conclusions on the data sets. For example, stating that there is a connection between leaving in a rural area and being low income or having no high school education and being low income, etc. I do not feel as if I have enough information to draw these types of conclusions.

Reference:

A) Tufte, R. Edward. Beautiful Evidence. Cheshire: Graphic press, 2006.

Thursday, June 4, 2009

Constructing Icons: An Examination of Icon Design

Project Overview
For this class assignment, I created a fictitious scenario in which I have been hired by a web conferencing software company to create a desktop application icon. This icon will display on the end user’s desktop once the application is installed. The icon will also be used on their website and in marketing collateral about the product.

The icon must represent meeting via the web using audio, video and application sharing. The target audiences include corporate and educational sectors.

History of Icons
To begin my project, I conducted research on the history of icons in an effort to understand the origins of icons and their original function in society. In Uday Gajendar's article titled "Learning to Love Pixels", he mentions the origins of icons dating back to the Byzantine Empire in the 6th century (reference A). These types of icons were used to portray Biblical stories to a mainly illerate population. The format of these icons were paintings on wood tablets. A key concept in the historical research is icons were used to communicate information using images rather than letters and words.

After understanding the history, I then collected information on design guidelines and principles of icon design creation.

Icon Design Guidelines and Principles
I have broken down the process into these main categories in which the design principles are incorporated.

Phase 1: Brainstorm
During this phase, I started with a brainstorming activity in which I identified metaphors to illustrate the meaning of the icon and interface function behind it (reference B).

My braistorming consisted of thinking of patterns and behaviors used during web conferencing meetings. Images/ metaphors that came to mind included telephone headsets, computer monitors/ screens, wifi connections, and collaboration of multiple parties.

As with all my visual design projects, I used tools like Google, existing software companies, and istockphotos.com to search for visual images of the metaphors listed above. The existing companies were WebEx, GotoMeeting and Adobe Connect Pro. The company icons for the applications did not reflect the metaphors I defined. WebEx using a green and blue circle without any line art. GotoMeeting uses a design that looks like a flower with several petals. In actuality, it is a group of networked circles. Adobe’s Connect Pro icon is an abstract drawing of wavey lines.

Design ideas from brainstorm activity:
I came up with nine design options, but narrowed my choices down to three. The final design was conceived using a combination of ideas from these three options.



Phase 2: Define Style and Tools
During this phase, the icon style and development tools are defined. The Operating Systems' (OS) manufacturers have specific guidelines to refer to when designing OS dependent graphics and icons. For this project I am designing a custom styled icon; therefore I have more flexiblity in my design parameters.

Soft Facade, an icon development firm, suggests following these four rules when designing custom icons (reference B):

  • Design icons that will ideally fit the interface environment where they will be used. This means you should not create cartoonish icons for enterprise application and vice versa.
  • Choose appropriate colors and create basic swatches and gradients, this will save time over the course of the project.
  • Use consistent lighting, shadows, and perspective.
  • Sketch down the shape of basic elements to define the unique style.
For my icon style, I used blue as a background color, with red and brown to highlight my main image. I used round corners and shading to give my icon a modern look.

The tools used during the design phase were pencils and ink pens to complete thumbnail sketches of my ideas. It is recommended to use a vector editor to create the final icon. I used Adobe Fireworks to manipulate my graphic images and Adobe Illustrator to compile all my design elements. There are separate software tools available to create the .ico file extension.

Phase 3: Design
The design phase is where all the pieces come together. Here is the suggested process for design:

  1. Determine size. Size parameters are large 512x512 to small 16x16 icons. My final icon for the desktop will be 48 pixels by 48 pixels.
  2. Sketch ideas based on themes/metaphors identified in the brainstorming phase.
  3. Choose the top two designs to build upon.
  4. Transfer pencil/ paper sketches to the computer. Draw concept in sa vector graphics program. Make large and small versions.
Conclusion
Designing an icon requires the same thought processes required for designing other visual communication devices. The major difference is you have a smaller amount of space to work with. Which means your icon must capture the meaning using a minimum amount of lines.

Final Design - Large View
The icon represents a person with a phone headset, meeting with several people using the computer and the web.


References:
A. Learning to Love Pixels, http://www.boxesandarrows.com/view/learning_to_love_the_pixel_exploring_the_craft_of_icon_design

B. Icon Design: Basic principles explained, http://www.softfacade.com/blog/icon_design_basic_principles_explained

Additional Resource:
7 Principles of Effective Icon Design
http://psd.tutsplus.com/articles/7-principles-of-effective-icon-design/