Used design patterns

14 Apr

After analysing our wireframes, we’ve discovered these design patterns:

– Search : when users need to find an item or specific information.(we used this in the top of the application; used to search on the net)

– Login : when users need to identify themselves so that stored data about/of them can be used in the process they are in (top right corner)

– Register:  when users repeatedly need to (re)enter a large amount of personal data (top right corner)- Customizable Window : when users want to have fully personalized content (used to customize the the main page)

– Country selector, Date selector, Language selector… : when users need to select a date or a time period, their favourite language or their country (used when completing the account info and settings form)

Constraint Input: when user needs to supply the application with data but may be unfamiliar with which data is required or what syntax to use (used when completing the account info form)

Form: when users need to provide personal information and send it to a service provider (registration, login, account info, settings )

Retractable Menu: when users need to access the navigation but they may need the screen space even more (two retractable menus placed on the right and left sides of the page)

Directory Navigation: when users need to select an item out of a set (the widgets and links are displayed grouped into categories)

Tabs: when users need to access a particular section of the entire avaiable information (placed in the top of workspace)

Thumbnail: when designer wants to give the user an idea of how an image, movie or page looks like,              but doesn’t want to display the full-scale image, movie or page because of download time and screen space. (when the user make a mouse-over a link, a sugestive picture appears)

Action Button: when users need to take important action that is relevant in the current context of the page they are viewing.They must be made aware of the importance of the action in relation to other actions on the page or site (used when we want to submit a form, when we need to perform a decision action)

Stepping: when users need to view/act on a lineair ordered set of items. (used when we want to see a previous web page or a next page to see another widgets)

Paging: Long lists of similar looking data, such as search results, are difficult to make sense of.(used when adding a widget)

Center Stage: when users need to know where to find the important things in relation to all the things on the page (user in the main workspaces placed in the center of the page)

Calendar Picker: when user wants to find or submit a particular piece of information based on a date or between a date range.(when completing birthdate in the account info form )

Input Prompt: when the user needs to enter data into the system (used in the search field)

Tour: when the user need to learn about an offered service or product or make the decision to join a service or buy a product.( present in the about page to inform the user how the application works)

Overlay: when user needs to be notified about something important, or additional/related information needs to be shown and it is important to keep the user on the same page.(when user wants to edit and add something)

Vertical Module Tabs: when you need to find a way to show selection-dependent inputs or provide a way for the user to navigate through one or more stacked panes of content without refreshing the page.(for the account info and preferences tabs)

Multiple Selection from a Small List: when users need to be able to select multiple items from a small set of possible items.(when selecting preferences and account info)

Leave a comment

Posted by on April 14, 2011 in Project Solutions


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: