Start with the objectives
My primary aim is to fulfill the business objectives. Business objectives might be getting users to sign up for something, getting people to purchase products or join an email list.
People don’t just come to your site and, right away, do what you want them to. They will need to go through a set of steps leading up to the action.
Next time you’re thinking about designing a site (note: design is not just how it looks, but how it works), start with figuring out what user flows you are trying to create through the website.
In order to do this you need to know 2 things:
- Your business objectives. It’s the action you want visitors to take on the site.
- User objectives, the desires or needs that they want to satisfy.
So start with being clear about your own goals and identify each user objective to create design flows that meet all of them.
Example of notes:
1. Company Contact Card
Company is the primary contact card.
2. Individual Contact
Individual Contacts are linked to the company contact card.
3. Selectable Contact List
All contacts are shown in a scrollable contact list. The list is arranged in alphabetical order.
4. Highlighted Contact
On tap a contact is selected. The screen updates with the contact details.
5. Linked Company Contact
Contacts that are linked are shown in a different style with a company icon.
6. Group Drawer
The selected group is shown as the title to the contact drawer.
7. Search Contacts
Search includes companies and linked contacts.
8. Previous Screen Name
The title of the previous screen is shown in the button. On tap navigates to previous screen.
9. Screen Title
The screen title shows the name of the selected Contact Group.
10. Edit Button
On tap the displayed contact card enters Edit Mode (screen 3.0)
11. New Contact Button
On tap a new contact card animates over the displayed contact card. (screen 3.0b)
3.1 Text Entry
1. Text Entry
On tap of a textfield the keyboard appears. The keyboard remains available to edit other fields unless dismissed by the user.
2. Done Button
On tap the screen exits Edit Mode and displays the contact card (screens 1.0 – 2.0)
Category: UI/UX Design, Wireframes/IA0