View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

User-Centered Design

Why am I here?


This gives an complete example on how to profile an user and task and then derive an interface.

In the profile, the application of each characteristic is explained and shows what impact it would have on the interface design.

3 User types are summarized.

Finally, an example of an interface that can be derived from this data is shown.

I.  Profiles               
Audience Profile
User Types
II. Window Mockups


Audience Profile

An audience profile describes the characteristics and attributes of the audience.
This helps us come up with user types, and general guidelines such as:

reading level, interaction style, task hiercharchy and prioritization, navigation styles, layout guidelines, font size.

Go See the ap.htm

User Types

After analysising the audience profile, sterotypes of typical users can be derived by examining cross sections of the profile. The audience profile is split into several categories that cover the majority of the audience.

Our users:

UserType.html Robert Lumens, Casual Computer-wiz User
UserType.html Susie Adams, Infrequent Financally-Challenged User
UserType.html Rex Waters, Frequent Expert User

Window Mockups


Uploaded Image: login.gif

This is the screen the users first encounter when they start the program.


This drops down all the existance users. If an user attempts to type in the letter, then it will start to complete the typing by changing the current combobox selection.

Password is in '******'.
Remember my password

If this is checked, then when the user selects their username, the password is automatically typed in for them the next time they login.

Sign up

This button will begin the extensive setup process. This includes getting user information, and setting up the initial accounts and portfolios.


Closes down. The user's data should have already been saved.


Uploaded Image: quickbar.gif


Because Squeak doesn't provide built-in support for window menus, instead we will use a 'QuickBar' that has buttons categorizing different tasks. Users should be able to navigate through all their tasks by starting off at one of these buttons.
These buttons are prioritized in the frequency and importance of the tasks.


This saves the users data to an xml file, or a database.


This transfers the user to the Portfolios Window. This window allows the user to view all portfolios.


This takes the user to the Transfers Window. The transfers window allows the user to transfer to an amount between any two accounts.


This transfers the user to a Trading Window. This window allows the user to trade shares, mutual funds, and bonds.


This transfers the user to a Bills Window. This window allows the user to setup automatic transactions that are related to paying bills.


This transfers the user to Advanced Window. This window allows the user to do more advanced features such as querying accounts, and adding scheduled tasks.


This transfers the user to the Preferences Window. This allows the user to modify personal information as well as account setup.

Change User

This allowed the user to quickly change the current user. The new user starts off in the same location that the old user was in.

Log out

This returns the user to the login screen. This asks the user to save, if they have not done so.


Uploaded Image: treeview.gif

The TreeView is a very important part of the user interface. This allows the user to quickly navigate between his portfolios and accounts. This displays the hierarchical relationships between the porfolios and accounts. The TreeView starts off unexpanded listing the topmost level of portfolios. Double Clicking on a "category" expands the contents of the category. A category is basically a portfolio, whether top level, or contained within another portfolio. In the example, Investment Portfolio and My Portfolio are top-level portfolios. Banking, and Investment are portfolios or categories of My Portfolio. Wachovia Savings, ETrade Checking, Wachovia Checking are accounts that belong to the Banking "category".

Double Clicking Category

This expands the sub-contents of the category. The PortfolioView of the selected double clicked category is displayed. Collapses the contents if already expanded.

Single Clicking Category

This displays the PortfolioView of the selected category.

Single Clicking Account

This displays the AccountView of the selected Account.

Double Clicking Account

This displays the TransactionView of the select Account.


Uploaded Image: portfolios.gif


This summarizes the user's total worth, allows adding/removal of main portfolios.

Total Value:

This displays the total value of all accounts.

Note: For each top-level portfolio, there would be a corresponding [name]: [$value of [name]]

Investment Portfolio:

This displays the total value of this top level portfolio.


This allows the user to specify a particular top-level portfolio.


This transfers the user to the PortfolioView of the selected top-level portfolio. This has the same effect as using the TreeView and selecting the corresponding top-level portfolio.


This transfers the user to an Add Portfolio Window. This allows the user to add a new portfolio. The user would select what type of portfolio it would be.


This allows the user to remove the selected portfolio.


Uploaded Image: portfolioview.gif


This displays the summary of the current portfolio. It allows the user to manage the categories in the portfolio, and access all accounts contained within the portfolio.

If an user was to select an account, first he would specify which category, he wanted to look in. By default, Categories is set to "All". Next, he would select the account which only displays the accounts under the current category.

Total Assets

This displays the total value of this portfolio.

Note: For each category, there would be a corresponding [name]: [$value of [name]] Banking

This displays the total value of this category.


This displays the total value of this category.

View Performance

Display some sort of pie chart?

Update All Accounts

Downloads current information for each account from the web.

Query Porfolio

Ask it something?


This allows the user to select the current category. By default, "All" Categories are displayed.


This transfers the user to the PortfolioView Window of the selected category! If the user hasn't selected anything yet; it still says: "All", then View is disabled


Pop up an add new category Window!


Remove selected category.

All Accounts

This allows the user to select the current account. By default, the first account in the list is displayed. The list only contains all the accounts listed in the current category.


This transfers the user to the AccountView Window of the selected category.


Pop up an add new Account Window!


Remove selected account.


Uploaded Image: accountview.gif


This displays the summary of the account and allows the performance of some quick tasks associated with the account.

Current Balance

Display the current balance

View Transactions

Display the TransactionView page

Quick Tasks
Update Account

This downloads information from the web and updates the account. (not implemented).

Quick Transfer

This Allows the user to make a quick transfer from this account to another selected account.


This increments the transfer amount by $100.


This decrements the transfer amount by $100.

transfer amount

This holds the amount to transfer.

to account

This specifies which account to deposit the money.

Do it

Let's do the transfer in a squeakish way.


Should a transfer from be displayed too with this account being the default value?


Uploaded Image: transactionview.gif


This is the big honky of them all. This displays the transactions of the current account.

Current balance

This displays the accounts current balance.

Starting balance

This displays the starting balance before the first transaction of the current date range. (optional)

Show DatesFrom:

The date to start the transaction display. By default, one month from current date.


Helper button that displays calendar and helps get desired date.


End date. By default, today.


Displays information about account in table format. The rows are in alternating colors. Sorting toggle can occur by clicking on the colomn header. Sometimes some fields items are colored. Rows can be selected. If a row is selected, then the information is added to transactions section below. (Deposits are green).


When transactions can't be updated automatically from the web, they have to be inputted by the user. This area is specific to the type of account.

Usually, You will be able to Add, Update, and Remove the currently selected Transaction.

Find Transaction will highlight the found transaction.

Advanced Search just gives you more options.

Link to this Page