August 13, 2014 at 13:05How to correctly show the client an interactive site prototype for the first time
- Tutorial
Let's take an example that everyone understands. Online store. So you met with the client for the first time, discussed what their future project should and should not do. After that, a list of functional requirements was formed and accompanied by a preliminary site map. All this business will then be placed in appendix number one to the design contract, but today this is not about that. First, let's take a look at the site map that we have.
At a first approximation, we have 15 screens here. An experienced designer will say that there will be up to 30 of them. Let's answer the question of what it is worth to come to the client for the first meeting to make him happy, and at the same time minimize the risks and costs in the design process. And then a slight digression.
Here we will not consider the characters and interaction scenarios as something documented, because we assume that the prototype is typical and we do not need to synchronize our ideas with the client about the target audience and their actions on the site. All this information is stored in the head of the designer and is based on the other ten online stores made earlier.
We come up with a navigation solution and determine the grid. I work in Axure (and help others to work), so a prototype will mean a set of interactive html pages. The methodology is simple: we pull out all the through elements (logo, basket, navigation menu, copyrights in the basement, search bar, language selection, icons with payment acceptance types, etc., etc.) on one page, move them until then until we get a holistic and understandable picture, after which we create wizards for hats, basements and anything else that will be repeated from page to page (especially curious people can familiarize themselves with my video tutorial demonstrating this process).
Then we create the structure of the future prototype, copy and paste our through elements on each page and link the whole thing. Thus, we get an interactive prototype in which we can go through all sections, but these sections will be empty. If it was not about the online store, but about something more complicated, then it would be at this point that we could stop and demonstrate the result to the client for interim approval. But in our case this is not necessary, so we move on.
We take from our heads the most common interaction scenario and, moving along it, we detail the pages that come across on the way. In the case of an online store, most often it will look like this:
When interaction scenarios are described, we have such a list before our eyes. But most often we have it in front of our mind's eye. Let's now see which sections of the site map we need to work out and in what sequence.
Six screens! And this is taking into account the fact that we have already worked out a navigation solution. That is, we do not need to invent the navigation of your personal account or to figure out where to stuck dead-end (or distributing, i.e. those where the script is finished and it would be necessary to direct the user somewhere further) pages.
We come to the client with an intermediate result, which consists of a fully developed and interlinked navigation solution and six detailed pages. Our prototype demonstration looks complete and complete, as we move along the script, simultaneously discussing the subtle points and specifying how the script matches the real capabilities of the client. Edits as a result of comments are not scary for us here, because we did not do very fine detail. No dynamics, no decorations. But the client will be delighted. After all, quite a bit of time has passed, and the designer is already showing him the path from getting the user to the site to putting his money out of his pocket.
After that, we leave satisfied and work on the remaining few scenarios, which we also demonstrate to the client. And at the very end we are already working on detailing and adding dynamic elements where necessary. Profit
And finally, let's remember what designers usually show at the first prototype demonstration.
- This is the main page!
Up to 10% of traffic usually gets to the main page, if it is not an exception in the form of a popular service, so you should not start with it
- the Product Catalog and the card for an individual product. We can add goods to the basket directly from the catalog. I click on this button, in our basket appears plus one and the cost, and the button turns into "Add another".
And here is an example of a premature study of dynamic elements. The client can concentrate on commenting on this page and create a lot of complex work on remaking, although this is just the first step in our scenario chain
- This is a blog, a separate post, a section about us, delivery and payment and promotions.
Sections have been made that create the illusion that they worked a lot on the prototype, although they are comparable in terms of labor costs to placing an order in a basket. At the first stage, the client will receive not quite what he expected to see if, due to these sections, other, more important ones
are not finalized . Here is the checkout page, and then the user will be taken to his personal account, but I will show this later in the next iteration.
The script has not been finalized, although making a dead-end page or just sketching something blocky would not have been very difficult for the designer.
We all went through this. And in the role of customers, and in the role of designers. And at first everyone stepped on a similar rake. Therefore, I wish you more practice and successful working relationships. Any instruction will operate only under certain conditions, and practice will give experience that will help to adapt to these conditions.
- home
- Catalog
- Product Page
- The blog
- Separate post
- About us
- Shipping and payment
- Promotions and special offers
- Personal Area
- My orders
- My details
- Settings
- Basket
- Checkout
- Site Search Results
At a first approximation, we have 15 screens here. An experienced designer will say that there will be up to 30 of them. Let's answer the question of what it is worth to come to the client for the first meeting to make him happy, and at the same time minimize the risks and costs in the design process. And then a slight digression.
Here we will not consider the characters and interaction scenarios as something documented, because we assume that the prototype is typical and we do not need to synchronize our ideas with the client about the target audience and their actions on the site. All this information is stored in the head of the designer and is based on the other ten online stores made earlier.
Step one
We come up with a navigation solution and determine the grid. I work in Axure (and help others to work), so a prototype will mean a set of interactive html pages. The methodology is simple: we pull out all the through elements (logo, basket, navigation menu, copyrights in the basement, search bar, language selection, icons with payment acceptance types, etc., etc.) on one page, move them until then until we get a holistic and understandable picture, after which we create wizards for hats, basements and anything else that will be repeated from page to page (especially curious people can familiarize themselves with my video tutorial demonstrating this process).
Then we create the structure of the future prototype, copy and paste our through elements on each page and link the whole thing. Thus, we get an interactive prototype in which we can go through all sections, but these sections will be empty. If it was not about the online store, but about something more complicated, then it would be at this point that we could stop and demonstrate the result to the client for interim approval. But in our case this is not necessary, so we move on.
Second step
We take from our heads the most common interaction scenario and, moving along it, we detail the pages that come across on the way. In the case of an online store, most often it will look like this:
- A user from a search engine (or catalog) gets to the page of an individual product;
- Adds product to cart. At this point, the interface should tell him where to move on to continue shopping or pay for the goods;
- Goes to the basket for payment, edits contents, gets acquainted with additional information related to stocks;
- Indicates personal data, delivery information, selects a payment method;
- Pay for goods in an external payment gate;
- He returns to the store’s website, to the list of his paid orders and monitors their statuses there.
When interaction scenarios are described, we have such a list before our eyes. But most often we have it in front of our mind's eye. Let's now see which sections of the site map we need to work out and in what sequence.
- Catalog
- Product Page
- Basket
- Checkout
- Proof of payment
- My orders in your account
Six screens! And this is taking into account the fact that we have already worked out a navigation solution. That is, we do not need to invent the navigation of your personal account or to figure out where to stuck dead-end (or distributing, i.e. those where the script is finished and it would be necessary to direct the user somewhere further) pages.
Third step
We come to the client with an intermediate result, which consists of a fully developed and interlinked navigation solution and six detailed pages. Our prototype demonstration looks complete and complete, as we move along the script, simultaneously discussing the subtle points and specifying how the script matches the real capabilities of the client. Edits as a result of comments are not scary for us here, because we did not do very fine detail. No dynamics, no decorations. But the client will be delighted. After all, quite a bit of time has passed, and the designer is already showing him the path from getting the user to the site to putting his money out of his pocket.
After that, we leave satisfied and work on the remaining few scenarios, which we also demonstrate to the client. And at the very end we are already working on detailing and adding dynamic elements where necessary. Profit
And finally, let's remember what designers usually show at the first prototype demonstration.
- This is the main page!
Up to 10% of traffic usually gets to the main page, if it is not an exception in the form of a popular service, so you should not start with it
- the Product Catalog and the card for an individual product. We can add goods to the basket directly from the catalog. I click on this button, in our basket appears plus one and the cost, and the button turns into "Add another".
And here is an example of a premature study of dynamic elements. The client can concentrate on commenting on this page and create a lot of complex work on remaking, although this is just the first step in our scenario chain
- This is a blog, a separate post, a section about us, delivery and payment and promotions.
Sections have been made that create the illusion that they worked a lot on the prototype, although they are comparable in terms of labor costs to placing an order in a basket. At the first stage, the client will receive not quite what he expected to see if, due to these sections, other, more important ones
are not finalized . Here is the checkout page, and then the user will be taken to his personal account, but I will show this later in the next iteration.
The script has not been finalized, although making a dead-end page or just sketching something blocky would not have been very difficult for the designer.
We all went through this. And in the role of customers, and in the role of designers. And at first everyone stepped on a similar rake. Therefore, I wish you more practice and successful working relationships. Any instruction will operate only under certain conditions, and practice will give experience that will help to adapt to these conditions.