User-centered design
From zero to hero — from draft, through wireframe, to prototype.
Designing state of the art and functional internet & mobile apps or web pages have changed lately radically. Who or rather what stands behind this revolution? The answer is easy — wire-frames, frameworks and of course prototypes. Dare to say more?
The user-centered design is a completely rethought approach in the area of internet, mobile apps and webpages environment. It’s been focused on the interaction between human-user and the computer or mobile devices like smartphones and tablets. Moreover, it’s a scalable solution, because it can be easily adjusted in case of individual specifications or limitations. Determinants are being investigated carefully at each stage of the design process.
Sounds (un)cool? OK, but user-centered design is one of the most powerful methods which guarantee highest level of the user experience (UX). It’s been also much more efficient approach, cause it engages end-user at each stage of the project design-flow. Why is it so important? When end-user can validate our/your solutions, the same he improves and verifies correctness, which leads to more reliable and profound projects.
User-center design is an iteration process, so the model can be described as follows: study, design, test, design, test etc. One thing remains unquestionable — better version as the final effect of every iteration.
But before we’ll visualize our ideas, we should do the research job, which will help us to get the better knowing of the target users. And here comes basing communication like talking to them and asking about their needs, expectations and feedback how do they deal with problems if they occur. At this stage we can also validate usability of our webpage and by the chance, look what’s inside competition’s garden.
How should I start?
It’s not a question that interface design is a creative and constructive process, so… don’t forget about the basics. First of all, better be sure that you’re fully relaxed and well-rested. Maybe this sounds trivial, but it’s better be sure that all the other crap is out of our head. If you still fight with yourself, take a nap, go biking, swimming or anything else which make you relaxed and your mind fresh. Hours spent on looking at the screen or damn whiiiiiiiiiiite piece of paper won’t be inspiriting, rather bring frustration and lassitude.
OK, let’s assume we’re relaxed, open minded and ready to go. First stage is your ideas collection. You should gather and consider all conceptions, and then point pros and cons for each other. It’s the best stage to make your misty ideas come true. Of course we should forget about professional tools necessary to do so — so take… piece of paper, sharp pencil or marker. Good old fashioned tolls are very useful for sketching faint ideas.
All the freehand drawn at this stage are the pure visualization of the ideas which come to your mind at the early stage of the project. But they are also good base for discussion with your team members and or clients. Cool is also this, that thanks to basic handling of pencil and paper you can gather various opinions, ideas and remarks from many sites. The more ideas, the more chances to find an innovative solution. Joining to your team non graphics and designers will expand your scale. And by using “basic tools” like pencil and paper you can cut your costs of new utensils development.
The main advantage of sketches is the simplicity of ideas generation, which enable us to verify very fast new concepts. These sketches are in the abstract form, that’s why it’s much more easier to reject them instead of draft or prototype rejection. When we understand the concept of this method, we’ll know that the quality of the drawing is not important and we don’t need to worry that it doesn’t look like Michelangelo. Sketches are not the form of the final solution, it’s rather a road to the final solution, which creates additional opportunities.
OK, we’re cool with the paper and pencil, but how to think up THE idea? When we finished first stage, we can use some of well-known techniques like brain storms, brainwriting and mind mapping. After this draft stage, it’s time to develop qualified ideas by using Wireframes. They are presenting not the final webpage, rather the outline of the web page or mobile app. So better stop yourself from adding graphic details and topographies here. This will prevent the customer to treat the wireframe as the final version of the product. Now it’s the time to present the navigation and the range of the user’s activities. The wireframe is not the emanation of the final project, it’s rather a foundation of target, fully functional solution.
The same as the drafts, the wireframes are the best tool to make the communication process easier. The difference lies in the fact that the first ones are used within a project team and the second one between designers, programmers, managers and customers.
Hmmm it seems that we’re finished with the drafts and wireframes so it’s time to put digital life in our no interactive solution. Let’s cordially welcome — the prototype. This gentleman or lady makes our project alive, pictures and presents how does our www or app work. Prototype is being created as the best testing tool for our project, that’s why it can be treated as semi-final version of our product. Of course it doesn’t have to look exactly the same as the final design, but it should simulate its main processes.
If we’re 800 pound gorilla we can use complex prototypes and if we’re not, simple will be also ok. Then the simplest one is the one made out of paper. An app or the web page is being simulated by the quite (un)reasonable number of paper sheets which present all the routes. But as we live in the 21st century, digital prototypes seem to be more appropriate solution. The biggest advantage is that they look like a final project, they act like it and they present the consequences of the decisions made while designing.
On the other hand we cannot forget that for the digital prototypes we need special, proprietary software. It may cost, but it’s just a question of calculation if we want to pay for multiply usage, easy customization and sharing.
Now it’s time to test our prototype with the representative bunch of beta testers. They will leave us their feedback if they manage to use our app, if our aims have been fulfilled or should we still make some changes.
User-centered design was our starting point and now it’s also an ending. Modern web pages and web apps are smart enough to implement “mobile first” idea. They should look exact the same sharp and cutting edge at 5’ smartphone, 15’ Notebook or 80’ big flat UHD TV. And the other part of the story, is that they should intrigue, fascinate end user. It’s always all about this.
