tag:blogger.com,1999:blog-22117186698288744282024-03-13T06:55:59.203+02:00Web Design and Usability AnalysisThis is our blog about good and bad web design. We analyse web site layouts and tell you the ways to improve them. Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.comBlogger46125tag:blogger.com,1999:blog-2211718669828874428.post-25489201615169769682017-03-20T14:00:00.000+02:002017-03-21T19:54:10.992+02:00Website for UX design studio<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk8byvSMVTWMTsVqAytxx5f1ASiPz5W8os-AqxtD8PGR54VN9nfAV927NbyeejLGTorjDBUVXrW2p6w6FFd2JlYtlLpx1a5-daBG_nYIu1-IwVxnhcI3XvO9kSAXKKd_-HRHiLxhn9eoZU/s1600/Screen+Shot+03-17-17+at+06.24+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="337" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk8byvSMVTWMTsVqAytxx5f1ASiPz5W8os-AqxtD8PGR54VN9nfAV927NbyeejLGTorjDBUVXrW2p6w6FFd2JlYtlLpx1a5-daBG_nYIu1-IwVxnhcI3XvO9kSAXKKd_-HRHiLxhn9eoZU/s640/Screen+Shot+03-17-17+at+06.24+PM.PNG" width="640" /></a></div>
<br />
<br />
So, you decided to create your own studio. You created a perfect logotype and are going to build a website. Let's have a look what we have to do for it and what could be wrong. We decided to discover two websites from the Google search:<br />
1) https://uxstudioteam.com/<br />
2) https://qubstudio.com/<br />
<br />
<a name='more'></a><br />
<br />
<b><span style="color: #6aa84f;">uxstudio. </span></b>First of all we need to make it perfect. A design company`s website is supposed to have proper design. For example the logotype should be fixed because kerning is not ok here. But the icon is amazing. It contains U and X and looks like wire-frame.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmli5MtHh0JFGRWyX-2uccjlfRsoFwnfloGd_hycOzijvQu-Yd3SOiLGVWS8ElLqKiE5QJCQWm-uziZ2RqD3Vcce_KNXZyAcA69kIpWLCE17p7tsn39mZdyCp7eV3fwL3VS8pSj7Rp5NR/s1600/Screen+Shot+03-17-17+at+06.27+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmli5MtHh0JFGRWyX-2uccjlfRsoFwnfloGd_hycOzijvQu-Yd3SOiLGVWS8ElLqKiE5QJCQWm-uziZ2RqD3Vcce_KNXZyAcA69kIpWLCE17p7tsn39mZdyCp7eV3fwL3VS8pSj7Rp5NR/s640/Screen+Shot+03-17-17+at+06.27+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<b><span style="color: orange;">qubstudio.</span></b> Another UX studio has better kerning but is is not so remarkable and creative.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXpiD53YQRWPbH917nY0xEKc3UUZ3bmHKs72xaiZalHB9O-aUGObeH6m2Ieqkla5sPApGcJ4v6A2Xkx2FCHmhrjPDBsZTYuRuFf0wFGZfMGZ7pJ7o5mkGwVZrotccYLA0OmhTvczZIetTc/s1600/Screen+Shot+03-19-17+at+03.12+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXpiD53YQRWPbH917nY0xEKc3UUZ3bmHKs72xaiZalHB9O-aUGObeH6m2Ieqkla5sPApGcJ4v6A2Xkx2FCHmhrjPDBsZTYuRuFf0wFGZfMGZ7pJ7o5mkGwVZrotccYLA0OmhTvczZIetTc/s640/Screen+Shot+03-19-17+at+03.12+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<b><span style="color: #6aa84f;">uxstudio. </span></b>The color and first appearance is quite weird. I don't feel like I have come to an UX design studio. It is half-blurred, filled with green color. It could be any kind of web site.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-2JogoxVmadveYBUoQvgn8h4q8IKQePZo4YwSeeniUR7ZmA3Z29Opx3uM8T4PS4tfjFCsQTVm6L-82uEBmPewDLolx93hxtqp2r8_C-ruaK_z9lNS_AfPgX3sBmHGqMTMpvzKximkoESv/s1600/Screen+Shot+03-17-17+at+06.17+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-2JogoxVmadveYBUoQvgn8h4q8IKQePZo4YwSeeniUR7ZmA3Z29Opx3uM8T4PS4tfjFCsQTVm6L-82uEBmPewDLolx93hxtqp2r8_C-ruaK_z9lNS_AfPgX3sBmHGqMTMpvzKximkoESv/s640/Screen+Shot+03-17-17+at+06.17+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<b><span style="color: orange;">qubstudio. </span></b>And this style is quite common between UX companies. Owners might assume that it shows clear vision without distractions.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYiguZs3e-joQQLxKyzILOhrat7jN6qlwkxgkHXfgo-XDhypIYiYXdAzRPmwf39zzXa7iVu9rWyCIQuaEQ-m3uA3w4fFneWia7oil97Pk7LXxi1X9cDNAd9CXpC9nwBVlqlWIwmw0ioR4x/s1600/Screen+Shot+03-17-17+at+06.36+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYiguZs3e-joQQLxKyzILOhrat7jN6qlwkxgkHXfgo-XDhypIYiYXdAzRPmwf39zzXa7iVu9rWyCIQuaEQ-m3uA3w4fFneWia7oil97Pk7LXxi1X9cDNAd9CXpC9nwBVlqlWIwmw0ioR4x/s640/Screen+Shot+03-17-17+at+06.36+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<b><span style="color: #6aa84f;">uxstudio. </span></b>Users expect to see on the next screen what does the company offer. And here we have too many information. It is quite hard to keep in mind all these elements. Some of these are very specific processes like "Card Sorting" that means nothing to customers. Texts have strange leading - small in the header and big in the main text.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQsONVjmGDi_5_WMWLvKMNNfOof8n7-wWPh6S9kc5nxl5JZgh8cDijlY_6DfGhq3RH8MJPq6s9yQ7IIcrB7dW4Eh7kD2Q5eDoLgBMMASYWHZgwqspVLiJKKg0qFypgjUvGoeVVkMXN1oMt/s1600/Screen+Shot+03-19-17+at+03.07+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQsONVjmGDi_5_WMWLvKMNNfOof8n7-wWPh6S9kc5nxl5JZgh8cDijlY_6DfGhq3RH8MJPq6s9yQ7IIcrB7dW4Eh7kD2Q5eDoLgBMMASYWHZgwqspVLiJKKg0qFypgjUvGoeVVkMXN1oMt/s640/Screen+Shot+03-19-17+at+03.07+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<b><span style="color: orange;">qubstudio. </span></b>Here is better exposure. There are only 3 elements that are very clear to everyone. If some user wants to discover more he would press Read more. The style could be better because these shadows from <a href="http://webdesign-review.blogspot.com/2016/08/how-to-use-material-design-in-uis-of.html">Material design</a> and blue text-underlined links are not trendy any more.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj34tuQP9MdAtcIB-MJTyuoIzybtJ3d4x3oXAsPD2DHgDfcW-w524dMp0PyxT9Q7c6Uq7oZoP0sibbUt32ai1iDMk95lfAInyUw4jUS-1s0No8RMZ0AoJl3joA6kn099PfmoTQ4TGujTWp2/s1600/Screen+Shot+03-19-17+at+03.03+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj34tuQP9MdAtcIB-MJTyuoIzybtJ3d4x3oXAsPD2DHgDfcW-w524dMp0PyxT9Q7c6Uq7oZoP0sibbUt32ai1iDMk95lfAInyUw4jUS-1s0No8RMZ0AoJl3joA6kn099PfmoTQ4TGujTWp2/s640/Screen+Shot+03-19-17+at+03.03+PM.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<span style="color: #6aa84f; font-weight: bold;">uxstudio. </span>The next thing users want to check is a portfolio. It should show how previous experience of the studio is related to what this particular customer wants now. Here are portfolio slider with link to Behance. This is easy way to organize the portfolio and is ok for young design company.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ppOPf_BNws-a-kr5pnyHDm81HaD3w0VFKZb4Ml284ZsD6YkZh6MSc6UwLo_t93rsm3yrk_SNiHhremZg7_ZIj_2fIwbEYW6mFjOnviPYRLsoq_Zz3VtlzXLdlzxPi38hSeMmMz_oIQTx/s1600/Screen+Shot+03-19-17+at+03.10+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ppOPf_BNws-a-kr5pnyHDm81HaD3w0VFKZb4Ml284ZsD6YkZh6MSc6UwLo_t93rsm3yrk_SNiHhremZg7_ZIj_2fIwbEYW6mFjOnviPYRLsoq_Zz3VtlzXLdlzxPi38hSeMmMz_oIQTx/s640/Screen+Shot+03-19-17+at+03.10+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<span style="color: #6aa84f; font-weight: bold;">uxstudio. </span>This is just lazy and unprofessional way. Design mess. I am not sure many users would trust to the collage of studio works with Behance link on it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1KmWBhgicnTlFJYb-N2u2-xvXIXFnWXJl2YsSrjI9ZJocJthNt_EcsVg-63YDgoRM4YDq1DBGkRdasz8Is4h_CLD88TsehDXSUPDlsNdZrn9iArc6tWJBxlbkSej3HhFjnPkeUV8slzxA/s1600/Screen+Shot+03-19-17+at+03.29+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1KmWBhgicnTlFJYb-N2u2-xvXIXFnWXJl2YsSrjI9ZJocJthNt_EcsVg-63YDgoRM4YDq1DBGkRdasz8Is4h_CLD88TsehDXSUPDlsNdZrn9iArc6tWJBxlbkSej3HhFjnPkeUV8slzxA/s640/Screen+Shot+03-19-17+at+03.29+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<b><span style="color: orange;">qubstudio. </span></b>On this portfolio user could see all completed tasks and even these projects that are in progress. It is very reliable.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6j6KFIAkpuCyQDJWkJxPazxdllJJ1PekHKRyzp6jNANDsiumByZTEOMkRWiVf4KlJfztrlbBVmUVWZ3TwMJot4IuVralk-cvEbN047t8CZF5ENGgykmFZ8iUKPDB6b1pyKeiryPQnudR/s1600/Screen+Shot+03-19-17+at+03.31+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6j6KFIAkpuCyQDJWkJxPazxdllJJ1PekHKRyzp6jNANDsiumByZTEOMkRWiVf4KlJfztrlbBVmUVWZ3TwMJot4IuVralk-cvEbN047t8CZF5ENGgykmFZ8iUKPDB6b1pyKeiryPQnudR/s640/Screen+Shot+03-19-17+at+03.31+PM.PNG" width="640" /></a></div>
<br />
<br />
<b><span style="color: orange;">qubstudio. </span></b>Every project is described very well. They show all steps of development from the persona research to UI and identity branding.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiij4s5cRBZMuzaQSYvnxHEXuQMf_z-5TLOtpoYq8LLF2RrKG2evYFJKlerOlKUFy1dB7PLpqWIdeG_3npX5UdSHnLqFkcOnsJnceA66wjD6p-Qr-jdCDF2YU1IHkuUhRW3fZ5BcQIOhBou/s1600/Screen+Shot+03-19-17+at+03.34+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiij4s5cRBZMuzaQSYvnxHEXuQMf_z-5TLOtpoYq8LLF2RrKG2evYFJKlerOlKUFy1dB7PLpqWIdeG_3npX5UdSHnLqFkcOnsJnceA66wjD6p-Qr-jdCDF2YU1IHkuUhRW3fZ5BcQIOhBou/s640/Screen+Shot+03-19-17+at+03.34+PM.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLwOiPo7zZKNxTAIPVgecRq3LubWm1j1EVV-H6IaH_8txEKCSJlz08qVqezlsUeTatLHPqaI6XJW7LAS1jd-6sEyWYTUiG25LmRh2uwsPfIzajWe3K6kbroiwTEAJPe6yAIhPFJs7Pivc5/s1600/Screen+Shot+03-19-17+at+03.34+PM+001.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLwOiPo7zZKNxTAIPVgecRq3LubWm1j1EVV-H6IaH_8txEKCSJlz08qVqezlsUeTatLHPqaI6XJW7LAS1jd-6sEyWYTUiG25LmRh2uwsPfIzajWe3K6kbroiwTEAJPe6yAIhPFJs7Pivc5/s640/Screen+Shot+03-19-17+at+03.34+PM+001.PNG" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcoamFPVpSEX1OyuRBshY-55Vbh1yZc7AZSY2aCvhoUT6bGJ-SZG8IuCwiGLupalTUm3MFOG2EcKq6C_LaXETVYbFLyNSaYJ1K1zFP8gHvg49tjBY6s_lEK141QO0fYenGV5poC_tUg5MC/s1600/Screen+Shot+03-19-17+at+03.35+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcoamFPVpSEX1OyuRBshY-55Vbh1yZc7AZSY2aCvhoUT6bGJ-SZG8IuCwiGLupalTUm3MFOG2EcKq6C_LaXETVYbFLyNSaYJ1K1zFP8gHvg49tjBY6s_lEK141QO0fYenGV5poC_tUg5MC/s640/Screen+Shot+03-19-17+at+03.35+PM.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ9gjakwK8PrC-iSpvVkRHakC_3Yku-dds4sppsCU4bUeR0YfuDUS7REnmg2n8g2CujWy_jXHuxkbYD-p-rZ40IUA6bU5hITiSmdIT_69w2WKTBwfuvCPnqNdZY2lwqXvvAoEnKOoBA8fZ/s1600/Screen+Shot+03-19-17+at+03.35+PM+001.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ9gjakwK8PrC-iSpvVkRHakC_3Yku-dds4sppsCU4bUeR0YfuDUS7REnmg2n8g2CujWy_jXHuxkbYD-p-rZ40IUA6bU5hITiSmdIT_69w2WKTBwfuvCPnqNdZY2lwqXvvAoEnKOoBA8fZ/s640/Screen+Shot+03-19-17+at+03.35+PM+001.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGn5lm5h4fUOu8-bPMeQFhfPhU1MJKMy4YC0i-d8IfznX5P93yFhyUbyxN1Y2xiFqZCEYOKDsTlU567HsvOccXTFvxJEcKCbv64o98dW3ve896iZKQXkqnKWXTgw_K-oOyKYCo0cS_MBJ/s1600/Screen+Shot+03-19-17+at+03.35+PM+002.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGn5lm5h4fUOu8-bPMeQFhfPhU1MJKMy4YC0i-d8IfznX5P93yFhyUbyxN1Y2xiFqZCEYOKDsTlU567HsvOccXTFvxJEcKCbv64o98dW3ve896iZKQXkqnKWXTgw_K-oOyKYCo0cS_MBJ/s640/Screen+Shot+03-19-17+at+03.35+PM+002.PNG" width="640" /></a></div>
<br />
<br />
<br />
<span style="color: #6aa84f; font-weight: bold;">uxstudio. </span>Who could prove that the company is good in what it is doing - satisfied clients. So, users are interested in testimonials. It is necessary part of the website but testimonials are not very persuasive because users trust their own eyes more than someone's words. There are some problems with alignment (parts of one element are situated more far than 2 elements themselves) and text size (24px for testimonials)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjArbO1I3NI73nTcawpnbgTR69fDlSWGIqm5QRWTRQ6NO8WjAmfElkjm5dZYZVkXFcpnlT-3lIvLF23N3r-InPGpYeW_B62rSubsf6bdzukRrTAVhEz-wHA7xYE82ej9yPGVinAJnxIVtIs/s1600/Screen+Shot+03-19-17+at+03.49+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjArbO1I3NI73nTcawpnbgTR69fDlSWGIqm5QRWTRQ6NO8WjAmfElkjm5dZYZVkXFcpnlT-3lIvLF23N3r-InPGpYeW_B62rSubsf6bdzukRrTAVhEz-wHA7xYE82ej9yPGVinAJnxIVtIs/s640/Screen+Shot+03-19-17+at+03.49+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<b><span style="color: orange;">qubstudio. </span></b>I have strange feeling that design studios don't like testimonials. This one treats them like dirt. They put them on the map, made ugly alignment. Users probably would not read it because it's readability is low.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLkGahe9F0n9YIZKusXNn7FNmw0AIoDE_rpnkLs2JurYyka4Jo3hdissEbufmIgDwZqZzI979dStt56trx6zf_TrLMY2a1yzY7hGAehIGcx1sdHjIbQrwo0INQsMPxTgLTEd9DjVOsJIU7/s1600/Screen+Shot+03-19-17+at+03.56+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLkGahe9F0n9YIZKusXNn7FNmw0AIoDE_rpnkLs2JurYyka4Jo3hdissEbufmIgDwZqZzI979dStt56trx6zf_TrLMY2a1yzY7hGAehIGcx1sdHjIbQrwo0INQsMPxTgLTEd9DjVOsJIU7/s640/Screen+Shot+03-19-17+at+03.56+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<span style="color: #6aa84f; font-weight: bold;">uxstudio. </span> Pictures of the team are more reliable than testimonials.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-955-WTKiAs0iu12QjglbMV7iRH9o-Pjsfel9wMePpe2icKg1DGy5J_Qj0BF6hlnvKETvelxOUROO8XS7V9eLa3pPyZuEwtmkrq5urXds7q4BTf3o80c3KsrnH5x7EXIW8fGO77h4fOR/s1600/Screen+Shot+03-19-17+at+06.24+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-955-WTKiAs0iu12QjglbMV7iRH9o-Pjsfel9wMePpe2icKg1DGy5J_Qj0BF6hlnvKETvelxOUROO8XS7V9eLa3pPyZuEwtmkrq5urXds7q4BTf3o80c3KsrnH5x7EXIW8fGO77h4fOR/s640/Screen+Shot+03-19-17+at+06.24+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<span style="color: #6aa84f; font-weight: bold;">uxstudio. </span> The hover effect shows staff in funny way. This is not new but it shows that the studio really takes care about this part. Zsombék (FUR MANAGER) is awesome, isn't it?<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj22ox4csPpJLuR3KR5oSVs4AVRYnRz7qmzb4CNQp5PzjW-mN0PS9r4VX-37ua4EB8P6lmeR8lz3R5zeMfDvg1IABd10LOXQ0O8-vFYIc-sFfgt_0yFDQ5T8yLYKTwthBr5jLfwgAT8PoIj/s1600/Screen-Shot-03-19-17-at-06.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj22ox4csPpJLuR3KR5oSVs4AVRYnRz7qmzb4CNQp5PzjW-mN0PS9r4VX-37ua4EB8P6lmeR8lz3R5zeMfDvg1IABd10LOXQ0O8-vFYIc-sFfgt_0yFDQ5T8yLYKTwthBr5jLfwgAT8PoIj/s640/Screen-Shot-03-19-17-at-06.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<b><span style="color: orange;">qubstudio. </span></b>There is similar attitude to represent the team.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-WUrPOawJI_bnYQtwK7ZdaBbqdMqxUvfMcOfbvj2EpC9Iwg05q8xiP6LZTsVmsfVB7r-isHRialpHQsUfcZmkLh-bie4bWVr4I4-rLHtA4i8GSyC5bXEC_zsYtznRcYfdt0Q-GLrt8CxM/s1600/Screen+Shot+03-19-17+at+06.36+PM+001.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-WUrPOawJI_bnYQtwK7ZdaBbqdMqxUvfMcOfbvj2EpC9Iwg05q8xiP6LZTsVmsfVB7r-isHRialpHQsUfcZmkLh-bie4bWVr4I4-rLHtA4i8GSyC5bXEC_zsYtznRcYfdt0Q-GLrt8CxM/s640/Screen+Shot+03-19-17+at+06.36+PM+001.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHe2JXbMiWiE4H0wdz7DMhqBObc9c8QlKbYGr3xa0EOOTVmEbAwx7TGl46vN2BTeCiyfkQ-mr0K6si0UQ1VYJnuFPsKRcr-Cz7TMlCZ8_sZveh2HdwLEAvBGDAb7caVe6GcQqoRQIgQEBv/s1600/Screen+Shot+03-19-17+at+06.36+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHe2JXbMiWiE4H0wdz7DMhqBObc9c8QlKbYGr3xa0EOOTVmEbAwx7TGl46vN2BTeCiyfkQ-mr0K6si0UQ1VYJnuFPsKRcr-Cz7TMlCZ8_sZveh2HdwLEAvBGDAb7caVe6GcQqoRQIgQEBv/s640/Screen+Shot+03-19-17+at+06.36+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Users could be interested in the workflow because there are no standards in UX business still. So, every studio has their own rules and tools. Customers could be interested in it. There is information about workflow only on <span style="color: #6aa84f; font-weight: bold;">uxstudio.</span><span style="color: #6aa84f; font-weight: bold;"> </span><br />
<span style="color: #6aa84f; font-weight: bold;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJzce5dCmxIxQp-kiJaN7l2ErGvvTxC-ktKMxPZRF7xqFhF4e2Suk7pyOsDVhqvAW4Jf_Ks7SBm3WCetYh1SSNlOXuIPVpaAqrVTTbhS3f5Bi3T-jUmkTfhm7oUwO2dMOeZT_uF3AsMsQ/s1600/Screen+Shot+03-19-17+at+07.01+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJzce5dCmxIxQp-kiJaN7l2ErGvvTxC-ktKMxPZRF7xqFhF4e2Suk7pyOsDVhqvAW4Jf_Ks7SBm3WCetYh1SSNlOXuIPVpaAqrVTTbhS3f5Bi3T-jUmkTfhm7oUwO2dMOeZT_uF3AsMsQ/s640/Screen+Shot+03-19-17+at+07.01+PM.PNG" width="640" /></a></div>
<span style="color: #6aa84f; font-weight: bold;"><br /></span>
<br />
<br />
<br />
<br />
<br />
<span style="color: #6aa84f; font-weight: bold;">uxstudio. </span>Both websites have blogs with useful information about UX and other stuff. It is good way for exposure and acquisition of new customers.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd5EQkf91-KUZIKmtXb7simIeiFP1l3ReiSb9KbRZaRtC1zvxz40rE8sVjoe5ht4aVXwNoWQwjR4h7wUO1yUWMiUzohJTu4QFzeSmi9m-Na5x_UIuV5Pf6QIBYs-uMmEDK_akWhjxktB-L/s1600/Screen+Shot+03-19-17+at+06.55+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd5EQkf91-KUZIKmtXb7simIeiFP1l3ReiSb9KbRZaRtC1zvxz40rE8sVjoe5ht4aVXwNoWQwjR4h7wUO1yUWMiUzohJTu4QFzeSmi9m-Na5x_UIuV5Pf6QIBYs-uMmEDK_akWhjxktB-L/s640/Screen+Shot+03-19-17+at+06.55+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<b><span style="color: orange;">qubstudio. </span></b>This studio uses as a platform https://theuxblog.com/ blog to PR itself. That is great idea to cooperate with some famous UX designer and write about UX there - with a link to the studio website.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3aZ4s24ASq2lxtUJacFrBrmewdUrnJ8V7GhBxgQmlORvEJWuvppPAHCJhuR8Gc-tAKzVo1bLjsMVlQMlVwdvIJKNznxhroFT-Tuf145EhvJemxKzdyd_hwlmbddh2FbQbrbU-M1aMOKMY/s1600/Screen+Shot+03-19-17+at+06.57+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3aZ4s24ASq2lxtUJacFrBrmewdUrnJ8V7GhBxgQmlORvEJWuvppPAHCJhuR8Gc-tAKzVo1bLjsMVlQMlVwdvIJKNznxhroFT-Tuf145EhvJemxKzdyd_hwlmbddh2FbQbrbU-M1aMOKMY/s640/Screen+Shot+03-19-17+at+06.57+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: #6aa84f; font-weight: bold;">uxstudio. </span> If the studio is good enough user might contact. The contact form is asynchronous because user has to wait the response for many hours probably. I think users need more direct connection like - messengers, skype etc.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUmEZUR-8xPRvHRC1JcF1jHJyZoh9rv5zucr7zS5uOjtVi0DBmqGXMovmflb7aZC6QC6vr4hUtvNolSG58rxaN3BdlEzA5QdHaGmeaERZF9UW1w2iqMep-D4WA2S2HYtUvYPE-viohRWM/s1600/Screen+Shot+03-19-17+at+06.39+PM+001.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUmEZUR-8xPRvHRC1JcF1jHJyZoh9rv5zucr7zS5uOjtVi0DBmqGXMovmflb7aZC6QC6vr4hUtvNolSG58rxaN3BdlEzA5QdHaGmeaERZF9UW1w2iqMep-D4WA2S2HYtUvYPE-viohRWM/s640/Screen+Shot+03-19-17+at+06.39+PM+001.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<b><span style="color: orange;">qubstudio. </span></b>There is similar approach. Labels of the field are barely visible here.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3gB-tfE9Ya60vlRafitD6rDF_vjSMC1yOqyD5sWutlSbHKwBAb6gduUH6h_57p5N6UN6pe0BjTHYg5zU3jyMr4YblbxeHulF50D2InvVW8ezcAg4-niwUlSHwXi3YfuqPpQ5MX-A-oxza/s1600/Screen+Shot+03-19-17+at+06.48+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3gB-tfE9Ya60vlRafitD6rDF_vjSMC1yOqyD5sWutlSbHKwBAb6gduUH6h_57p5N6UN6pe0BjTHYg5zU3jyMr4YblbxeHulF50D2InvVW8ezcAg4-niwUlSHwXi3YfuqPpQ5MX-A-oxza/s640/Screen+Shot+03-19-17+at+06.48+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<h3>
Conclusion</h3>
<div>
UX studio are quite professional to make good website. I am sure it must be not good but perfect. The owner must take care about colors, fonts, kerning, portfolio, pictures, testimonials etc. Perfect website is reliable for customers. I haven't seen any prices there. If I want to make a decision - I should write or call them. I think is is not very useful - users need clear understanding of the price level when they are on the website. If the studio is too expensive or too cheap for me - I don't want to look through their portfolio even. This approach might decrease average time of website visit but it might increase numbers of requests. </div>
Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-53565185204459818872017-03-13T19:54:00.004+02:002017-03-13T19:55:10.805+02:00Why do you need usecases research and UX testing<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi602qPrZd23ArJtCZ96RLcyEsrcdNHs2osdTSc9B7WmqRoYQVYlwEgC09KRD25PMaM4QsyppjRB13TA2Y3jOlGkYtdxp_9zrAOGV-8BzNp05fI1UzMTBB6UhVGzWawunOHTPx8sCaCMme0/s1600/projectcartoon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="392" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi602qPrZd23ArJtCZ96RLcyEsrcdNHs2osdTSc9B7WmqRoYQVYlwEgC09KRD25PMaM4QsyppjRB13TA2Y3jOlGkYtdxp_9zrAOGV-8BzNp05fI1UzMTBB6UhVGzWawunOHTPx8sCaCMme0/s640/projectcartoon.png" width="640" /></a></div>
<br />Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-15938118057155828682016-09-21T13:01:00.000+03:002016-09-22T05:16:39.664+03:00Design of a outsource development company website from SE Asia (Thailand): personas, usecases, implementation Today we are going to make an analysis of an IT development company website from SE Asia: <a href="http://www.addlink.com/en/">http://www.addlink.com/en/</a> .<br />
<br />
Lets start from usesecases. Thai IT development company website must acquire customers in country and overseas. We are going to check this UX with four personas:<br />
1) a Product manager from a foreign IT company who is looking for outsource agency in Asia (India, China, Thailand).<br />
2) a Businessman from Thailand who needs development service.<br />
3) a Startup member from USA who is looking for cheap development of their idea.<br />
4) an Employee who is looking for new job in IT company<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxMk2Qn5jFLqoKcvxVCi-8iYX8-d9OflqUq067PaPuHVCKsL16lwaXpCrLqTP3KG2ihr8ZjXkdiTuJ4TsguWYebLYs3dOUVlOAQulB5L3rhLjvkCNbD9k5fqo5euV-bNE8e8UcZq5UxGW1/s1600/Screen+Shot+09-16-16+at+10.43+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxMk2Qn5jFLqoKcvxVCi-8iYX8-d9OflqUq067PaPuHVCKsL16lwaXpCrLqTP3KG2ihr8ZjXkdiTuJ4TsguWYebLYs3dOUVlOAQulB5L3rhLjvkCNbD9k5fqo5euV-bNE8e8UcZq5UxGW1/s640/Screen+Shot+09-16-16+at+10.43+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<h3>
<br />Usecases</h3>
<b>UC. 1 Users want to leave an order</b><br />
UC. 1.1 Long partnership with a foreign IT company (outsource)<br />
UC. 1.2 Develop a web-site (Web Design and Development)<br />
UC. 1.3 Develop a mobile application<br />
UC. 1.4 Develop a desktop custom software<br />
UC. 1.5 Develop an embedded system (IoT)<br />
UC. 1.6 Provide IT support of existed project<br />
<br />
<b>UC. 2 Users want to be sure that the company is reliable</b><br />
UC. 1.1 Have a look at the staff<br />
UC. 1.2 Watch video with a CTO / CEO / owner<br />
UC. 1.3 Check a portfolio<br />
UC. 1.4 Check prices / costs<br />
UC. 1.5 See the company history<br />
UC. 1.6 See development methodologies<br />
UC. 1.7 See an easy step-by-step explanation of a whole process<br />
UC. 1.8 Check official documents of legal organization<br />
UC. 1.9 Check partners<br />
<br />
<b>UC.3 Users want to communicate with the company</b><br />
UC.3.1 Contact with the company<br />
UC.3.2 Calculate price of a project online<br />
UC.3.4 Leave an order online<br />
UC.3.3 An instant chat with a manager<br />
<br />
<b>UC.4 Users want to work in the company</b><br />
UC. 4.1 Find a job application<br />
UC. 4.2 Watch about an employees' life inside the company<br />
UC. 4.3 Apply CV<br />
<br />
<br />
<h3>
<br />Implementation</h3>
All services are represented on two sliders on the beginning of the landing page. There are Web-site, Software and Apps sections. Every section has an illustration, a short description, a bulleted list of services and a link to the <a href="http://www.addlink.com/en/#service" target="_blank">online cost calculator</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyeKTb4FbWK_3tveoe-ZNkGgpeaLpnmmqyxn5zHfRDXYQiXewG_MevWDUttT3XnrYyFy2uq8PAhCDKA9fP09GZpqPhC29ShcwIe_LpXa3Sfmsq_omRLpHxgrAhe9W99zLrpkVnosiEBhaM/s1600/Screen+Shot+09-16-16+at+11.05+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyeKTb4FbWK_3tveoe-ZNkGgpeaLpnmmqyxn5zHfRDXYQiXewG_MevWDUttT3XnrYyFy2uq8PAhCDKA9fP09GZpqPhC29ShcwIe_LpXa3Sfmsq_omRLpHxgrAhe9W99zLrpkVnosiEBhaM/s640/Screen+Shot+09-16-16+at+11.05+AM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
User can check prices and costs of the project on a <a href="http://www.addlink.com/en/prices" target="_blank">separate page with all features</a>. There is an approximate price for average website that is quite cool and show customers the level of this company. So, they could understand it is suitable to their budget or not. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHLl3y5lBDo1QOyCb-gdshvbxKxadlkwuT7lcjipgEu_vIGpkrzWu4Zp-zg6a3znrxayOktm7y8MbSdLj-MiDDO_o7zF1oOfK6DFE1b02TXBS-dhWT5D6Hha9TykOScXWJatjZizUmNpO/s1600/Screen+Shot+09-16-16+at+11.19+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHLl3y5lBDo1QOyCb-gdshvbxKxadlkwuT7lcjipgEu_vIGpkrzWu4Zp-zg6a3znrxayOktm7y8MbSdLj-MiDDO_o7zF1oOfK6DFE1b02TXBS-dhWT5D6Hha9TykOScXWJatjZizUmNpO/s640/Screen+Shot+09-16-16+at+11.19+AM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Users could find a step-by-step instruction of development process after the "Our Services" part. It stars with an order and finishes with a delivery. It is a right place for this instruction because it shows in an easy way how the company works. Users might be ready to leave the order but they need to check the reliability of the company.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3R9dgcGK2TOozwJaFjVxsX7u9S7HCPt5zvzgUSrie12s7CynywPhBcRobwgtUbazaDxaSa4eAfwIiArgeMUf_5FKFJ-MH1dqlB7J9y7cxWSL_heupVSWVT6gjrLi_0EONDPluD0djd23W/s1600/Screen+Shot+09-16-16+at+11.22+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3R9dgcGK2TOozwJaFjVxsX7u9S7HCPt5zvzgUSrie12s7CynywPhBcRobwgtUbazaDxaSa4eAfwIiArgeMUf_5FKFJ-MH1dqlB7J9y7cxWSL_heupVSWVT6gjrLi_0EONDPluD0djd23W/s640/Screen+Shot+09-16-16+at+11.22+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
A portfolio comes after "How it works" part. The design is a bit outstanding. While the website is light - the portfolio is dark blue.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-DrW7HSfiSlHB1zFBjEI743Fm4-_cIaYMRrkFYPMDIJ-4f4mhKfSgbNuVr-t0ufpmdL9jhajliHYJenuSZ2cq8EE33kOcIzYjhSpYBbScsoJAKksATSAFQ7q3qmEYDkjRA_7_gVlC4eCa/s1600/Screen+Shot+09-16-16+at+11.25+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-DrW7HSfiSlHB1zFBjEI743Fm4-_cIaYMRrkFYPMDIJ-4f4mhKfSgbNuVr-t0ufpmdL9jhajliHYJenuSZ2cq8EE33kOcIzYjhSpYBbScsoJAKksATSAFQ7q3qmEYDkjRA_7_gVlC4eCa/s640/Screen+Shot+09-16-16+at+11.25+AM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Every project could be opened on a pop-up window with detailed information. It is quite hard to make good design for a portfolio part because all projects are different (from software installation to web-design). This website just cut images to the proper size. Some websites looks weird on a wide monitor because there is only top of the website visible. If users want to see whole image - they should click on the enlarge button in the right top corner.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMD_DdS1TQgryxV3K6IiOe_066EysS-MzA-HYPUbRXmPT1oTdHWjIRPkRrlwduSdI9YMh6dofBcLruIeKgaVpuP5ZiwUr411JMXFmssyBHKnaq9vZ8byXMNuoWNjmqeyw6lYdcQjtigADO/s1600/Screen+Shot+09-16-16+at+11.29+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMD_DdS1TQgryxV3K6IiOe_066EysS-MzA-HYPUbRXmPT1oTdHWjIRPkRrlwduSdI9YMh6dofBcLruIeKgaVpuP5ZiwUr411JMXFmssyBHKnaq9vZ8byXMNuoWNjmqeyw6lYdcQjtigADO/s640/Screen+Shot+09-16-16+at+11.29+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
Some technical information is on the "Development methodology" part. It is divided in sections: Design, Technology, Workflow. Logos show to experienced customers technologies that the company use in its work. This part is quite important for persona #1 "project manager" because an outsource agency's technologies must match to the same in their local company.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBV-NE99eiJWdl5DQrfKxs0Z7geiB6OwwYb4xjeeEj-DUqprxeqrYUfv5eLGmVtJTWp6q2Vm1PrlYap_aMlnMwJ0oQ8j598FMrkbl7yI8lAHs7hyphenhypheneIWkS5zWSANaMwYwQjFzyem90plovG/s1600/Screen+Shot+09-16-16+at+11.36+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBV-NE99eiJWdl5DQrfKxs0Z7geiB6OwwYb4xjeeEj-DUqprxeqrYUfv5eLGmVtJTWp6q2Vm1PrlYap_aMlnMwJ0oQ8j598FMrkbl7yI8lAHs7hyphenhypheneIWkS5zWSANaMwYwQjFzyem90plovG/s640/Screen+Shot+09-16-16+at+11.36+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
"Company overview" section proves reliability of this enterprise. Potential customers could find official document there. The link is not visible. This usecase (UC. 1.8 Check official document of legal organization) is very important for all personas and need more attention.<br />
But video with a senior developer is very adorable. It is in English with subtitles. The video improves reliability of the company because now it is not only a page in internet but a real man in Asia who offers users to contact him.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimn09HAn08UYoul9cp37-JJbWvA8sItDa3Bz89_Gx-YHKA5kv0S9i7NNU_r4ticTSLcEkh0SEcCebVWIq4-BcoSc7pr_zQaMeQTFKkEvh6_gQMotlbplB-i3fUW2zN2UMvsyLjlwE9unm3/s1600/Screen+Shot+09-16-16+at+11.44+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="372" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimn09HAn08UYoul9cp37-JJbWvA8sItDa3Bz89_Gx-YHKA5kv0S9i7NNU_r4ticTSLcEkh0SEcCebVWIq4-BcoSc7pr_zQaMeQTFKkEvh6_gQMotlbplB-i3fUW2zN2UMvsyLjlwE9unm3/s640/Screen+Shot+09-16-16+at+11.44+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
"Our team" part is big and it is developed very good. They made photo of each employee and this makes the company's website more human friendly.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqyDcv5CVSx5yUHGukQXo5Fazo9YT34HvzkJAD3_OnwEThcyZrOjFufPtjCwd8UrD-hEpnInM5Hhvls75H3UXQtnmLGYEDsGvSgqITwwX6ZaqHRMh8QieM3knxakJ1u8LMYsGCmHZkqRgw/s1600/Screen+Shot+09-16-16+at+11.59+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqyDcv5CVSx5yUHGukQXo5Fazo9YT34HvzkJAD3_OnwEThcyZrOjFufPtjCwd8UrD-hEpnInM5Hhvls75H3UXQtnmLGYEDsGvSgqITwwX6ZaqHRMh8QieM3knxakJ1u8LMYsGCmHZkqRgw/s640/Screen+Shot+09-16-16+at+11.59+AM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
There is "Partners" section after "Our team". Users could check some famous logos like Microsoft and Dr.Web but there is no information how they really cooperate with this company. Anyway this part looks ok and add some positive impression.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqvSvKQ3-gbw47L3A-UKIomiBWhaUzyAKqLswVfUHtn9u-RFL8q_7ofOu5lR-6Gy9JsetNNvYF8ce8w7dIAZwgZ-n9Bu70DeKGNS4kTeZfRnuYsD59kOYH7IJSVKoYibFu63comW4O4DcN/s1600/Screen+Shot+09-16-16+at+02.23+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="514" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqvSvKQ3-gbw47L3A-UKIomiBWhaUzyAKqLswVfUHtn9u-RFL8q_7ofOu5lR-6Gy9JsetNNvYF8ce8w7dIAZwgZ-n9Bu70DeKGNS4kTeZfRnuYsD59kOYH7IJSVKoYibFu63comW4O4DcN/s640/Screen+Shot+09-16-16+at+02.23+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
The website has several ways for communication with customers.<br />
1) a Phone number is in right top position. It is fixed along with a navigation bar to browser windows and users could see it all the time.<br />
2) Instant messengers with a manager via Line (that is popular in Asia) and Skype.<br />
3) a Contact form for a quick request in the bottom of the page.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjulZhCjNISxk3bD5X_T6mn5bab6MeXdtCpqyihkphyFjVsF506sxi-6YdYmgWtJpDJqlhYzmFPY1XM7CB4kong-vWUBXNmr1Jq8sFjUYFG1Zk7AJW0zVK7ZgCMJweMfW5s2x5Bb4pxzcUl/s1600/Screen+Shot+09-16-16+at+02.35+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjulZhCjNISxk3bD5X_T6mn5bab6MeXdtCpqyihkphyFjVsF506sxi-6YdYmgWtJpDJqlhYzmFPY1XM7CB4kong-vWUBXNmr1Jq8sFjUYFG1Zk7AJW0zVK7ZgCMJweMfW5s2x5Bb4pxzcUl/s640/Screen+Shot+09-16-16+at+02.35+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivHz7u0vUbkW4mVj-fiTre1x1lV_0TCMqsviAlho1nQf45w_W_EqejFh4hQ46Q4JbuV4wEPmvSfNVETNVvSxCrXt5ID6ufC4UB1G7ZESoKxM7Bj8Urx_rJyP9XLKk741nC6T0LsiS4qH7I/s1600/Screen+Shot+09-16-16+at+02.42+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="438" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivHz7u0vUbkW4mVj-fiTre1x1lV_0TCMqsviAlho1nQf45w_W_EqejFh4hQ46Q4JbuV4wEPmvSfNVETNVvSxCrXt5ID6ufC4UB1G7ZESoKxM7Bj8Urx_rJyP9XLKk741nC6T0LsiS4qH7I/s640/Screen+Shot+09-16-16+at+02.42+PM.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<br />
<br />
<br />
<br />
Also user could send his project cost calculations to the company via the online calculator. It is good trick to get users into interaction with the website.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaVh2MXbRr5xExx85oE77cY7m3U9Hi9ec_SgHYn4vvYPuF0FCW0m-Xvk12VNrUI-QVA4W1UMuZuCSgWTa385ADaxHq53EcQpgudHVIfEEAd_-ygGK0iUbBAevXGXt55hAOjDuP2tVIZMBg/s1600/Screen+Shot+09-16-16+at+02.53+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="558" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaVh2MXbRr5xExx85oE77cY7m3U9Hi9ec_SgHYn4vvYPuF0FCW0m-Xvk12VNrUI-QVA4W1UMuZuCSgWTa385ADaxHq53EcQpgudHVIfEEAd_-ygGK0iUbBAevXGXt55hAOjDuP2tVIZMBg/s640/Screen+Shot+09-16-16+at+02.53+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
The calculator works very interesting. It use certain price for every usecase to calculate a total cost of a future software project. In this way customers could leave a very detailed order to the company. It also covers UC. 1.4 Develop a desktop custom software and UC. 1.5 Develop an embedded system (IoT).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsDgMXrDvtYkzQzkeHHexJHU3WO7KQJSR24o_aSj-00uk5QIIMwR0kgJ31JvE03gW57fMCfpYpRJi5LGuLYabRZuJ2ipNQHcB-6inFHmYaGCGe-LtqFvoL9t-ygh6g-6p_2jPbbILY_Hy_/s1600/Screen+Shot+09-21-16+at+05.05+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="418" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsDgMXrDvtYkzQzkeHHexJHU3WO7KQJSR24o_aSj-00uk5QIIMwR0kgJ31JvE03gW57fMCfpYpRJi5LGuLYabRZuJ2ipNQHcB-6inFHmYaGCGe-LtqFvoL9t-ygh6g-6p_2jPbbILY_Hy_/s640/Screen+Shot+09-21-16+at+05.05+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
What about local customers? If users come to the website from Thailand - they would be redirected to a <a href="http://www.addlink.com/th/">thai version</a>. But all foreigners could come to English version. It is possible also to change language with switcher on the navigation bar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOS3usIcOFncf4_X6ELPxac9eI3EXQvo4_YyslPnA5XSMsZzUmVeMIfBzWeWUC772VpEmff9mGZlQAonhHg9t3XZ8ggVWGfIqo-F8Vq1qOd4EjJ5b8LLaPx8PYlLLB0xCEL167aL6BS5X_/s1600/Screen+Shot+09-17-16+at+11.07+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="388" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOS3usIcOFncf4_X6ELPxac9eI3EXQvo4_YyslPnA5XSMsZzUmVeMIfBzWeWUC772VpEmff9mGZlQAonhHg9t3XZ8ggVWGfIqo-F8Vq1qOd4EjJ5b8LLaPx8PYlLLB0xCEL167aL6BS5X_/s640/Screen+Shot+09-17-16+at+11.07+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
Ok. The main page and price / cost page almost cover all usecases of the first persona (a project manager), the second (a businessman from Thailand) and the third (a startup team member). The company looks reliable, with big team of designers, marketers and developers. Lets check how responsive is the design.<br />
The layout changes to mobile and tablet. Even the difficult "Portfolio" part is transformed.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1BGfoIaiKUJFRRlMvx0kB2u9ABcsTThZDiMA1R_3ZykIEMv1S9HwKAtk3GFgTRNpekEN_wtbcNJ4yG9UbT_rSEXEFwoCj0Aef6Vf1TqoS8so6qLfbxJx4DkKrq-VpNQqhUQJvJgUWSA8j/s1600/Screen+Shot+09-16-16+at+04.41+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="414" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1BGfoIaiKUJFRRlMvx0kB2u9ABcsTThZDiMA1R_3ZykIEMv1S9HwKAtk3GFgTRNpekEN_wtbcNJ4yG9UbT_rSEXEFwoCj0Aef6Vf1TqoS8so6qLfbxJx4DkKrq-VpNQqhUQJvJgUWSA8j/s640/Screen+Shot+09-16-16+at+04.41+PM.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOQMDYwFyLTREOT3qmCLh8mgnPVIMts_d52lVOED-Ilzll1PPdl2f7SUK9WNJVSRwHBeVgkl77EULjGHZMBoRrvcLWgiCCHECqLEzDAbFkMOeV3ULRh5waJenYvY6OqwHR79Idt4iiiJP/s1600/Screen+Shot+09-16-16+at+04.43+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="414" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOQMDYwFyLTREOT3qmCLh8mgnPVIMts_d52lVOED-Ilzll1PPdl2f7SUK9WNJVSRwHBeVgkl77EULjGHZMBoRrvcLWgiCCHECqLEzDAbFkMOeV3ULRh5waJenYvY6OqwHR79Idt4iiiJP/s640/Screen+Shot+09-16-16+at+04.43+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Every IT company need employees. IT professionals are rare free nowadays and companies tried very hard to make the work attractive. This company created special page for potential employees. There is information about opened vacancies and information about requirements.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm6piEKLgdT7tJFnMvWBDnzTeez4leeIXgmew0Ew5zhRBCKDbBpE15Iv8YL1ZUeCs3YRdDm0p10YrvwxNvfzvnWGPAmX0miXA40OhH90-BM7IBdyV1UlK1qZ1b8ofO0JnK923dvKG4qxvC/s1600/Screen+Shot+09-16-16+at+02.57+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="432" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm6piEKLgdT7tJFnMvWBDnzTeez4leeIXgmew0Ew5zhRBCKDbBpE15Iv8YL1ZUeCs3YRdDm0p10YrvwxNvfzvnWGPAmX0miXA40OhH90-BM7IBdyV1UlK1qZ1b8ofO0JnK923dvKG4qxvC/s640/Screen+Shot+09-16-16+at+02.57+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
There are video, photos and personal impressions about working in the company. It gives future employees better understanding where they are going to.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQoVvnyFEPnyeLrcZ5AhTzaXgfe-iQO7bPxCHQQrtNUPPpzStDrw6ojMnFEuMTmlooGAkvTtYR9jlwzMjH3kvqCzHH9BwDi0WpAPbx3AWkJmluy_TIVMfTM5tcgwcH_hjWkEJoq0_675Aw/s1600/Screen+Shot+09-17-16+at+11.28+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQoVvnyFEPnyeLrcZ5AhTzaXgfe-iQO7bPxCHQQrtNUPPpzStDrw6ojMnFEuMTmlooGAkvTtYR9jlwzMjH3kvqCzHH9BwDi0WpAPbx3AWkJmluy_TIVMfTM5tcgwcH_hjWkEJoq0_675Aw/s640/Screen+Shot+09-17-16+at+11.28+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Every position has its URL so HR could post the link to certain application.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXCiuuK9k-OE2FARN5mTdYctnJac9Q2n_Yp-qWS8meKl06XLmc2mnL0ElxpaS6oM5c8L4u8mZNTIOiLqBj5JtGfM_P0lqoRo7p2DY21TWzY66WeTMrX4ZDXew2VDsO19VpR4sfElZIzg9/s1600/Screen+Shot+09-21-16+at+04.30+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="374" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXCiuuK9k-OE2FARN5mTdYctnJac9Q2n_Yp-qWS8meKl06XLmc2mnL0ElxpaS6oM5c8L4u8mZNTIOiLqBj5JtGfM_P0lqoRo7p2DY21TWzY66WeTMrX4ZDXew2VDsO19VpR4sfElZIzg9/s640/Screen+Shot+09-21-16+at+04.30+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Potential employees could apply their CV to the company via interactive form.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZqOxIF1TrmyO6y_jUaAY4S2xqVimYBWEZslNcsEVRJHtLuPWZEkgAuRlN_A_DjjarvHF7vBUflhc1_6K7PBxUFp5E0IeRBpSd_Fyd32rGtB6vU_pWjLzpblZ-oc3Jn1KvvWfJa0xewGR/s1600/Screen+Shot+09-21-16+at+04.17+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="504" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZqOxIF1TrmyO6y_jUaAY4S2xqVimYBWEZslNcsEVRJHtLuPWZEkgAuRlN_A_DjjarvHF7vBUflhc1_6K7PBxUFp5E0IeRBpSd_Fyd32rGtB6vU_pWjLzpblZ-oc3Jn1KvvWfJa0xewGR/s640/Screen+Shot+09-21-16+at+04.17+PM.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ka-fCl_S2vpINlNM3jfvZ9l2nP9FO0Ef_bhIlC12DNHFwA048tUSVu-R850_1nLB-QfC2tWFtI8FMhXeewaswNcaMB-A80cKtag0korcgoqF-44iU_eyTg01lyvY3cFAt4ipJWVQHzry/s1600/Screen+Shot+09-21-16+at+04.37+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="410" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ka-fCl_S2vpINlNM3jfvZ9l2nP9FO0Ef_bhIlC12DNHFwA048tUSVu-R850_1nLB-QfC2tWFtI8FMhXeewaswNcaMB-A80cKtag0korcgoqF-44iU_eyTg01lyvY3cFAt4ipJWVQHzry/s640/Screen+Shot+09-21-16+at+04.37+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<h3>
Conclusion:</h3>
After our research we formed 4 personas: a product manager, a local businessman, a startup member, an employee and 4 groups of usecases: users want to leave an order, to be sure that the company is reliable, to communicate with the company, to work in the company. This website cover all usecases for all personas.<br />
The UI is quite modern and consist of many unique illustrations. That makes customers to believe that the company take care about its prestige and appearance.<br />
We recommend UX and UI designers to follow this sample while they are going to create a website for an IT company.<br />
<br />
<br />
<h3>
See also</h3>
<br />
<ul>
<li><a href="http://webdesign-review.blogspot.com/2016/08/google-calendar-vs-outlook-calendar.html">Google Calendar vs. Outlook Calendar: usecases and solutions of scheduling service</a></li>
<li><a href="http://webdesign-review.blogspot.com/2016/08/how-to-use-material-design-in-uis-of.html">How to use material design in UIs of softwares, websites and applications</a></li>
<li><a href="http://webdesign-review.blogspot.com/2016/05/how-to-prevent-slips-in-ux-design.html">How to prevent slips in UX design</a></li>
<li><a href="http://webdesign-review.blogspot.com/2016/04/visibility-of-system-status.html">Visibility of system status</a></li>
<li><a href="http://webdesign-review.blogspot.com/2016/02/usecases-where-should-i-put-change.html">Usecases: Where should I put change language switcher button</a></li>
<li><a href="http://webdesign-review.blogspot.com/2016/01/usecase-i-want-to-practice-foreign.html">Usecase: I want to practice foreign language with native speaker online</a></li>
<li><a href="http://webdesign-review.blogspot.com/2015/10/usecase-i-am-going-to-watch-some-movies.html">Usecase: I am going to watch some movies online. I don’t know what movie I am looking for.</a></li>
</ul>
<br />
<div>
<br /></div>
<br />Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-18486591667542543492016-08-29T11:58:00.000+03:002016-08-29T13:44:05.558+03:00Google Calendar vs. Outlook Calendar: usecases and solutions of scheduling service Online calendars and schedules are quite popular services in business. There are 2 big players between this type of software: Google Calendar and Outlook Calendar. Lets test its features and figure out which one is better. As usual these web-services have more than 90% of users need. We will test only main usecases that are familiar for everyone and only in desktop version.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIC2PB654Mj-Td1S-qV8FsozLPuqPTw78A9NMEk5uoSiYWy4YLa5bmeSKCtyGIpzd7A3ENRNFxpJ5xpwTZHs3bCNcg3m4In-jqzjDHjulqSP4flwb9aaIjH9KwnMDWaW-imnSzRbUXjZ4G/s1600/Screen+Shot+08-29-16+at+05c.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIC2PB654Mj-Td1S-qV8FsozLPuqPTw78A9NMEk5uoSiYWy4YLa5bmeSKCtyGIpzd7A3ENRNFxpJ5xpwTZHs3bCNcg3m4In-jqzjDHjulqSP4flwb9aaIjH9KwnMDWaW-imnSzRbUXjZ4G/s640/Screen+Shot+08-29-16+at+05c.png" width="640" /></a></div>
<br />
<br />
<br />
<a name='more'></a><br /><br />
Usecases of an online calendar:<br />
<br />
<b>1) User can create, edit and delete task.</b><br />
Both services have similar process of creating new task - users just select on timetable the time and type a name. The timetable is divided into parts of half an hour.<br />
<br />
<div style="text-align: center;">
Google Calendar</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjag1atoUe38Q9Du7XZjEow3_H_delTC25AqZMKKm31rmjHfGiOd2NKCGMihqe3h3Q878KYWstgGCkKXN8mP7ct0_xGf0DYSVV_d0OYevaui2380FACzYq4Negj9zENB3LgC121iZFENTsq/s1600/Screen+Shot+08-29-16+at+11.35+AM+001.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjag1atoUe38Q9Du7XZjEow3_H_delTC25AqZMKKm31rmjHfGiOd2NKCGMihqe3h3Q878KYWstgGCkKXN8mP7ct0_xGf0DYSVV_d0OYevaui2380FACzYq4Negj9zENB3LgC121iZFENTsq/s640/Screen+Shot+08-29-16+at+11.35+AM+001.PNG" width="640" /></a></div>
<br />
<br />
<div style="text-align: center;">
Outlook Calendar</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwNBaPmztGsrf-rxr6k92Anwx9XokD7ilUcKmxq-u3j7gPCr2XM3Hu7uWA8X9w8HvHdwmnEoiDjZ5ZLBZIytorqm8eK9JrqMtigSI0iFahn9TWTODpb6QvgGTda8w4xD51MpHY0hzFwDc8/s1600/Screen+Shot+08-29-16+at+11.35+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwNBaPmztGsrf-rxr6k92Anwx9XokD7ilUcKmxq-u3j7gPCr2XM3Hu7uWA8X9w8HvHdwmnEoiDjZ5ZLBZIytorqm8eK9JrqMtigSI0iFahn9TWTODpb6QvgGTda8w4xD51MpHY0hzFwDc8/s640/Screen+Shot+08-29-16+at+11.35+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
If user want to delete of edit a task he would click on it and choose right options.<br />
<br />
<br />
<div style="text-align: center;">
Google Calendar</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXoLe8uQRWpNw8Tr-Oi-Qh-0eZHI99i_tCKGbwDW6dpAgU4uJrP8TN9Y9CAC8Bd6MPAIir4nXOV6tjn_3rA_0YxrBaL9RrduBqYAf31yqhm50XqrG9fw98jcs3wsti3H2bBZ5zIN05vNg/s1600/Screen+Shot+08-29-16+at+01.34+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXoLe8uQRWpNw8Tr-Oi-Qh-0eZHI99i_tCKGbwDW6dpAgU4uJrP8TN9Y9CAC8Bd6MPAIir4nXOV6tjn_3rA_0YxrBaL9RrduBqYAf31yqhm50XqrG9fw98jcs3wsti3H2bBZ5zIN05vNg/s640/Screen+Shot+08-29-16+at+01.34+PM.PNG" width="640" /></a></div>
<div style="text-align: center;">
<br /></div>
<br />
<div style="text-align: center;">
Outlook Calendar</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZ8YEDUI1RwYHYXLd2-s0-Lcj231MSHfM10y8YNdtoIuEf5A0M53nXWttZ2DV5ptnXXl0r_Nsjn0QvV8ckNmxyrQEHAIbPo_F_BcaTUcnTwjZkGcEIkh_KePCNee6eCGwD8KesXXNJP41/s1600/Screen+Shot+08-29-16+at+01.35+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZ8YEDUI1RwYHYXLd2-s0-Lcj231MSHfM10y8YNdtoIuEf5A0M53nXWttZ2DV5ptnXXl0r_Nsjn0QvV8ckNmxyrQEHAIbPo_F_BcaTUcnTwjZkGcEIkh_KePCNee6eCGwD8KesXXNJP41/s640/Screen+Shot+08-29-16+at+01.35+PM.PNG" width="640" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br />
Users could also use right click of the mouse to manage tasks in Outlook Calendar. There are several useless features like icon and color customization. Also user can send the task to someone using Forward button. We can use this<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiErMn7QQlhQVgu-XZuZ-RkC_dutHl9Ihxq925UKox-K_xtNS2g4Fe_0yA_DaO_bqQJS7B9ZPPuIj-nXbHNL_jgkf3iHaqwR96Xotmg7007nZRwjb7fQIE6vv9mOYKUvB_iZ7oO2IqjVBSh/s1600/Screen+Shot+08-29-16+at+03.04+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiErMn7QQlhQVgu-XZuZ-RkC_dutHl9Ihxq925UKox-K_xtNS2g4Fe_0yA_DaO_bqQJS7B9ZPPuIj-nXbHNL_jgkf3iHaqwR96Xotmg7007nZRwjb7fQIE6vv9mOYKUvB_iZ7oO2IqjVBSh/s640/Screen+Shot+08-29-16+at+03.04+PM.PNG" width="640" /></a></div>
<br />
<br /></div>
<div style="text-align: left;">
<br /></div>
<b>2) User must be able to share the task with the group of user.</b><br />
Both services provide the same complicated solution of this usecase. Users must create the task and than edit the task where they could add participants. It is a long way especially if users share their tasks often.<br />
<span style="text-align: center;"><br /></span>
<br />
<div style="text-align: center;">
Google Calendar</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2LISVq_DWnHvkHU7Hqjb44hAO3SYgk4Dzp7EGJiLVb_xOCv6cOgho4_awWqo0Iz5tcKph3qZeInXFEwF3nPkEX-aaP-04KGSdBu1ZeCYDy4u-ztlk6yJq8nNGLrN9NlEv2aV9nvjR9LS/s1600/Screen+Shot+08-29-16+at+11.37+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2LISVq_DWnHvkHU7Hqjb44hAO3SYgk4Dzp7EGJiLVb_xOCv6cOgho4_awWqo0Iz5tcKph3qZeInXFEwF3nPkEX-aaP-04KGSdBu1ZeCYDy4u-ztlk6yJq8nNGLrN9NlEv2aV9nvjR9LS/s640/Screen+Shot+08-29-16+at+11.37+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<div style="text-align: center;">
Outlook Calendar</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXT5EChNkLXN9rmCf9Vtt5COEvvET4PpTpteWLdHBR93Xa81HgKOJo6g6mR7TIceVszR5MbRODxhJzy51qWdou03fTvfMIeEIf5IAEt0U8UrOlxCFycMF8tQuh2zCVLoa-fum1XH9tIOoK/s1600/Screen+Shot+08-29-16+at+11.36+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXT5EChNkLXN9rmCf9Vtt5COEvvET4PpTpteWLdHBR93Xa81HgKOJo6g6mR7TIceVszR5MbRODxhJzy51qWdou03fTvfMIeEIf5IAEt0U8UrOlxCFycMF8tQuh2zCVLoa-fum1XH9tIOoK/s640/Screen+Shot+08-29-16+at+11.36+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<b>3) User must be able to set up notification for a task.</b><br />
Both services have this feature but they work different. Google Calendar shows a pop-up with reminder but Outlook Calendar make a sound.<br />
<br />
<div style="text-align: center;">
Google Calendar</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixxHXnbK4by-SdxOq4c66HgIckWASR-Z5ffuZtzZ7YG6kZkfzFmDVzc4A4V24I3VG4LIFi9GBwSGPFlMhDhSo5QYr771uFucuTz9j3A3-R7hmFjhOQ4VvaI43Yw9OXWhX7AiklrlMuqZA0/s1600/Screen+Shot+08-29-16+at+03.15+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixxHXnbK4by-SdxOq4c66HgIckWASR-Z5ffuZtzZ7YG6kZkfzFmDVzc4A4V24I3VG4LIFi9GBwSGPFlMhDhSo5QYr771uFucuTz9j3A3-R7hmFjhOQ4VvaI43Yw9OXWhX7AiklrlMuqZA0/s640/Screen+Shot+08-29-16+at+03.15+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<div style="text-align: center;">
Outlook Calendar</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfnWMIDruaeBvUaZUWUnfHDI42dKa2H-jEF9fayJAN_DJSZ5sCVA9YYD71etwsJpBXYeC3NtePGKkJ3KO8lqvxp3xrvUh2kWGfQuPs_KaN1fNkfzKEksylD_VyWtoU9o4Cm2REetrgLgjp/s1600/Screen+Shot+08-29-16+at+03.14+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfnWMIDruaeBvUaZUWUnfHDI42dKa2H-jEF9fayJAN_DJSZ5sCVA9YYD71etwsJpBXYeC3NtePGKkJ3KO8lqvxp3xrvUh2kWGfQuPs_KaN1fNkfzKEksylD_VyWtoU9o4Cm2REetrgLgjp/s640/Screen+Shot+08-29-16+at+03.14+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<b>4) User must be able to repeat a task.</b><br />
It seems like Google calendar has more easy system. Users can do the same actions in Outlook but it is divided into 3 steps.<br />
<br />
<div style="text-align: center;">
Google Calendar</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQypRQuspABelL1PlM2ZLhi1cPf4aSPBt3btEMEysM7n2QlffrD4dYp_DDV3wEUE355djI2vajsWcjFFpRi8OXkpWDZaROMwMluPlyjUf3U0UskDeqbWhX_rXGrGLDh8izBPXuLyIfSSbh/s1600/Screen+Shot+08-29-16+at+03.22+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQypRQuspABelL1PlM2ZLhi1cPf4aSPBt3btEMEysM7n2QlffrD4dYp_DDV3wEUE355djI2vajsWcjFFpRi8OXkpWDZaROMwMluPlyjUf3U0UskDeqbWhX_rXGrGLDh8izBPXuLyIfSSbh/s640/Screen+Shot+08-29-16+at+03.22+PM.PNG" width="640" /></a></div>
<br />
<br />
<div style="text-align: center;">
Outlook Calendar</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPeN_Z8r7BKxermsLT00nppPbhcZXBqM-0H9TC5qz_hlUdBNR_7-25LAa0JKn9S4b6qyylWeGjTIT3TjSxzNYcniYrT6VAzqPQ-hRTqGRBWx-cTZeyQezMWcrcLf3_P61xHnNUVIIfJXo/s1600/Screen+Shot+08-29-16+at+03.23+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPeN_Z8r7BKxermsLT00nppPbhcZXBqM-0H9TC5qz_hlUdBNR_7-25LAa0JKn9S4b6qyylWeGjTIT3TjSxzNYcniYrT6VAzqPQ-hRTqGRBWx-cTZeyQezMWcrcLf3_P61xHnNUVIIfJXo/s640/Screen+Shot+08-29-16+at+03.23+PM.PNG" width="640" /></a></div>
<br />
<b>5) Users need to duplicate tasks</b><br />
Our field discovery shows that users want to be able to duplicate a task. If some event (lunch or the end of working day for example) interrupt the tasks - it would be easy to duplicate one task and set up when users want to continue. Non of calendars provide this feature.<br />
<br />
<b>6) Connect with powerful alarm clock</b><br />
Other survey shows that users that usually forget about important meetings want to setup powerful alarm notification.<br />
<br />
<b>Conclusion:</b><br />
There is no big difference between Google and Outlook desktop calendar features.<br />
<br />
A very impressive difference is the price of Outlook Calendar that comes with Office Pack costs from 60-120 USD per year. While Google Docs and Calendar are free with almost similar features<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ISX6aw7N6CIRdmX7Tr920CtjoR4ngR_vwKMPP5FOybknHJLcEGr3iGbxkH9rfGaScGe3NcQ9FpE0zg24Uyew4jCMVKmMEedfeXSFxhryhV80QwA7TbrDOaUpITQJs3z1d11CNzxDn3Qp/s1600/Screen+Shot+08-29-16+at+03.54+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ISX6aw7N6CIRdmX7Tr920CtjoR4ngR_vwKMPP5FOybknHJLcEGr3iGbxkH9rfGaScGe3NcQ9FpE0zg24Uyew4jCMVKmMEedfeXSFxhryhV80QwA7TbrDOaUpITQJs3z1d11CNzxDn3Qp/s640/Screen+Shot+08-29-16+at+03.54+PM.PNG" width="640" /></a></div>
<br />
<br />
.<br />
Outlook Calendar has more modern UI while Google Calendar use old one. There are several design solution that make Outlook little bit more user-friendly. The calendar manage working time and free time by highlighting them with different color. And also we can show only working days in the window. It could be convenient for people who use calendar only for their job.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLIBgqvz9b_1XgxQ92qOuU_KsNsMYV2lM92i5yxuv-Vtrzd212Iu7qhlA0Db1ep7IhZvLthvaqcOXfHFy5kw_Xwr7lgRKDZEaSHYQVxqmGHiiBC42F5PtrTuxy_Y21q8zVlh0OzTlkmMVm/s1600/Screen+Shot+08-29-16+at+11.50+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLIBgqvz9b_1XgxQ92qOuU_KsNsMYV2lM92i5yxuv-Vtrzd212Iu7qhlA0Db1ep7IhZvLthvaqcOXfHFy5kw_Xwr7lgRKDZEaSHYQVxqmGHiiBC42F5PtrTuxy_Y21q8zVlh0OzTlkmMVm/s640/Screen+Shot+08-29-16+at+11.50+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-69384156092744329392016-08-02T07:29:00.000+03:002016-09-19T04:59:55.247+03:00Принципи матеріального дизайну і чим він загрожує дизайнерам Для багатьох користувачів смартфонів поява <b>матеріального дизайну</b> відбувался непомітно. Просто деякі додатки стали виглядіти інакше, трішки краще і веселіше. Користувачі зазвичай приписують ці якості додатку, а не технології, на якій додаток побудований. Проте різниця полягає саме у програмному каркасі для Android - <b>Material design</b>. Сподіваюся ця стаття допоможе вам розібратися, що ж відбулося у 2014 році в лабораторії Google.<br />
<br />
Група дизайнерів Android взялася за задачу - розробити новий інтерфейс, який би був максимально реалістичний - тобто наслідував закони реальної фізики, при цьому залишаючися 2д. Група обрала папір у якості джерела натхнення та наслідування. У своїй лабораторії за допомогою освітлювальних приборів спочатку вони визначили найреалістичніші тіні.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj54RksSfUHftUyjgdexc8I3gtmVIgpasP-TN6Rk_ZoNDFCug0MVrSHhjDrFgqBdk83eoM5d1RjoSJLcGmfDA2N0kGu0Jqjlw9iRRviyWt-lu5TGkKMOb1HY7DVE5MI3RxyRLCLKZZgZRJP/s1600/Screen+Shot+07-29-16+at+10.41+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj54RksSfUHftUyjgdexc8I3gtmVIgpasP-TN6Rk_ZoNDFCug0MVrSHhjDrFgqBdk83eoM5d1RjoSJLcGmfDA2N0kGu0Jqjlw9iRRviyWt-lu5TGkKMOb1HY7DVE5MI3RxyRLCLKZZgZRJP/s640/Screen+Shot+07-29-16+at+10.41+AM.PNG" width="640" /></a></div>
<br />
<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYG1_HvqWCuesbkMOJolLUwONdI6SzUNF2UgAkk3lq4Ufm2gVifgaXLkf2pDc8F78_Wnm7zPe5NDL5hfyBjt9_N-mQXQbnq6-Z9VSIQgcRW7oX5A0ILWk35jZ1rL-Hgm-0M9p07pwq4J7M/s1600/Screen+Shot+07-29-16+at+11.03+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYG1_HvqWCuesbkMOJolLUwONdI6SzUNF2UgAkk3lq4Ufm2gVifgaXLkf2pDc8F78_Wnm7zPe5NDL5hfyBjt9_N-mQXQbnq6-Z9VSIQgcRW7oX5A0ILWk35jZ1rL-Hgm-0M9p07pwq4J7M/s640/Screen+Shot+07-29-16+at+11.03+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Завдяки цим "косим" тіням ми можемо легко упізнати іконки додатків зроблених на матеріальному дизайні.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYND97hTvdJgIWTRIUEuG4VUlCArbhz_DfBfEpc7DDG-h34DK5w5w9ev7Y3tB7y35BjJI35RfDAHyCX8nHe_aZcIpsccyUYB71ZdyJ5HYBAU5YrGKZXeG9RfsHqXV4U-CA4h4KsIJapqy/s1600/Screen+Shot+07-29-16+at+10.45+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="394" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYND97hTvdJgIWTRIUEuG4VUlCArbhz_DfBfEpc7DDG-h34DK5w5w9ev7Y3tB7y35BjJI35RfDAHyCX8nHe_aZcIpsccyUYB71ZdyJ5HYBAU5YrGKZXeG9RfsHqXV4U-CA4h4KsIJapqy/s640/Screen+Shot+07-29-16+at+10.45+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Тіні роблять ілюзію, що між поверхнею програми і склом екрану смартфону є простір, у якому ми відкриваємо чи перетягуємо елементи додатку. Проте тінь - лише незначний результат дослідження.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRLniNy6Y57VNZGCSGDzZ9Bjp_cXZsg9GLl3Vj-c_RSHuhSpc0c2JL-Lqc9pFU1QdK9pbpfLiADNUw4cODySxV2wH4LyFQkg7cDM8BVojK4WVq6abp6mXzbcbjLqreaPaBl4O0-6MpDVKU/s1600/60f79e3731a65dc911c1a703dacdeac4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRLniNy6Y57VNZGCSGDzZ9Bjp_cXZsg9GLl3Vj-c_RSHuhSpc0c2JL-Lqc9pFU1QdK9pbpfLiADNUw4cODySxV2wH4LyFQkg7cDM8BVojK4WVq6abp6mXzbcbjLqreaPaBl4O0-6MpDVKU/s640/60f79e3731a65dc911c1a703dacdeac4.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Найбільшим досягненням дослідників матеріального дизайну можна вважати нові технології анімації. Матеріальний дизайн виглядає немовірно живим порівняно зі своїми попередниками.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYEoGWMttYw9SdeXp_sUHLrXZdQUOK9_fHHjZKnqlefEFLlEIw-b58JxDEmCjWtnZ3ZV6oKMzL0GAqrPURysWMJg2_pBDsPqylfJAvXSVBMg-UlwDpQjHAng4ZjFE4WhPtvha8nen0JKO/s1600/5827dc4333ddb3f2575949c5d7f20abf.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYEoGWMttYw9SdeXp_sUHLrXZdQUOK9_fHHjZKnqlefEFLlEIw-b58JxDEmCjWtnZ3ZV6oKMzL0GAqrPURysWMJg2_pBDsPqylfJAvXSVBMg-UlwDpQjHAng4ZjFE4WhPtvha8nen0JKO/s640/5827dc4333ddb3f2575949c5d7f20abf.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Перш за все, вони вводять в рух пришвидшення, пригальмовування та стрибання. Елементи не можуть рухатися з однаковою швидкістю у реальному світі - їм потрібен час для того, щоб розігнатися, те саме стосується і зупинки.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpy88eTLVO6sou0ztZY-4dQ8leb4S87zdQ71cobB1Bt1aEnW0Mw9mqdfVtP0qUWwX0AvSy-J10ic7E726z6gKVbiuI6FP3FC0kn1_cFPlwdTWLzUt-nxLrA3qAzpLQNOlr0-QENXG_97Oe/s1600/90dc86f2a07aede487f4be210aa9b712.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpy88eTLVO6sou0ztZY-4dQ8leb4S87zdQ71cobB1Bt1aEnW0Mw9mqdfVtP0qUWwX0AvSy-J10ic7E726z6gKVbiuI6FP3FC0kn1_cFPlwdTWLzUt-nxLrA3qAzpLQNOlr0-QENXG_97Oe/s640/90dc86f2a07aede487f4be210aa9b712.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
У цьому прикладі видно як форма з'являється знікуди і повільно зупиняється на екрані. Складається враження, що форма просто влітає на екран. Причому верхні поля влітають першими, таким чином увага користувача йде від верхніх елементів до кнопки APPLY. Так дизайнер може робити міні екскурсію у свій інтерфейс.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBw-s_G7v6qAAwMW0PcNzHLMvtoKllrrL4ZY1Xgz77ieHAikgIaDWmqd_hzyPEh6FiWY0r4o4-FAzQkMHErJgHrZH0xZ1KNT5wJVF481wqK4-kg9PuGMQXwDX9o937TKt1jZgLPy_PX3IN/s1600/340442500e9a246168d8013298026a54.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBw-s_G7v6qAAwMW0PcNzHLMvtoKllrrL4ZY1Xgz77ieHAikgIaDWmqd_hzyPEh6FiWY0r4o4-FAzQkMHErJgHrZH0xZ1KNT5wJVF481wqK4-kg9PuGMQXwDX9o937TKt1jZgLPy_PX3IN/s640/340442500e9a246168d8013298026a54.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Матеріальний дизайн дуже чутливий. Усі елементи відгукуються як тільки користувач до них торкається. Розробники досягли зменшення відгуку нового вікна до 1/3 секунди. І навіть ці долі секунди приховуються анімацією.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVOj4vycIQeMlh0aIuUGc5gM8_EJoUuL7t8wvJKZ4S__hwxf5CwdOMKnY1vrnvZcQbJuG8gGyllWLXSbalv2Ih9JTR-IKW7w0rjE0VH8S3ca63AA40IoIiF7SVNhRmvnkHaQfCyRHmCGQI/s1600/1d65d5efde6565852474dbd0faa3df4f.gif" imageanchor="1"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVOj4vycIQeMlh0aIuUGc5gM8_EJoUuL7t8wvJKZ4S__hwxf5CwdOMKnY1vrnvZcQbJuG8gGyllWLXSbalv2Ih9JTR-IKW7w0rjE0VH8S3ca63AA40IoIiF7SVNhRmvnkHaQfCyRHmCGQI/s640/1d65d5efde6565852474dbd0faa3df4f.gif" width="640" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Як і у реальному світі в матеріальному дизайні елементи "знають" про існування один одного. Якщо ви соваєте один елемент - інші теж починають рухатися.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijeXSi-leqZxjzUVuJNt875LG-_pO2bw8fEn8J5su41YQDTZrvblWugt7UVdC_GQ4CeTyunb-D7DDu10FjmoafwDQauk41rQyPzM3N7QQQhA4998KI1elXQAEue5GsQI8c9UlfzzAkMnjZ/s1600/0a199475c6b73dc74d4d56edeeb46f73.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijeXSi-leqZxjzUVuJNt875LG-_pO2bw8fEn8J5su41YQDTZrvblWugt7UVdC_GQ4CeTyunb-D7DDu10FjmoafwDQauk41rQyPzM3N7QQQhA4998KI1elXQAEue5GsQI8c9UlfzzAkMnjZ/s640/0a199475c6b73dc74d4d56edeeb46f73.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Дуже важливим нововведенням стали зв'язки між попереднім та наступним вікном. Коли система переходить на інше вікно - користувач розуміє що відбувається на екрані.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFDjH0eg1_CNnYqGkLLz75jIsXYouF8QFSF_Q2qiD4ouR4pREdblJy0Eitwb674RINGpIHjx1C1M7Dan6WgmyF5mmz5jS7pO34JEMsQQKBRgLoA3_slUn_wRUpXBR6_gHU4Xwy1ZVcJYAt/s1600/ce8e6a47621a6da8fc11bb994f3ec128.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFDjH0eg1_CNnYqGkLLz75jIsXYouF8QFSF_Q2qiD4ouR4pREdblJy0Eitwb674RINGpIHjx1C1M7Dan6WgmyF5mmz5jS7pO34JEMsQQKBRgLoA3_slUn_wRUpXBR6_gHU4Xwy1ZVcJYAt/s640/ce8e6a47621a6da8fc11bb994f3ec128.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe-ow-qGU_LEFB8MfmYszeQ74uG77dRTg-hZQgYg-hIC2R8LbuFuLNTk0Kf4dUgn3rfML9dfBUimbFwemrRkhlJR-2cRrrabChdCMbIedkUkySd3TTJIgWExU55OejAMGDQHSzXRavMvhD/s1600/e064b5bdf2285c6dd48d586c30ea64f2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe-ow-qGU_LEFB8MfmYszeQ74uG77dRTg-hZQgYg-hIC2R8LbuFuLNTk0Kf4dUgn3rfML9dfBUimbFwemrRkhlJR-2cRrrabChdCMbIedkUkySd3TTJIgWExU55OejAMGDQHSzXRavMvhD/s640/e064b5bdf2285c6dd48d586c30ea64f2.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
Дизайнери концентрують увагу користувача на одному елементі при зміні вікон. Зазвичай це якась іконка чи фотографія. Якщо між вікнами немає спільних елементів - можна використати колір, як у цьому прикладі рожева кнопка стає частиною наступного вікна.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwNQ-YdT3BFYZekq_XugbKlgcD252qGykXBVmnPpv0iWEPLHD_AAGjtPlFtN5chV0nl-zQ9ykzcNX7pJMql_YQPnd71X74rEsGLHK8sIX3zudBmLWa3U2MlWxwGcFNfl9v6_z3_Qh4fqu/s1600/e6488a86b86027503341cad45bac6a3b.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwNQ-YdT3BFYZekq_XugbKlgcD252qGykXBVmnPpv0iWEPLHD_AAGjtPlFtN5chV0nl-zQ9ykzcNX7pJMql_YQPnd71X74rEsGLHK8sIX3zudBmLWa3U2MlWxwGcFNfl9v6_z3_Qh4fqu/s640/e6488a86b86027503341cad45bac6a3b.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Одними з найпомітніших елементів матеріального дизайну є покращені анімовані іконки. Вони оживають від дотиків, роблячи досвід користувача дуже емоційним.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0oc3kNVZwMqYyAxf0X1E8W4qebjg8A3qhNVkop3QeYeMQmfXUGJVdm37x2vVAJo9H5aIE7Yj47zkwXhvQv7bl-9yai5lwc8sszOn01OWVE-17pRpJ1qI9NZKirmulO2R3xjrCrIQV8gT9/s1600/92702e4543c916e7bc67e9efc47d9b51.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0oc3kNVZwMqYyAxf0X1E8W4qebjg8A3qhNVkop3QeYeMQmfXUGJVdm37x2vVAJo9H5aIE7Yj47zkwXhvQv7bl-9yai5lwc8sszOn01OWVE-17pRpJ1qI9NZKirmulO2R3xjrCrIQV8gT9/s640/92702e4543c916e7bc67e9efc47d9b51.gif" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zVtIo_yfgrrvfxEQj83l1eAoNTTEj_ZYBuSmZVss6rzzb0e_ZZOUwVgoO4mXQgnaSFzcXuEABTGm1MYBzNSYebb7VZnqCqjEFleSN9UauhpSsHe8cXmtQ3fXhDTRL4_JbHmExSi5rAV_/s1600/27250cba86adae1e6d1eea6d59aa7622.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zVtIo_yfgrrvfxEQj83l1eAoNTTEj_ZYBuSmZVss6rzzb0e_ZZOUwVgoO4mXQgnaSFzcXuEABTGm1MYBzNSYebb7VZnqCqjEFleSN9UauhpSsHe8cXmtQ3fXhDTRL4_JbHmExSi5rAV_/s640/27250cba86adae1e6d1eea6d59aa7622.gif" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOySGNQpT2CRAvx-tJi993SNqRGyjZGYp3G0O5LWzkJ2JJ4svLeqE2tao8v_9CpcND53s2BQjbYGBDbF889PN-bc5cYYQ9D3s3yjv-LbePbRD43AvG94TlqcU8Stu9GcHiSYPlpQDJsOGX/s1600/ea70d919b42ed3ebfb7a3494d04bed88.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOySGNQpT2CRAvx-tJi993SNqRGyjZGYp3G0O5LWzkJ2JJ4svLeqE2tao8v_9CpcND53s2BQjbYGBDbF889PN-bc5cYYQ9D3s3yjv-LbePbRD43AvG94TlqcU8Stu9GcHiSYPlpQDJsOGX/s640/ea70d919b42ed3ebfb7a3494d04bed88.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Також матеріальний дизайн легко впізнати по універсальній кнопці, яка знаходиться у правому нижньому кутку. Кажуть, що навколо неї точилося багато дискусій. Розробники не вірили, що користувачі зрозуміють її функціональність.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsLf1tFHCfNdORNMd2dIy71wH0jvM7DbksJj42OamzL7DQE8Lf1xWqKhnnzZoeWYXRDfJRqZ1ASouVnk_UqAnKzu4DYkKvhFhW94MHBYkSjEDtMNEmahwAFKeI-pPxvwPeLbhxyWMlYAm/s1600/af6d9c8a16714bd11182b59d23eba8ad.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsLf1tFHCfNdORNMd2dIy71wH0jvM7DbksJj42OamzL7DQE8Lf1xWqKhnnzZoeWYXRDfJRqZ1ASouVnk_UqAnKzu4DYkKvhFhW94MHBYkSjEDtMNEmahwAFKeI-pPxvwPeLbhxyWMlYAm/s640/af6d9c8a16714bd11182b59d23eba8ad.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Чим поява матеріального дизайну загрожує дизайнерам і сфері мобільних додатків загалом? Хоча усі зміни стосуються UI, зміни набагато глибші. Як влучно висловився <a href="http://slobodskyi.com/" target="_blank">Oleksandr Slobodskyi</a>: дизайн інтерфейсу <a href="http://slobodskyi.com/ui-ux-design/" target="_blank">впливає на досвід взаємодії (UX)</a>.<br />
<br />
<ol>
<li>Потреба створення такого складного інтерфейсу показує, що ринок додатків починає перенасичуватися. Тут як і з іграми - зі збільшенням їхньої кількості - покращувалися інтерфейси, оскільки дизайн, а не функціональність стає визначним елементом вибору між однаковими продуктами.</li>
<li>Кількість роботи над таким інтерфейсом зростає у десятки разів. Замість того, щоб склепати дизайн за тиждень і віддати програмістам - тепер доведеться тижнями промальовувати відео анімованих елементів однієї сторінки.</li>
<li>На підході цілий клас нових програм, які об'єднають графіку і програмування. Перші невдалі спроби уже робить <b>Adobe </b>з продуктом <b>Edge Animate</b>. Але інтерфейс ще занадто складний і робота дуже нестабільна. Проте потрібно бути готовим, що скоро доведеться вчити нові програми.</li>
<li>Кількість роботи для дизайнерів зростатиме, тому скоро потрібно очікувати збільшення попиту на тих, хто встиг освоїтися у новому динамічному матеріальному світі інтерфейсів.</li>
<li>Матеріальний дизайн - це не просто фішка Android. Дослідження, зроблене дизайнерами Google змінює підхід до інтерфейсу і робить його реальнішим. Це великий крок до покращення наших стосунків з машинами, перетворення інтерфейсів на живу приємну людині взаємодію. </li>
</ol>
<br />
<br />
<br />
Промоційне відео матеріального дизайну<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Q8TXgCzxEnw" width="560"></iframe>
<br />
<br />
Інтерв'ю з розробниками. На 45 секунді і далі показують реальні експеременти зі світлом.<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/rrT6v5sOwJg" width="560"></iframe><br />
<br />
<br />
Детальний опис з дуже детальними прикладами як можна робитим і як не можна робити:<br />
<a href="https://material.google.com/">https://material.google.com</a><br />
<br />
<br />
Перекладено з статті <a href="http://webdesign-review.blogspot.com/2016/08/how-to-use-material-design-in-uis-of.html" target="_blank">"How to use material design in UIs of softwares, websites and applications"</a>Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-7236488372055516982016-08-01T11:53:00.001+03:002016-08-02T07:44:13.173+03:00How to use material design in UIs of softwares, websites and applicationsIf you are developing application for Android you should know what the "Material design" is. The main idea of material design is in implementing natural rules (shaddows, gravity) of outer world into UI.<br />
<br />
A group of Android's designers started to discover real physical rules to make flat 2d design more attractive. They made many experiments with light and motions to discover how elements behave in material world.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj54RksSfUHftUyjgdexc8I3gtmVIgpasP-TN6Rk_ZoNDFCug0MVrSHhjDrFgqBdk83eoM5d1RjoSJLcGmfDA2N0kGu0Jqjlw9iRRviyWt-lu5TGkKMOb1HY7DVE5MI3RxyRLCLKZZgZRJP/s1600/Screen+Shot+07-29-16+at+10.41+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj54RksSfUHftUyjgdexc8I3gtmVIgpasP-TN6Rk_ZoNDFCug0MVrSHhjDrFgqBdk83eoM5d1RjoSJLcGmfDA2N0kGu0Jqjlw9iRRviyWt-lu5TGkKMOb1HY7DVE5MI3RxyRLCLKZZgZRJP/s640/Screen+Shot+07-29-16+at+10.41+AM.PNG" width="640" /></a></div>
<br />
<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYG1_HvqWCuesbkMOJolLUwONdI6SzUNF2UgAkk3lq4Ufm2gVifgaXLkf2pDc8F78_Wnm7zPe5NDL5hfyBjt9_N-mQXQbnq6-Z9VSIQgcRW7oX5A0ILWk35jZ1rL-Hgm-0M9p07pwq4J7M/s1600/Screen+Shot+07-29-16+at+11.03+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYG1_HvqWCuesbkMOJolLUwONdI6SzUNF2UgAkk3lq4Ufm2gVifgaXLkf2pDc8F78_Wnm7zPe5NDL5hfyBjt9_N-mQXQbnq6-Z9VSIQgcRW7oX5A0ILWk35jZ1rL-Hgm-0M9p07pwq4J7M/s640/Screen+Shot+07-29-16+at+11.03+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Users can easily recognize material design because of shadows.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYND97hTvdJgIWTRIUEuG4VUlCArbhz_DfBfEpc7DDG-h34DK5w5w9ev7Y3tB7y35BjJI35RfDAHyCX8nHe_aZcIpsccyUYB71ZdyJ5HYBAU5YrGKZXeG9RfsHqXV4U-CA4h4KsIJapqy/s1600/Screen+Shot+07-29-16+at+10.45+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="394" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYND97hTvdJgIWTRIUEuG4VUlCArbhz_DfBfEpc7DDG-h34DK5w5w9ev7Y3tB7y35BjJI35RfDAHyCX8nHe_aZcIpsccyUYB71ZdyJ5HYBAU5YrGKZXeG9RfsHqXV4U-CA4h4KsIJapqy/s640/Screen+Shot+07-29-16+at+10.45+AM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Shadows make an illusion that there is a space between the application and the screen glass. But it is only small feature of the concept.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRLniNy6Y57VNZGCSGDzZ9Bjp_cXZsg9GLl3Vj-c_RSHuhSpc0c2JL-Lqc9pFU1QdK9pbpfLiADNUw4cODySxV2wH4LyFQkg7cDM8BVojK4WVq6abp6mXzbcbjLqreaPaBl4O0-6MpDVKU/s1600/60f79e3731a65dc911c1a703dacdeac4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRLniNy6Y57VNZGCSGDzZ9Bjp_cXZsg9GLl3Vj-c_RSHuhSpc0c2JL-Lqc9pFU1QdK9pbpfLiADNUw4cODySxV2wH4LyFQkg7cDM8BVojK4WVq6abp6mXzbcbjLqreaPaBl4O0-6MpDVKU/s640/60f79e3731a65dc911c1a703dacdeac4.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
The most impressive part of material design is motion. It is a tool to make the application alive.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYEoGWMttYw9SdeXp_sUHLrXZdQUOK9_fHHjZKnqlefEFLlEIw-b58JxDEmCjWtnZ3ZV6oKMzL0GAqrPURysWMJg2_pBDsPqylfJAvXSVBMg-UlwDpQjHAng4ZjFE4WhPtvha8nen0JKO/s1600/5827dc4333ddb3f2575949c5d7f20abf.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYEoGWMttYw9SdeXp_sUHLrXZdQUOK9_fHHjZKnqlefEFLlEIw-b58JxDEmCjWtnZ3ZV6oKMzL0GAqrPURysWMJg2_pBDsPqylfJAvXSVBMg-UlwDpQjHAng4ZjFE4WhPtvha8nen0JKO/s640/5827dc4333ddb3f2575949c5d7f20abf.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
The movement in animation cannot be linear. Material design uses acceleration and deceleration to show this realistic effect. Elements bounce a bit while they are going to stop.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpy88eTLVO6sou0ztZY-4dQ8leb4S87zdQ71cobB1Bt1aEnW0Mw9mqdfVtP0qUWwX0AvSy-J10ic7E726z6gKVbiuI6FP3FC0kn1_cFPlwdTWLzUt-nxLrA3qAzpLQNOlr0-QENXG_97Oe/s1600/90dc86f2a07aede487f4be210aa9b712.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpy88eTLVO6sou0ztZY-4dQ8leb4S87zdQ71cobB1Bt1aEnW0Mw9mqdfVtP0qUWwX0AvSy-J10ic7E726z6gKVbiuI6FP3FC0kn1_cFPlwdTWLzUt-nxLrA3qAzpLQNOlr0-QENXG_97Oe/s640/90dc86f2a07aede487f4be210aa9b712.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
You can see here how elements appear from nowhere and stop with deceleration.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBw-s_G7v6qAAwMW0PcNzHLMvtoKllrrL4ZY1Xgz77ieHAikgIaDWmqd_hzyPEh6FiWY0r4o4-FAzQkMHErJgHrZH0xZ1KNT5wJVF481wqK4-kg9PuGMQXwDX9o937TKt1jZgLPy_PX3IN/s1600/340442500e9a246168d8013298026a54.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBw-s_G7v6qAAwMW0PcNzHLMvtoKllrrL4ZY1Xgz77ieHAikgIaDWmqd_hzyPEh6FiWY0r4o4-FAzQkMHErJgHrZH0xZ1KNT5wJVF481wqK4-kg9PuGMQXwDX9o937TKt1jZgLPy_PX3IN/s640/340442500e9a246168d8013298026a54.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
The material design is responsive. This term is overused by designers. In this case it means that users don't wait for UI response but see result of his actions (tapping, dragging etc) immediately. It never keeps users waiting. An average transition have a 1/3 second duration. Material design just "hide" this delay under the motion.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVOj4vycIQeMlh0aIuUGc5gM8_EJoUuL7t8wvJKZ4S__hwxf5CwdOMKnY1vrnvZcQbJuG8gGyllWLXSbalv2Ih9JTR-IKW7w0rjE0VH8S3ca63AA40IoIiF7SVNhRmvnkHaQfCyRHmCGQI/s1600/1d65d5efde6565852474dbd0faa3df4f.gif" imageanchor="1"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVOj4vycIQeMlh0aIuUGc5gM8_EJoUuL7t8wvJKZ4S__hwxf5CwdOMKnY1vrnvZcQbJuG8gGyllWLXSbalv2Ih9JTR-IKW7w0rjE0VH8S3ca63AA40IoIiF7SVNhRmvnkHaQfCyRHmCGQI/s640/1d65d5efde6565852474dbd0faa3df4f.gif" width="640" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Elements in material design are aware of each other. So if you move some of them the others will move also. They call is a choreographed motion.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijeXSi-leqZxjzUVuJNt875LG-_pO2bw8fEn8J5su41YQDTZrvblWugt7UVdC_GQ4CeTyunb-D7DDu10FjmoafwDQauk41rQyPzM3N7QQQhA4998KI1elXQAEue5GsQI8c9UlfzzAkMnjZ/s1600/0a199475c6b73dc74d4d56edeeb46f73.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijeXSi-leqZxjzUVuJNt875LG-_pO2bw8fEn8J5su41YQDTZrvblWugt7UVdC_GQ4CeTyunb-D7DDu10FjmoafwDQauk41rQyPzM3N7QQQhA4998KI1elXQAEue5GsQI8c9UlfzzAkMnjZ/s640/0a199475c6b73dc74d4d56edeeb46f73.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
The motion gives you visual understanding of what is going on on the screen. Users understand where new elements are coming from.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFDjH0eg1_CNnYqGkLLz75jIsXYouF8QFSF_Q2qiD4ouR4pREdblJy0Eitwb674RINGpIHjx1C1M7Dan6WgmyF5mmz5jS7pO34JEMsQQKBRgLoA3_slUn_wRUpXBR6_gHU4Xwy1ZVcJYAt/s1600/ce8e6a47621a6da8fc11bb994f3ec128.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFDjH0eg1_CNnYqGkLLz75jIsXYouF8QFSF_Q2qiD4ouR4pREdblJy0Eitwb674RINGpIHjx1C1M7Dan6WgmyF5mmz5jS7pO34JEMsQQKBRgLoA3_slUn_wRUpXBR6_gHU4Xwy1ZVcJYAt/s640/ce8e6a47621a6da8fc11bb994f3ec128.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe-ow-qGU_LEFB8MfmYszeQ74uG77dRTg-hZQgYg-hIC2R8LbuFuLNTk0Kf4dUgn3rfML9dfBUimbFwemrRkhlJR-2cRrrabChdCMbIedkUkySd3TTJIgWExU55OejAMGDQHSzXRavMvhD/s1600/e064b5bdf2285c6dd48d586c30ea64f2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe-ow-qGU_LEFB8MfmYszeQ74uG77dRTg-hZQgYg-hIC2R8LbuFuLNTk0Kf4dUgn3rfML9dfBUimbFwemrRkhlJR-2cRrrabChdCMbIedkUkySd3TTJIgWExU55OejAMGDQHSzXRavMvhD/s640/e064b5bdf2285c6dd48d586c30ea64f2.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
Material design use connection between start and final screen in motion even if it is different windows. Designer used pink color from one pressed button to connect it with next screen. Users attention is captured with one element and the motion looks better organized.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwNQ-YdT3BFYZekq_XugbKlgcD252qGykXBVmnPpv0iWEPLHD_AAGjtPlFtN5chV0nl-zQ9ykzcNX7pJMql_YQPnd71X74rEsGLHK8sIX3zudBmLWa3U2MlWxwGcFNfl9v6_z3_Qh4fqu/s1600/e6488a86b86027503341cad45bac6a3b.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwNQ-YdT3BFYZekq_XugbKlgcD252qGykXBVmnPpv0iWEPLHD_AAGjtPlFtN5chV0nl-zQ9ykzcNX7pJMql_YQPnd71X74rEsGLHK8sIX3zudBmLWa3U2MlWxwGcFNfl9v6_z3_Qh4fqu/s640/e6488a86b86027503341cad45bac6a3b.gif" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
One of the most recognizable characteristic of material design is to polish details. This is kind of making small elements more attractive and interactive in UI. Look how these icons become responsive.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0oc3kNVZwMqYyAxf0X1E8W4qebjg8A3qhNVkop3QeYeMQmfXUGJVdm37x2vVAJo9H5aIE7Yj47zkwXhvQv7bl-9yai5lwc8sszOn01OWVE-17pRpJ1qI9NZKirmulO2R3xjrCrIQV8gT9/s1600/92702e4543c916e7bc67e9efc47d9b51.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0oc3kNVZwMqYyAxf0X1E8W4qebjg8A3qhNVkop3QeYeMQmfXUGJVdm37x2vVAJo9H5aIE7Yj47zkwXhvQv7bl-9yai5lwc8sszOn01OWVE-17pRpJ1qI9NZKirmulO2R3xjrCrIQV8gT9/s640/92702e4543c916e7bc67e9efc47d9b51.gif" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zVtIo_yfgrrvfxEQj83l1eAoNTTEj_ZYBuSmZVss6rzzb0e_ZZOUwVgoO4mXQgnaSFzcXuEABTGm1MYBzNSYebb7VZnqCqjEFleSN9UauhpSsHe8cXmtQ3fXhDTRL4_JbHmExSi5rAV_/s1600/27250cba86adae1e6d1eea6d59aa7622.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zVtIo_yfgrrvfxEQj83l1eAoNTTEj_ZYBuSmZVss6rzzb0e_ZZOUwVgoO4mXQgnaSFzcXuEABTGm1MYBzNSYebb7VZnqCqjEFleSN9UauhpSsHe8cXmtQ3fXhDTRL4_JbHmExSi5rAV_/s640/27250cba86adae1e6d1eea6d59aa7622.gif" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOySGNQpT2CRAvx-tJi993SNqRGyjZGYp3G0O5LWzkJ2JJ4svLeqE2tao8v_9CpcND53s2BQjbYGBDbF889PN-bc5cYYQ9D3s3yjv-LbePbRD43AvG94TlqcU8Stu9GcHiSYPlpQDJsOGX/s1600/ea70d919b42ed3ebfb7a3494d04bed88.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOySGNQpT2CRAvx-tJi993SNqRGyjZGYp3G0O5LWzkJ2JJ4svLeqE2tao8v_9CpcND53s2BQjbYGBDbF889PN-bc5cYYQ9D3s3yjv-LbePbRD43AvG94TlqcU8Stu9GcHiSYPlpQDJsOGX/s640/ea70d919b42ed3ebfb7a3494d04bed88.gif" width="640" /></a></div>
<br />
<br />
<br />
Material design is not just a feature of Android. Actually it is big discovering of user interfaces and how they interact with users. The ideas of this project will live in future design concepts. Google created a visual language that synthesized classic principles of good design with the innovation and possibility of technology and science.<br />
<br />
<br />
Video
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Q8TXgCzxEnw" width="560"></iframe>
<br />
Interview with designers
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/rrT6v5sOwJg" width="560"></iframe><br />
<br />
<br />
Full guidelines of Material Design here: https://material.google.com<br />
<br />
Українська версія статті <a href="http://webdesign-review.blogspot.com/2016/08/blog-post.html" target="_blank">"Принципи матеріального дизайну і чим він загрошує дизайнерам"</a>Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-85918527144161174482016-05-31T13:38:00.000+03:002016-05-31T14:13:35.601+03:00A secret of reCAPTCHADid you know that reCAPTCHA technology helped to digitize text from scanned books? There were 200 million CAPTCHAs typed everyday. Scientists decided to use this labor for benefit. Detailed in video of Luis von Ahn - one of reCAPTCHA creators.
<iframe width="600" height="315" src="https://www.youtube.com/embed/cQl6jUjFjp4" frameborder="0" allowfullscreen></iframe>Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-21809871223660491732016-05-23T10:35:00.000+03:002016-05-23T10:35:35.380+03:00Parallax scrolling effect <div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgKplHt4dm3nCZkLXl3iDFdJDcN2qN-D1q2OT5q9S3IKtt9ty9o7e2Y4AQfLqKK8xpoe-PJ4XnQLf0lxCKYR1MwEYVIGME726B-TGiExYd3IZVGj4sICYnRXsub22YslxWhfWsS30YhmFo/s1600/Screen-Shot-05-19-gv16-at-04.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgKplHt4dm3nCZkLXl3iDFdJDcN2qN-D1q2OT5q9S3IKtt9ty9o7e2Y4AQfLqKK8xpoe-PJ4XnQLf0lxCKYR1MwEYVIGME726B-TGiExYd3IZVGj4sICYnRXsub22YslxWhfWsS30YhmFo/s640/Screen-Shot-05-19-gv16-at-04.gif" width="640" /></a></div>
<br />
<br />
Do you know something about parallax? It is an optical effect when objects that are closer moved more quickly than objects behind them. This effect is well known in astronomy but now it becames a trend in web-design.<br />
<br />
<br />
<a name='more'></a><br />
<br />
<br />
In 2011 Ian Coyle from advertisement company "Wieden+Kennedy" developed a website for Nike - "Nike Better World". He used this optical effect in webdesign in very impressive way.
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/kmGDwm5-a80" width="560"></iframe>
<br />
<br />
The website disappeared already so we can watch a video of it.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguknxt1dDyB_IvNqk6E6eZmxqMAziwS6-LWf30hsCLCHvwcpbw3ayPfLXNg2DfHrpxai4uk_vgnotCUedSpBRVDfVho0VytICbUgY6yiKf4uAlgxmtzFRBQsDKGmhkaJmJnf9EiEdiTWEq/s1600/Screen+Shot+05-19-16+at+03.24+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguknxt1dDyB_IvNqk6E6eZmxqMAziwS6-LWf30hsCLCHvwcpbw3ayPfLXNg2DfHrpxai4uk_vgnotCUedSpBRVDfVho0VytICbUgY6yiKf4uAlgxmtzFRBQsDKGmhkaJmJnf9EiEdiTWEq/s640/Screen+Shot+05-19-16+at+03.24+PM.PNG" width="640" /></a></div>
<br />
This technology became possible after HTML5 implementation. Web designers could <a href="http://www.boy-coy.com/#contact" rel="nofollow" target="_blank">move elements</a> with JavaScript. It became the end of flash animation in web design.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhApFaeja1n4xLM-D5DrteMHLhO-M3_Ioxw8J4E0Fjet-fQ91lDc7-kekAHvyYBodTtI7jdL8sDGXcNyh6aXSTRb78hV2Zqlgbw_QnG32ZP64tDx2GHMvcJwQ7_JGbzwH8ClbgPc9By1TeK/s1600/Screen-Shot-05-19-16-at-04.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhApFaeja1n4xLM-D5DrteMHLhO-M3_Ioxw8J4E0Fjet-fQ91lDc7-kekAHvyYBodTtI7jdL8sDGXcNyh6aXSTRb78hV2Zqlgbw_QnG32ZP64tDx2GHMvcJwQ7_JGbzwH8ClbgPc9By1TeK/s640/Screen-Shot-05-19-16-at-04.gif" width="640" /></a></div>
<br />
<a href="http://uk.rimmellondon.com/" rel="nofollow" target="_blank">Motion of elements</a> in different direction is a popular trick that makes website more dynamic.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj87RTukezImIAy_c3ZHMXTulKfq4SGkI5by29W90I8pumb4mH9asYoXIbS6LLA4dbmaaaGfhqiMqZq2YfFvCQuJ0qu7IGfA1CAKwLmLR4unLBPq23OUmnZOi9ANthLGaLQ7WzPTBjr4O2z/s1600/Screen-Shot-05-19-16-at-03.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj87RTukezImIAy_c3ZHMXTulKfq4SGkI5by29W90I8pumb4mH9asYoXIbS6LLA4dbmaaaGfhqiMqZq2YfFvCQuJ0qu7IGfA1CAKwLmLR4unLBPq23OUmnZOi9ANthLGaLQ7WzPTBjr4O2z/s640/Screen-Shot-05-19-16-at-03.gif" width="640" /></a></div>
<br />
Slow motion of background makes <a href="http://hotdot.pro/#digitaltrip" rel="nofollow" target="_blank">distinct 3D effect.</a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8YNYXNmEjTiE9LaoOr14lYNQAW-4cjQh-KJ63aEKChmF_XiYeVflDCRd2cB_xGxWE09DAXSi2JmOXlDbOGPncTJ8rzNSzKgOl2S_bYiUolxR3JVN-sBhA5Tf-ayy6zl0vSv3FVq-wmjuF/s1600/Screen-Shot-05-19-16c-at-04.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8YNYXNmEjTiE9LaoOr14lYNQAW-4cjQh-KJ63aEKChmF_XiYeVflDCRd2cB_xGxWE09DAXSi2JmOXlDbOGPncTJ8rzNSzKgOl2S_bYiUolxR3JVN-sBhA5Tf-ayy6zl0vSv3FVq-wmjuF/s640/Screen-Shot-05-19-16c-at-04.gif" width="640" /></a></div>
<br />
An object might be fixed during background motion. Users feel like they move with it <a href="http://islreview.com/" rel="nofollow" target="_blank">together</a>.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Qudg57eoGCKPoStMCPUGx686xtpJv5boXPIpmTRnYflUjJQYzi4QfaSr8KXR-tNN0mlw42ca1dmbwpFyHioGZsNs6OvO4xf8j96BHP6AO7Iz0SKAQOsb64grfQM3mWcC4TnH0FKac8Xy/s1600/Screen-Shot-05-19-16-at-05.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Qudg57eoGCKPoStMCPUGx686xtpJv5boXPIpmTRnYflUjJQYzi4QfaSr8KXR-tNN0mlw42ca1dmbwpFyHioGZsNs6OvO4xf8j96BHP6AO7Iz0SKAQOsb64grfQM3mWcC4TnH0FKac8Xy/s640/Screen-Shot-05-19-16-at-05.gif" width="640" /></a></div>
<br />
Parallax scrolling makes<a href="http://www.madwell.com/" rel="nofollow" target="_blank"> the image </a><a href="http://www.madwell.com/" rel="nofollow" target="_blank">impressively </a><a href="http://www.madwell.com/" rel="nofollow" target="_blank">deep</a>.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCkp_deoN7-F481DH2SwsH1lzMfGo8_SmaNZ2oLPPIDdfM_-Czec1neLwN3bkMYGcM8RX13-Kck75fv8-Q9utjIOy0dnni_HjYKrLh7CmVYNVY7KXwlh2aCuWcgTjU6uiTbOL63nihDFIC/s1600/Screen+Shot+05-19-16+at+04.39+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCkp_deoN7-F481DH2SwsH1lzMfGo8_SmaNZ2oLPPIDdfM_-Czec1neLwN3bkMYGcM8RX13-Kck75fv8-Q9utjIOy0dnni_HjYKrLh7CmVYNVY7KXwlh2aCuWcgTjU6uiTbOL63nihDFIC/s640/Screen+Shot+05-19-16+at+04.39+PM.PNG" width="640" /></a></div>
<br />
Webdesigners add some blurred elements on the fore layer to make<a href="http://www.sweez.com.br/#a_sweez" rel="nofollow" target="_blank"> image even more deep</a>.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCVHYaSuv-2n4LOTJOad7m6m8tOG7LIxGj-gcHrzRlpfGQl6vX_LdslVbSQ9LJ1qYjmqmQy8RG3ss1pJuRDkpWEalH6vd_3K886SyMsxUBgrKdgQY62i4fdbYhoy3mX9cxHglv2YeYqrOP/s1600/Screen+Shot+05-19-16+at+04.10+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCVHYaSuv-2n4LOTJOad7m6m8tOG7LIxGj-gcHrzRlpfGQl6vX_LdslVbSQ9LJ1qYjmqmQy8RG3ss1pJuRDkpWEalH6vd_3K886SyMsxUBgrKdgQY62i4fdbYhoy3mX9cxHglv2YeYqrOP/s640/Screen+Shot+05-19-16+at+04.10+PM.PNG" width="640" /></a></div>
<br />
Some websites use additional scrolling navigation. Like on <a href="http://www.teapot-creation.com/#/page/home" rel="nofollow" target="_blank">this website</a> in the right side.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy5P34uqiWCdqH5-i6gItL7JsQm7YUWVEUMAl53kuvjIMcEsbpMmTlJWR095Cil8x0aU0VbBpOxdtjcCqJyaOu2cYVjL_iXtlc6wYGjRpq5zGUxeKA4qcGrV27YTizZWCvjZO_3qQg8t8P/s1600/Screen+Shot+05-19-16+at+03.57+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy5P34uqiWCdqH5-i6gItL7JsQm7YUWVEUMAl53kuvjIMcEsbpMmTlJWR095Cil8x0aU0VbBpOxdtjcCqJyaOu2cYVjL_iXtlc6wYGjRpq5zGUxeKA4qcGrV27YTizZWCvjZO_3qQg8t8P/s640/Screen+Shot+05-19-16+at+03.57+PM.PNG" width="640" /></a></div>
<br />
The parallax effect together with other motion are widely used by <a href="http://olszanska.pl/#page-strona-glowna" rel="nofollow" target="_blank">artists </a>and design studious to attract more attention.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlZMstBsL1I9Jn0dzS__-1UQF4PR0R6GHh8QAzICkTz6b9nqioVL5sROiuHMsHaem2L7EEvy0D4KosI0QjZtfWna-7hOwSI1NbI8oLW_MnX9l3W_P9YJPh8eJgtP6atsrKbZw3kOv8tTl7/s1600/Screen+Shot+05-19-16+at+03.52+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlZMstBsL1I9Jn0dzS__-1UQF4PR0R6GHh8QAzICkTz6b9nqioVL5sROiuHMsHaem2L7EEvy0D4KosI0QjZtfWna-7hOwSI1NbI8oLW_MnX9l3W_P9YJPh8eJgtP6atsrKbZw3kOv8tTl7/s640/Screen+Shot+05-19-16+at+03.52+PM.PNG" width="640" /></a></div>
<br />
JavaScript and HTML5 make remarkable changes in web-design but the development of such websites is <a href="http://www.numero10.ch/fr/home/" rel="nofollow" target="_blank">very long and difficult</a>.Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-48632937604367155742016-05-09T11:56:00.001+03:002016-05-09T13:08:14.621+03:00How to prevent slips in UX designSlips is some action that users make unconsciously. For example if user press one button instead an other on keyboard. Or press "close" instead of "save". Slip can be made by experienced users as well as new one. Designers must prevent slips.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP2WAnBtctA9IffXKRpS2TSxbNLA1DWSI9_4K-zDsBa5K9d5Nv86bl8STuhdaRXlMYOyP2fu6Ca4exrF-bAITKSlKLDRwwuIgagasp2YgNRBZvvcEtNoh2UxxstYnfgD8ml674cjG6-CDB/s1600/Screen+Shot+05-08-16+at+02.10+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP2WAnBtctA9IffXKRpS2TSxbNLA1DWSI9_4K-zDsBa5K9d5Nv86bl8STuhdaRXlMYOyP2fu6Ca4exrF-bAITKSlKLDRwwuIgagasp2YgNRBZvvcEtNoh2UxxstYnfgD8ml674cjG6-CDB/s640/Screen+Shot+05-08-16+at+02.10+PM.PNG" width="640" /></a></div>
If some user can do wrong action and the system know that it is wrong - a designer has to disable this action. A return flight is always later than a departure. So previous dates might be disabled to prevent their selection. Users can free their memory from unnecessary information.<br />
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHijXLlp51Ys54bZyvhMjxZcwmoz7NJlwCAWp1ewKkG3Ul5jTq4w19HCBMlhyphenhyphennvHWK02h6fsBc8g2lnHS4jxrEhKlhbqzy5Fgs38upezDAyJagZwz5bmRJ-tNe7OG2rRpZYOjNDtE10lP/s1600/Screen+Shot+05-08-16+at+02.37+PM+001.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHijXLlp51Ys54bZyvhMjxZcwmoz7NJlwCAWp1ewKkG3Ul5jTq4w19HCBMlhyphenhyphennvHWK02h6fsBc8g2lnHS4jxrEhKlhbqzy5Fgs38upezDAyJagZwz5bmRJ-tNe7OG2rRpZYOjNDtE10lP/s640/Screen+Shot+05-08-16+at+02.37+PM+001.PNG" width="640" /></a></div>
<br />
Many slips come with inaccurate typing. A mobile keyboard is too small and users often press other button. An interface might show clickable search suggestions to users. Such as list of potential destinations on this page. It is good example of "low calorie" design - users are thankful because they have to type less.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBG02rNMNRSUzkaCtgAfW8ehZ6pq5TjkqzrDhcpxJTDFEFEdDO8mPVhnBevN4la-mpmasvKjdelpWQCbQelRzJ9KPryP6jXj42sSBl0najHiauRpZrnvpHdTmY67E8sN2d2FeBxHofHNT/s1600/Screen+Shot+05-08-16+at+02.45+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="274" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBG02rNMNRSUzkaCtgAfW8ehZ6pq5TjkqzrDhcpxJTDFEFEdDO8mPVhnBevN4la-mpmasvKjdelpWQCbQelRzJ9KPryP6jXj42sSBl0najHiauRpZrnvpHdTmY67E8sN2d2FeBxHofHNT/s640/Screen+Shot+05-08-16+at+02.45+PM.PNG" width="640" /></a></div>
<br />
Some websites are so smart that can recognize a slip and give users right suggestions.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh504bHWop4jweVoYDJvYYu8mW__foAKt9-JYEXB1CnuZO25zxBebI5tqHAZRQIgONqcLeFAf2pdF6ZOI3alcJtvhDhO6IQba0DM7NyN1H00LOOhYc8sOO5G6fSZUvgfRsI9iQAf6ErH7lr/s1600/Screen+Shot+05-09-16+at+03.26+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh504bHWop4jweVoYDJvYYu8mW__foAKt9-JYEXB1CnuZO25zxBebI5tqHAZRQIgONqcLeFAf2pdF6ZOI3alcJtvhDhO6IQba0DM7NyN1H00LOOhYc8sOO5G6fSZUvgfRsI9iQAf6ErH7lr/s640/Screen+Shot+05-09-16+at+03.26+PM.PNG" width="640" /></a></div>
Users might forget to fill some fields. It is also a slip because they know how to do right but did wrong. Designers can make users experience easy if they put some reasonable defaults.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEQJVz5yWFuZXJWGBAB5xwt1QfZGGqcOYGZLFQTLVGf9gme3J1HVFNE6p0Nh-qt__svKRj6TgPCJRtvcpuTi02LaWUsRmwSlZ7tvUnl-AdKmenvxX14rWmkDaSBpGBghPWaZjg2AwMPipY/s1600/Screen+Shot+05-08-16+at+03.31+PM.PNG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEQJVz5yWFuZXJWGBAB5xwt1QfZGGqcOYGZLFQTLVGf9gme3J1HVFNE6p0Nh-qt__svKRj6TgPCJRtvcpuTi02LaWUsRmwSlZ7tvUnl-AdKmenvxX14rWmkDaSBpGBghPWaZjg2AwMPipY/s640/Screen+Shot+05-08-16+at+03.31+PM.PNG" width="640" /></a><br />
<br />
<br />
On this on-line marketing tool the start date and campaign name are filled by default when user just create new one. So there is no need to show error message.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAjl_jzQpfy7agpjOUmWDBK_v9RoYE5807M8DoAqtmznWINiClOURAhfeoepxVRKVSM73qJB4g6acc2H3AgwvnIq7T0iFkcYx4fmtV8LRYlWuJhOSCQuDPFMwQzUrC5_IOHiJ0iDjV9h9J/s1600/Screen+Shot+05-08-16+at+04.06+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAjl_jzQpfy7agpjOUmWDBK_v9RoYE5807M8DoAqtmznWINiClOURAhfeoepxVRKVSM73qJB4g6acc2H3AgwvnIq7T0iFkcYx4fmtV8LRYlWuJhOSCQuDPFMwQzUrC5_IOHiJ0iDjV9h9J/s640/Screen+Shot+05-08-16+at+04.06+PM.PNG" width="640" /></a></div>
<br />
Users make often mistakes in an important fields like phone or credit card numbers. A designer can make this data easy to check by formating. Modern JavaScript technology can format the users’ input as they type.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXWIu1npQ0epWWSAdOMvXXUUsSVNnAa3Y1jEnrZYdr-9_rwfTRu8iq3QE7Q8RECwAvyGX440tK-9kJdC04pkI9akYxf5SYum0WNM3_yLhyr7uwgljkKnJoJPvQoN4LcMHuO9E01Ui7cLFh/s1600/Screen+Shot+05-08-16+at+04.24+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXWIu1npQ0epWWSAdOMvXXUUsSVNnAa3Y1jEnrZYdr-9_rwfTRu8iq3QE7Q8RECwAvyGX440tK-9kJdC04pkI9akYxf5SYum0WNM3_yLhyr7uwgljkKnJoJPvQoN4LcMHuO9E01Ui7cLFh/s640/Screen+Shot+05-08-16+at+04.24+PM.PNG" width="640" /></a></div>
<br />
It is very hard to check 16 digits in-line. So a credit card number is splitted by spaces usually .<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS_VwXqCVSqAEiQs8JFI3yfYOtnX2yXhVLI4xAO00H5wAdNITo9hrKtLHZ1bT8md1qTzIItzjuQpuCKVC5kpidjY4S0odkBYD6wupeb5ZbuYJynH51BdHT3XBpakzJvujD8vUCx3q7T1_r/s1600/Screen+Shot+05-08-16+at+04.20+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS_VwXqCVSqAEiQs8JFI3yfYOtnX2yXhVLI4xAO00H5wAdNITo9hrKtLHZ1bT8md1qTzIItzjuQpuCKVC5kpidjY4S0odkBYD6wupeb5ZbuYJynH51BdHT3XBpakzJvujD8vUCx3q7T1_r/s640/Screen+Shot+05-08-16+at+04.20+PM.PNG" width="640" /></a></div>
<br />
If the field is very important (like email, or password) the slip can be critical fault. Conformation of these fields are necessary part of slip prevention.<br />
<br />
<br />
<br />
A designer have to give users an opportunity to fix their slips. Have a look at these messengers.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzoK1HOEyi4muXbCNdoLUDs4fJE50CVp2Y1o7dkOhDIRRWALSPS0kkZNv74GMyiSaofSDFCJSNNu_15AXf-YoTdrfMdIMd8OW89tduSKKMMD-H2jZu492lYm93v6sn4OC4wc1_XZDketyy/s1600/Screen+Shot+05-09-16+at+03.47+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzoK1HOEyi4muXbCNdoLUDs4fJE50CVp2Y1o7dkOhDIRRWALSPS0kkZNv74GMyiSaofSDFCJSNNu_15AXf-YoTdrfMdIMd8OW89tduSKKMMD-H2jZu492lYm93v6sn4OC4wc1_XZDketyy/s640/Screen+Shot+05-09-16+at+03.47+PM.PNG" width="640" /></a></div>
<br />
Users cannot edit a message in Line messenger.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN_DAAkCaCzcHZDvs-8Ap0XDtjVZe3U8UZ_ZmrLNUAC0XwvYbQWIY07h5wnwUhKUpkGUvmTeLiK1yvohxXR6sElfUs_USoleENDw2M9Z_EhHVlU17YJa4g5WdSgzx4OKQBy537-CDycTH4/s1600/Screen+Shot+05-09-16+at+03.48+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN_DAAkCaCzcHZDvs-8Ap0XDtjVZe3U8UZ_ZmrLNUAC0XwvYbQWIY07h5wnwUhKUpkGUvmTeLiK1yvohxXR6sElfUs_USoleENDw2M9Z_EhHVlU17YJa4g5WdSgzx4OKQBy537-CDycTH4/s640/Screen+Shot+05-09-16+at+03.48+PM.PNG" width="640" /></a></div>
<br />
Users can delete a message in facebook messenger.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrfpOfSx0f5-oCj-NtaA0Or3TKtUobpVhT3BtLTn9H5j9cDKh74YtRvClY3lrmbGoXctGSQqY3np3menqLH1CxAQvPuQ6zwbrRQ2bjz-gOtTZsTEO4634tltHAR5AXOvZFoGbQkDYQsXuu/s1600/Screen+Shot+05-09-16+at+03.45+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrfpOfSx0f5-oCj-NtaA0Or3TKtUobpVhT3BtLTn9H5j9cDKh74YtRvClY3lrmbGoXctGSQqY3np3menqLH1CxAQvPuQ6zwbrRQ2bjz-gOtTZsTEO4634tltHAR5AXOvZFoGbQkDYQsXuu/s640/Screen+Shot+05-09-16+at+03.45+PM.PNG" width="640" /></a></div>
<br />
Users can edit the last message in Skype. It is very good UX to fix slip problem.<br />
<br />
<br />
<br />
<br />
<b>Summary</b><br />
Slips are often errors of all types of users - new and experienced. Designers have to prevent slips with good design, such as:<br />
1) Disable wrong actions.<br />
2) Make suggestions to users.<br />
3) Use default value of fields if it is possible.<br />
4) Give users tool to check their information or ask for confirmation.<br />
5) Give users opportunity to fix a slip.Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-20684197972627735402016-04-25T10:04:00.000+03:002016-04-25T10:29:59.213+03:00Visibility of system status<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNRoDc3LRZAW9u9-sXtVRhZbe764im_3mRqFlGZBIwzMobjhvf2u_QARHtc2exxJYSK7ElI_6BNtTv77q_ApdIt1SFLq0hniaGjakcslnjbakg6aDIEBlXFsgdqGlFaaRWz_b8zGHLr2K-/s1600/Screen+Shot+04-25-16+at+01.17+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNRoDc3LRZAW9u9-sXtVRhZbe764im_3mRqFlGZBIwzMobjhvf2u_QARHtc2exxJYSK7ElI_6BNtTv77q_ApdIt1SFLq0hniaGjakcslnjbakg6aDIEBlXFsgdqGlFaaRWz_b8zGHLr2K-/s640/Screen+Shot+04-25-16+at+01.17+PM.PNG" width="640" /></a></div>
<br />
<br />
Designers usually read usecases, requirements and they know a lot about system. The interface looks familiar to them. But for the users it is not familiar. If something goes wrong - they suspect the service fault in this problem. They became scary. If designers want to avoid problems - they try to make inner processes (upload, search, update tec.) visible. We are going to talk about viability of a system in this article.<br />
<br />
<br />
<a name='more'></a><br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxG5lgKd-vSrheueajoy_2gr63CxbTljogXd9vkeTYK7Qbbh0DxjR1tfpxPAPJRTzapsHFwJ124fANzz2zi17od-JUqDRMl1O_rFAJchv7-a3kK4DoZD77nnXISEoNB3gRx_pIsP4L66iX/s1600/Screen+Shot+04-23-16+at+01.28+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxG5lgKd-vSrheueajoy_2gr63CxbTljogXd9vkeTYK7Qbbh0DxjR1tfpxPAPJRTzapsHFwJ124fANzz2zi17od-JUqDRMl1O_rFAJchv7-a3kK4DoZD77nnXISEoNB3gRx_pIsP4L66iX/s640/Screen+Shot+04-23-16+at+01.28+PM.PNG" width="640" /></a></div>
<br />
<b>1) Show users what is his mistake. </b><br />
Make smart error notifications on every form that have mandatory fields.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcl-6k5-tRhrTOjvm1TFdxyL3ubUCCfvF3bqCQ9uckxsqSzNegYukSxb-tgQPA7CX7HRgrtDaMwKspjQJFNiZYVWJJUPd3mxGeyUPXFtpaB3d98-BMDIXi2uVT0shmlw_N7BZ0FEUj-aw7/s1600/Screen+Shot+04-23-16+at+01.35+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcl-6k5-tRhrTOjvm1TFdxyL3ubUCCfvF3bqCQ9uckxsqSzNegYukSxb-tgQPA7CX7HRgrtDaMwKspjQJFNiZYVWJJUPd3mxGeyUPXFtpaB3d98-BMDIXi2uVT0shmlw_N7BZ0FEUj-aw7/s640/Screen+Shot+04-23-16+at+01.35+PM.PNG" width="640" /></a></div>
<br />
Red color is for identification of critical problems.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghA-u8GGw4KzdhVXW0Ju5PsnZqq3dE3GQp1pyFdwfbRKqbCveE4WvXZGd_sbFgE5M4Okt5LYaEiSOUSZ19Az5doVXXFXM3sAQ3j_JupJxOyvfxRiJN3aDj8Dwfhc1-mnGa250aMeEFItSM/s1600/Screen+Shot+04-23-16+at+01.57+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghA-u8GGw4KzdhVXW0Ju5PsnZqq3dE3GQp1pyFdwfbRKqbCveE4WvXZGd_sbFgE5M4Okt5LYaEiSOUSZ19Az5doVXXFXM3sAQ3j_JupJxOyvfxRiJN3aDj8Dwfhc1-mnGa250aMeEFItSM/s640/Screen+Shot+04-23-16+at+01.57+PM.PNG" width="640" /></a></div>
<br />
If there are many fields - show which one is wrong and why is it wrong.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WRYENK7SzU4CXWrmPGMiN1Bp3zu9KOYAB0S9iM3XZssPMwfqva426YcUm991GzibFZ1QmeYGtQ5QNqfN_tG5Eql56Zmf-XHH2hOYSNIEnRRSyDlGhkqXJYJaZ_7G650Az72NiLwr3oCw/s1600/Screen+Shot+04-23-16+at+02.43+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WRYENK7SzU4CXWrmPGMiN1Bp3zu9KOYAB0S9iM3XZssPMwfqva426YcUm991GzibFZ1QmeYGtQ5QNqfN_tG5Eql56Zmf-XHH2hOYSNIEnRRSyDlGhkqXJYJaZ_7G650Az72NiLwr3oCw/s640/Screen+Shot+04-23-16+at+02.43+PM.PNG" width="640" /></a></div>
<br />
If you don't want make your customers scary - you may design the message in other colors.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHcunN0mjKq7bndviMtXxYJH0zeigjWOkOtjOiiiaqKLGAVUOlsrzkTIjDqxo3GPQDbiZ-o9QBLu2hRcXvccH-xsds8bBt5I5gZws-9_3-LKf6NXyjNDjMzxLlcMZj__2pUroahdJ2ZwK/s1600/Screen+Shot+04-23-16+at+01.39+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHcunN0mjKq7bndviMtXxYJH0zeigjWOkOtjOiiiaqKLGAVUOlsrzkTIjDqxo3GPQDbiZ-o9QBLu2hRcXvccH-xsds8bBt5I5gZws-9_3-LKf6NXyjNDjMzxLlcMZj__2pUroahdJ2ZwK/s640/Screen+Shot+04-23-16+at+01.39+PM.PNG" width="640" /></a></div>
<br />
Yellow is ok. This service added even small instruction for users who cannot login.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWpv-nB3OEWs3r2ywDnQf0iGSWKLt3e8CIwPLKoQp3jEXOAXLZwfqr8veIYGv2Mz0vCsVqkJu5J8Sbg2V5bFqSpa1lPNzH-08OfqBnZMByl68scRiGE2g1iEVyBEmSVK8t0EyNjLnUM43n/s1600/Screen+Shot+04-23-16+at+01.32+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWpv-nB3OEWs3r2ywDnQf0iGSWKLt3e8CIwPLKoQp3jEXOAXLZwfqr8veIYGv2Mz0vCsVqkJu5J8Sbg2V5bFqSpa1lPNzH-08OfqBnZMByl68scRiGE2g1iEVyBEmSVK8t0EyNjLnUM43n/s640/Screen+Shot+04-23-16+at+01.32+PM.PNG" width="640" /></a></div>
But do not do it like twitter because notifications must be visible. So, add some color accent in the message.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigfHXszCPx72uIe8rD9OZSiKdgL75NzM7Qz-yN7m9mRWS1MWqCRkM4ud8ArZdVCB_U1bMV8f5BHcLrlSoLgJNI8UHV5K1qCe-UXrZwZvaPFL27Nnt42nMn-foKCe0jy3XpLGMYnUioWieY/s1600/Screen+Shot+04-23-16+at+01.43+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="418" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigfHXszCPx72uIe8rD9OZSiKdgL75NzM7Qz-yN7m9mRWS1MWqCRkM4ud8ArZdVCB_U1bMV8f5BHcLrlSoLgJNI8UHV5K1qCe-UXrZwZvaPFL27Nnt42nMn-foKCe0jy3XpLGMYnUioWieY/s640/Screen+Shot+04-23-16+at+01.43+PM.PNG" width="640" /></a></div>
<br />
If error message consists some important information - we can show error window for users who want to know details.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7H9360VKpostgR3mCddqQjEKjU-WFJppzmwnT8fWchtx-YhlneKsYVIOd2GxgvW2k4XEVLjjFsAOZLTlhz7HpiH7ht7byGIZYoBw6mKByYiNV2FSAfd1TsxZx_pd3fuYLYRuT26qiLfuF/s1600/Screen+Shot+04-23-16+at+01.47+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="418" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7H9360VKpostgR3mCddqQjEKjU-WFJppzmwnT8fWchtx-YhlneKsYVIOd2GxgvW2k4XEVLjjFsAOZLTlhz7HpiH7ht7byGIZYoBw6mKByYiNV2FSAfd1TsxZx_pd3fuYLYRuT26qiLfuF/s640/Screen+Shot+04-23-16+at+01.47+PM.PNG" width="640" /></a></div>
<br />
<b>2) Show success status.</b><br />
Success messages are also important. Service must notify users that their action fulfilled and provide them further instructions.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnw-hVcTmbwxJKs1j-R_nJsMCVGxJbrhPlx0TY7yf4Mg6rtmOZ7wjUlkFRdj1dXvIsguJEqJPkZfubHxoif7AYOnjZdXIwXczGAiS9pjPYvEXbWN2uCULOXSeQKNl9t8D_ENiAkC3ufXlO/s1600/Screen+Shot+04-23-16+at+02.27+PM+001.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnw-hVcTmbwxJKs1j-R_nJsMCVGxJbrhPlx0TY7yf4Mg6rtmOZ7wjUlkFRdj1dXvIsguJEqJPkZfubHxoif7AYOnjZdXIwXczGAiS9pjPYvEXbWN2uCULOXSeQKNl9t8D_ENiAkC3ufXlO/s640/Screen+Shot+04-23-16+at+02.27+PM+001.PNG" width="640" /></a></div>
<br />
<b>3) Use wait to show that service work.</b><br />
If the service do something more than 2 sec - add animated wait.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsX5NzVQ3_mGjxEUi1ILwfJXFyw33kg8RiNcloZcpG2rll5LfUbwnETl53Q8VLSfrLQ93OzdSZian0GQJHMPqjriBSDtj9ehHHmlDmfJ9eJwu88WW8CmdHJkuxeHWR3z2vuuBI8ulJBRR/s1600/Screen+Shot+04-25-16+at+01.13+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsX5NzVQ3_mGjxEUi1ILwfJXFyw33kg8RiNcloZcpG2rll5LfUbwnETl53Q8VLSfrLQ93OzdSZian0GQJHMPqjriBSDtj9ehHHmlDmfJ9eJwu88WW8CmdHJkuxeHWR3z2vuuBI8ulJBRR/s640/Screen+Shot+04-25-16+at+01.13+PM.PNG" width="640" /></a></div>
<br />
Some websites use this waiting for additional promotion.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNxcWYHNSavMfrVijh-ZgeGxgVvwZToHYIjCFY5K17wzJT-m16BHLcpb1H0Epn_PL-g5Dp_9WCICc2ERYIn2k3ntFyGl5KYbjUEEagdjIedtDmmLVvxsTergISgEcJqF2JTfTC239aROo/s1600/Screen+Shot+04-23-16+at+02.54+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="339" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNxcWYHNSavMfrVijh-ZgeGxgVvwZToHYIjCFY5K17wzJT-m16BHLcpb1H0Epn_PL-g5Dp_9WCICc2ERYIn2k3ntFyGl5KYbjUEEagdjIedtDmmLVvxsTergISgEcJqF2JTfTC239aROo/s640/Screen+Shot+04-23-16+at+02.54+PM.PNG" width="640" /></a></div>
<br />
<b>4) Add process bar if the process is very long.</b><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaEKYGEGvnXSHaHHRyguGdPW-i1sRO5IJTuCQnrC5JNVyOFEE-Xp2aIDlpkV9PVX6yP5YUV4ABwlee1f82DB75as6piv84-j8QExklZggzNWkaT_BCDbDsvTJllbX4mPGJJBgCiF_LCLQX/s1600/Screen+Shot+04-23-16+at+04.07+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaEKYGEGvnXSHaHHRyguGdPW-i1sRO5IJTuCQnrC5JNVyOFEE-Xp2aIDlpkV9PVX6yP5YUV4ABwlee1f82DB75as6piv84-j8QExklZggzNWkaT_BCDbDsvTJllbX4mPGJJBgCiF_LCLQX/s640/Screen+Shot+04-23-16+at+04.07+PM.PNG" width="640" /></a></div>
<br />
This one is too small.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxoReG-jwA-0fmVG0mUaxP8ss036YCi4-m9BF-SVhOcWldiFEsMEQy4JQkJDT4FEzhQAeOMCvWAGeEqaQ3uuZ6rBbrkiW0BnJrcKbCbJwHS4lTs5cYG5oZX7UZ3FlQGT7h9t9CzOIyeeny/s1600/Screen+Shot+04-23-16+at+04.34+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxoReG-jwA-0fmVG0mUaxP8ss036YCi4-m9BF-SVhOcWldiFEsMEQy4JQkJDT4FEzhQAeOMCvWAGeEqaQ3uuZ6rBbrkiW0BnJrcKbCbJwHS4lTs5cYG5oZX7UZ3FlQGT7h9t9CzOIyeeny/s640/Screen+Shot+04-23-16+at+04.34+PM.PNG" width="640" /></a></div>
<br />
I must be not in the bottom.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8kP4RUw3fL36rZdBm_Vjx7acK7uFVtdFnELA6rVPafRp-YllnnOg7-GQ155IGnRsNNfSrEo7MaQbxjbsabS2EQVjDw6y1JgtyQyGqBfkWS5iTuen0-XeVOnCAwue5U7uZiNMS2fAFU7ux/s1600/Screen+Shot+04-23-16+at+04.36+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8kP4RUw3fL36rZdBm_Vjx7acK7uFVtdFnELA6rVPafRp-YllnnOg7-GQ155IGnRsNNfSrEo7MaQbxjbsabS2EQVjDw6y1JgtyQyGqBfkWS5iTuen0-XeVOnCAwue5U7uZiNMS2fAFU7ux/s640/Screen+Shot+04-23-16+at+04.36+PM.PNG" width="640" /></a></div>
<br />
Make it visible. The bar has to be in the same place where was the upload button.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD98kpDrYzZy3YKxwpBGFeGwXur0eiybMqqZYLeTf9j3PRVfeu7I-LMvmVGw1jpDaAFTr1nPbUlGwXWIyuurvXgyDroKvcpNdpO4-ffNqj92g3s0uafrbAUyaRG_X93FlP69IgyfZ7RhXt/s1600/Screen+Shot+04-23-16+at+04.42+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD98kpDrYzZy3YKxwpBGFeGwXur0eiybMqqZYLeTf9j3PRVfeu7I-LMvmVGw1jpDaAFTr1nPbUlGwXWIyuurvXgyDroKvcpNdpO4-ffNqj92g3s0uafrbAUyaRG_X93FlP69IgyfZ7RhXt/s640/Screen+Shot+04-23-16+at+04.42+PM.PNG" width="640" /></a></div>
<br />
<b>5) Use breadcrumbs if there are many pages and categories.</b><br />
If the website has difficult structure - users can loose themselves. So they have to understand their status - where are they now. For this case designers have to create breadcrumbs.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ55KtZzjFeHI0fSw-vpubBjQJkiePob0UgwVQ_CrYBi2Vrxf8cZcRYbphtSG36mMgTJqih3VHThqqyiVI1rFNBfW4jYgwEQSFx5bBdC7NnsS-OdT7PfUrg-YDCIRSiHQIuHAxNPX2V0wR/s1600/Screen+Shot+04-25-16+at+01.44+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ55KtZzjFeHI0fSw-vpubBjQJkiePob0UgwVQ_CrYBi2Vrxf8cZcRYbphtSG36mMgTJqih3VHThqqyiVI1rFNBfW4jYgwEQSFx5bBdC7NnsS-OdT7PfUrg-YDCIRSiHQIuHAxNPX2V0wR/s640/Screen+Shot+04-25-16+at+01.44+PM.PNG" width="640" /></a></div>
<br />
<b>6) Notify users if there is nothing to show.</b><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjes3rhcFfmZBfNMMrnXVAnh1fU3qknp6AO-It0jmUllz_kswI4kHqz19aiyHyhUCIxjqG-i3ANg1rhd1B1KrIzWQPs840fo5dZhwdwl0W8PK471aQVBlc549Hj3Ses0NRExYJb7ZxE7HjW/s1600/Screen+Shot+04-25-16+at+01.42+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjes3rhcFfmZBfNMMrnXVAnh1fU3qknp6AO-It0jmUllz_kswI4kHqz19aiyHyhUCIxjqG-i3ANg1rhd1B1KrIzWQPs840fo5dZhwdwl0W8PK471aQVBlc549Hj3Ses0NRExYJb7ZxE7HjW/s640/Screen+Shot+04-25-16+at+01.42+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Or there is no item to show.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Follow these tips and your users will never get lost.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Summary</b></div>
<div class="separator" style="clear: both;">
1) Show users what is his mistake. </div>
<div class="separator" style="clear: both;">
2) Show success status.</div>
<div class="separator" style="clear: both;">
3) Use wait to show that service work.</div>
<div class="separator" style="clear: both;">
4) Add process bar if the process is very long.</div>
<div class="separator" style="clear: both;">
5) Use breadcrumbs if there are many pages and categories.</div>
<div class="separator" style="clear: both;">
6) Notify users if there is nothing to show.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRZ6oR1viWyv5QDxCwqpP8HboslEsuy6G5Axrw384vRj1MoqWXjnd4AWBTpTvNhlAiI_F4-TedVC6Y38T9NuLtI0trVfh4zTSMBH1vkdCsfxdecTP-m0MGZd-Cs_4W95Nqtp9R2QTFM34Q/s1600/Screen+Shot+04-25-16+at+02.02+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="372" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRZ6oR1viWyv5QDxCwqpP8HboslEsuy6G5Axrw384vRj1MoqWXjnd4AWBTpTvNhlAiI_F4-TedVC6Y38T9NuLtI0trVfh4zTSMBH1vkdCsfxdecTP-m0MGZd-Cs_4W95Nqtp9R2QTFM34Q/s640/Screen+Shot+04-25-16+at+02.02+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-58848345375760936932016-04-11T10:42:00.002+03:002016-04-11T13:39:28.466+03:00Recognition vs. Recall in mobile web sites and other interfaces <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5a0IDCu4DBQoXWEHn8K7BSTvcKz0QFiWD5D9-7Bj8S1u5qdPQUZiJpxZTCmsZqaHgkxYnVqR4uYM4xiL29mzBI6N_1Tl2DKZUzCZKu1H96B3uOxQDBCWjSen24q4DQqdt7jXnBRgJ7YEi/s1600/adobi12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5a0IDCu4DBQoXWEHn8K7BSTvcKz0QFiWD5D9-7Bj8S1u5qdPQUZiJpxZTCmsZqaHgkxYnVqR4uYM4xiL29mzBI6N_1Tl2DKZUzCZKu1H96B3uOxQDBCWjSen24q4DQqdt7jXnBRgJ7YEi/s640/adobi12.png" width="640" /></a></div>
<br />
Designers discuss what is better: to use icons or text in navigation. We are going to show you the difference between icon and text perceptions in this article.<br />
<br />
<br />
<a name='more'></a><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7XmXRBrh0tdxtRdNwiOPuuL-6C-5S84ltFiomAtbOx-p47TRkeyurx-AUZCBkdmMOE3jM-cP4xRS4VDj6pW_DiRtpz67ycilGq4KI8HcpI1LQKKe4bqLBnd5odzka3On5g6a2wGYD_E-F/s1600/adobi19s.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7XmXRBrh0tdxtRdNwiOPuuL-6C-5S84ltFiomAtbOx-p47TRkeyurx-AUZCBkdmMOE3jM-cP4xRS4VDj6pW_DiRtpz67ycilGq4KI8HcpI1LQKKe4bqLBnd5odzka3On5g6a2wGYD_E-F/s640/adobi19s.png" width="640" /></a></div>
<br />
Our memory works in two different mode – recognition and recall. When we meet something that we already know – we can quickly recognize it. It is like you meet someone on the street. Recall is deeper process of memory. You make a order to your mind to return information. Like you meet old acquaintance on the street and ask yourself – what is his name? Sometime you cannot remember the name but you know exactly that this is someone you have met before.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0Smd9lOxnTJNNWSvlcizWSy9BiTTq6d3c2GvMDBZVumyJ1qEtpjlS385eFX5LQTRPEZyUDvSLHAmeDzkTEHMHP_hIQhMdxJS7dLE9tEbV_9k_5E_l079fGHCsn-HJiAcbijwClObyL01/s1600/Screenshot_2016-04-11-14-16-24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0Smd9lOxnTJNNWSvlcizWSy9BiTTq6d3c2GvMDBZVumyJ1qEtpjlS385eFX5LQTRPEZyUDvSLHAmeDzkTEHMHP_hIQhMdxJS7dLE9tEbV_9k_5E_l079fGHCsn-HJiAcbijwClObyL01/s640/Screenshot_2016-04-11-14-16-24.png" width="640" /></a></div>
<br />
The problem of software, sites and apps UI is in conflict between new users and old ones. Old users can work with very bad UX because they know how to use this interface. New users ofter cannot recognize UI elements because they didn’t use them many time.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM7BtK-Ephq1j87MwQryp5QRn9R8sztbWvRessSWG2iWk4WTKUtjeGCmbkIpffilF_bqsbh1nWZvUpltoSwWF4nxyqhMNbPu5d7Re4hi2AI22ZkEbMDxVLyFZPyY9asg-ultcPYv-yCgdq/s1600/Screen+Shot+04-09-16+at+04.58+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM7BtK-Ephq1j87MwQryp5QRn9R8sztbWvRessSWG2iWk4WTKUtjeGCmbkIpffilF_bqsbh1nWZvUpltoSwWF4nxyqhMNbPu5d7Re4hi2AI22ZkEbMDxVLyFZPyY9asg-ultcPYv-yCgdq/s640/Screen+Shot+04-09-16+at+04.58+PM.PNG" width="640" /></a></div>
<div>
<br /></div>
UI designer can use familiar icons and elements position to make users recognize. We wrote already about <a href="http://webdesign-review.blogspot.com/2016/02/usecases-where-should-i-put-change.html" target="_blank">a language switcher</a> and <a href="http://webdesign-review.blogspot.com/2014/04/were-has-to-be-log-out-button.html" target="_blank">logout button</a>. Menu is usually hidden under three lines icon.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkFnsFJMUgzi6j6cFGsePus6y2iUmYdCxuRvVIXLE5pPU55-auyRBxhIMH4LowweUKs1bda51W0IY5hGMgsTDpgmUXfi9skePupc75T7ER_NMzh1nORj-tk1bOHi3miMomhihmeeJANw1P/s1600/Screen+Shot+04-09-16+at+04.59+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkFnsFJMUgzi6j6cFGsePus6y2iUmYdCxuRvVIXLE5pPU55-auyRBxhIMH4LowweUKs1bda51W0IY5hGMgsTDpgmUXfi9skePupc75T7ER_NMzh1nORj-tk1bOHi3miMomhihmeeJANw1P/s640/Screen+Shot+04-09-16+at+04.59+PM.PNG" width="640" /></a></div>
<br />
Everyone used to click on it in facebook.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJFR1QpY6VnzA9oXgsqO_0wq3tGYJbb2usKvy7xFwtkZv6WGDpxvihtkfJTHnajMnklMm32BDVFppgkaoX8DLvOeQCrNhpKthf9odjIAKNzHslMQVSDbAFUeCQartJCELILzlOkplf8lpm/s1600/Screen+Shot+04-11-16+at+08.48+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJFR1QpY6VnzA9oXgsqO_0wq3tGYJbb2usKvy7xFwtkZv6WGDpxvihtkfJTHnajMnklMm32BDVFppgkaoX8DLvOeQCrNhpKthf9odjIAKNzHslMQVSDbAFUeCQartJCELILzlOkplf8lpm/s640/Screen+Shot+04-11-16+at+08.48+AM.PNG" width="640" /></a></div>
<br />
Designers usually use these icons without text. They are too obvious to subscribe them.<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ4aBLQAxoL_Yxj_C8fkHUvj5mlTQIZBJ8U4tW3R2f5-iZo5r2mUVrFxe5pdQCarsYlHuU8Vy7gvYMoq0hkuDCj9A8jO-pzxpZQyHbALxJJREtbHp5hGi-TYMPJw5rXvlnfbtlvhJEyqam/s1600/Screen+Shot+04-11-16+at+08.52+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ4aBLQAxoL_Yxj_C8fkHUvj5mlTQIZBJ8U4tW3R2f5-iZo5r2mUVrFxe5pdQCarsYlHuU8Vy7gvYMoq0hkuDCj9A8jO-pzxpZQyHbALxJJREtbHp5hGi-TYMPJw5rXvlnfbtlvhJEyqam/s640/Screen+Shot+04-11-16+at+08.52+AM.PNG" width="640" /></a></div>
<br />
But if designer is not sure that new users will recognize an icon - he has to subscribe it. For example this icon can be "previous" button, but it is "reply".<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeJYp8jd27ANbJBniGKMx-w6okHx6Sg08kLCleC2m3OSwzFE8pXnRhbCm-HTr7NUN47eAo4En1KcaYqxUgZvZkhvlMgm6SrpF5un0F0rbrmtCt3iLE5lN21p_kqLdRg3bJHT5bxfxqEXt/s1600/Screen+Shot+04-11-16+at+08.45+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeJYp8jd27ANbJBniGKMx-w6okHx6Sg08kLCleC2m3OSwzFE8pXnRhbCm-HTr7NUN47eAo4En1KcaYqxUgZvZkhvlMgm6SrpF5un0F0rbrmtCt3iLE5lN21p_kqLdRg3bJHT5bxfxqEXt/s640/Screen+Shot+04-11-16+at+08.45+AM.PNG" width="640" /></a></div>
<br />
Some designers decide to subscribe everything, even if the icons are 100% familiar.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmf0-gf9Kzu3AzK0QFSvtaMil_hkQBiRwfo9N5_mNlfGvOvZCizRFzVY4sngep0OUfhOuIsZEXYBjNd735ev4iULo4nOFYeNFLnYJ92ytb3anNPwHNl7dHNa8w3eKbhwfK3-P_9ediXd0a/s1600/adobi1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmf0-gf9Kzu3AzK0QFSvtaMil_hkQBiRwfo9N5_mNlfGvOvZCizRFzVY4sngep0OUfhOuIsZEXYBjNd735ev4iULo4nOFYeNFLnYJ92ytb3anNPwHNl7dHNa8w3eKbhwfK3-P_9ediXd0a/s640/adobi1.png" width="640" /></a></div>
<br />
Lets have a look on some difficult service with many features like Illustrator. It has a windows with icons for popular action. But the majority is hidden in dropdown menu. Users have to recall the name of action to use it. It will take a long tome to remember all useful action menu items and recognize their position. That is one of the reason old users adore Adobe products and new users don't like them.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFun02G2a70WbEB0Sbd6W4eM-Pgt_0y2vbpv3drOqqHQC8goge7x4TuG55_O5EzBWIe4cp6Un1ln4HPYVv-0tIRCk7fAH7l2agFjBzHVPCf7RaKE-bO2F16A9T_Ao4gNutbsh7fgTf-8q7/s1600/adobi3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="448" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFun02G2a70WbEB0Sbd6W4eM-Pgt_0y2vbpv3drOqqHQC8goge7x4TuG55_O5EzBWIe4cp6Un1ln4HPYVv-0tIRCk7fAH7l2agFjBzHVPCf7RaKE-bO2F16A9T_Ao4gNutbsh7fgTf-8q7/s640/adobi3.png" width="640" /></a></div>
<br />
It is an interface of other vector editor - Corel Draw. Corel use icons, so users can quickly recognize actions.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBPQxZrnTSeGuH__ysS8lwUiG40kty3Pb8qlD0U0uU6W4gyHAcE3ePCbEyXyU00vsJ_ILxRFYLtOuYDIH505QtQkafu22BQ6xNCbo-1pH8RqUH8PhyphenhyphenEzV0zEuSXT7KIgcdgByf7gGqj-V0/s1600/adobi2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBPQxZrnTSeGuH__ysS8lwUiG40kty3Pb8qlD0U0uU6W4gyHAcE3ePCbEyXyU00vsJ_ILxRFYLtOuYDIH505QtQkafu22BQ6xNCbo-1pH8RqUH8PhyphenhyphenEzV0zEuSXT7KIgcdgByf7gGqj-V0/s640/adobi2.png" width="640" /></a></div>
<br />
Other example. Users know that right click on some object open menu window with actions like Copy, Paste etc. Even if they never used Corel Draw before - they can work with it using their previous experience. Also, menu items have hotkey tips.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvGHHp_STbubHptU-GtanxNp9w4urXFrlMGUofP5O5Id6iz_pQnf6M5U1vWICl_hZgtRJaEKLx-bMmQXa_KQmEJVqahbDQSk0MXdV1GQgHW3KZshI6GDCiQ9Mm3SojjHpZzu_Q0prIMdmL/s1600/Screen+Shot+04-11-16+at+09.16+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="448" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvGHHp_STbubHptU-GtanxNp9w4urXFrlMGUofP5O5Id6iz_pQnf6M5U1vWICl_hZgtRJaEKLx-bMmQXa_KQmEJVqahbDQSk0MXdV1GQgHW3KZshI6GDCiQ9Mm3SojjHpZzu_Q0prIMdmL/s640/Screen+Shot+04-11-16+at+09.16+AM.PNG" width="640" /></a></div>
<br />
But not in Illustrator. Users cannot use it without some training. Here are no even "Copy-Paste" items.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqK687nkR7mjGZvYm-pgqxMbp8KG5BNf4TP8J4mt9k_vDfOgSd-H3KnevvvzgQ6_oHV_AZCMy1FcfXyKJ9LV2XBgFm7kvkR7nO7fgivR4CEmYUtAiZ3iunmdBjsD3VOciGhm_sj6arK23-/s1600/Screen+Shot+04-11-16+at+01.10+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqK687nkR7mjGZvYm-pgqxMbp8KG5BNf4TP8J4mt9k_vDfOgSd-H3KnevvvzgQ6_oHV_AZCMy1FcfXyKJ9LV2XBgFm7kvkR7nO7fgivR4CEmYUtAiZ3iunmdBjsD3VOciGhm_sj6arK23-/s640/Screen+Shot+04-11-16+at+01.10+PM.PNG" width="640" /></a></div>
<br />
Usage of icon sets (the ribbon) instead dropdown menu was one of the important improvement of Microsoft Office 2007. Some icons are subscribed but the most familiar are not.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpNIR4TDDdXsz95nk03mQtJQxQmSRCiZEjd6Avtmg6nWxDpsiZI699doU3GnuU7FSnWD01AsaleXNRMQl6t29mPS7-BL5LSpKajL2PzXPe1Rl5XBT_R9lYtkZSTNAdx6X8vzvq9Kh_hLB/s1600/Screen+Shot+04-11-16+at+11.39+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpNIR4TDDdXsz95nk03mQtJQxQmSRCiZEjd6Avtmg6nWxDpsiZI699doU3GnuU7FSnWD01AsaleXNRMQl6t29mPS7-BL5LSpKajL2PzXPe1Rl5XBT_R9lYtkZSTNAdx6X8vzvq9Kh_hLB/s640/Screen+Shot+04-11-16+at+11.39+AM.PNG" width="640" /></a></div>
<br />
Google analytics has also many features. They partly use icons here. Users have to read all menu items to find geo data for example.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xVBpSTv_n5pwPApDD2fmlcBcXMplAAsDnlQixgWq3WfJ_iY22x2sgmbbe__uFmtM-jx1qOoehTQUh5e6G6FUkAHJ9FtW106yYttYsQ7p8hjt2R8FlxkcKKk-WqyO4l80YiktloMNDgYh/s1600/Screen+Shot+04-11-16+at+11.57+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="428" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xVBpSTv_n5pwPApDD2fmlcBcXMplAAsDnlQixgWq3WfJ_iY22x2sgmbbe__uFmtM-jx1qOoehTQUh5e6G6FUkAHJ9FtW106yYttYsQ7p8hjt2R8FlxkcKKk-WqyO4l80YiktloMNDgYh/s640/Screen+Shot+04-11-16+at+11.57+AM.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguiH8NTzIqaMg4yNZwWYww0tq06M20bEjITJ-2OFcRn6xAP9-ZP3EnwgCk7_lmuNHuMByMI2BFrp191eaTHqQ4oOYAIQzrnpEQMwoaztWqBZrwTy8GwkCfjyvxScl2Gaz0D0WPqjQLOw-Y/s1600/Screen+Shot+04-11-16+at+05.27+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="388" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguiH8NTzIqaMg4yNZwWYww0tq06M20bEjITJ-2OFcRn6xAP9-ZP3EnwgCk7_lmuNHuMByMI2BFrp191eaTHqQ4oOYAIQzrnpEQMwoaztWqBZrwTy8GwkCfjyvxScl2Gaz0D0WPqjQLOw-Y/s640/Screen+Shot+04-11-16+at+05.27+PM.PNG" width="640" /></a></div>
<br />
<br />
A text takes too much place in navigation. Some services make a feature for advanced users - they can hide text to minimize menu size.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoBrQpqz58Bwx8TYlA8QFlfb9AvE5NS_-loQmXXnKJgFs9ooybKnewsy8nIFlALzZlDQWt-M058VlgMsno54E59wYUXNboLTPYJEEj8iPsnlmU67stxKbvtJ90oUnqNCLm6sawZxU7vnxJ/s1600/Screen+Shot+04-11-16+at+11.45+AM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="289" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoBrQpqz58Bwx8TYlA8QFlfb9AvE5NS_-loQmXXnKJgFs9ooybKnewsy8nIFlALzZlDQWt-M058VlgMsno54E59wYUXNboLTPYJEEj8iPsnlmU67stxKbvtJ90oUnqNCLm6sawZxU7vnxJ/s640/Screen+Shot+04-11-16+at+11.45+AM.PNG" width="640" /></a></div>
<br />
This is example of difficult interface that became more difficult without any icons.<br />
<br />
<br />
<br />
<br />
<b>Summary</b><br />
1) Create interface that users used to use.<br />
2) Subscribe icons if they are not clear.<br />
3) Use icons to make people quickly recognize items without reading.Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-48622896949991001502016-02-22T12:41:00.000+02:002016-02-22T12:41:12.526+02:00Usecases: Where should I put change language switcher button<div class="separator" style="clear: both; text-align: center;">
You never have any problem with another languages in service before you come in other country. Especially if this country use different alphabet. Where users can find a language switcher? Today we will show you wrong and right places.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bAF930CuyWjr5B4rOQ9a62UX_MjLQQsOTxnNqgc70OQ1201lbp4IGiXwD4zLYuy2Uk7mtcuf6G60zotMXhuGJS-2_qzPpjux95kTFAejh58JuyqrMzsszwS7BlYAAw2ggcUChkAH7AhQ/s1600/Screen+Shot+02-08-16+at+02.19+PM+001.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="422" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bAF930CuyWjr5B4rOQ9a62UX_MjLQQsOTxnNqgc70OQ1201lbp4IGiXwD4zLYuy2Uk7mtcuf6G60zotMXhuGJS-2_qzPpjux95kTFAejh58JuyqrMzsszwS7BlYAAw2ggcUChkAH7AhQ/s640/Screen+Shot+02-08-16+at+02.19+PM+001.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<br />
<a name='more'></a><div>
<br /></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QC5BxYD3AcueGuSEvckto9JKC74ZKgVTM-tvUdMP-uXOyYU4ozg7yiT_7dzTUP0tFt0TzmDPG7AiceSXh4eTFXYKsOjBfZLSDax8JNmL2LEbESHMbTR86nhRLyCsBH-KG3KzW9-PS0Rj/s1600/Screen+Shot+02-08-16+at+02.34+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QC5BxYD3AcueGuSEvckto9JKC74ZKgVTM-tvUdMP-uXOyYU4ozg7yiT_7dzTUP0tFt0TzmDPG7AiceSXh4eTFXYKsOjBfZLSDax8JNmL2LEbESHMbTR86nhRLyCsBH-KG3KzW9-PS0Rj/s640/Screen+Shot+02-08-16+at+02.34+PM.PNG" width="640" /></a></div>
<br />
<br />
Some services has no language switcher at all. Use English or die!<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrDluBAw0Ip9ptytFcp03mo0WYS4OcQjxgmTM9Z3pfmPZrlvG5qZcfY1pDzrJu-ec5tzkII7rCZ_0yAESzh9z3hd_ULg3QmSdYx8kh_kJZMqjHytHeAGqYLEbguiJsW3mw8opc6MW_y3_/s1600/Screen+Shot+02-08-16+at+02.17+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="384" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrDluBAw0Ip9ptytFcp03mo0WYS4OcQjxgmTM9Z3pfmPZrlvG5qZcfY1pDzrJu-ec5tzkII7rCZ_0yAESzh9z3hd_ULg3QmSdYx8kh_kJZMqjHytHeAGqYLEbguiJsW3mw8opc6MW_y3_/s640/Screen+Shot+02-08-16+at+02.17+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHg92ksdC1Ij1czLxqz7ZvQ4ANU55fwuM-Oj4BAIcLrUM4MZdGdF3IYoogdZCQt_BXIfZYS0C28qjSbhwZndw41SU9CvYM4xtyOPMuzMvduf5s1gPhbAPTt7DvypZYLmapodUulQ1K1B5X/s1600/Screen+Shot+02-08-16+at+02.59+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHg92ksdC1Ij1czLxqz7ZvQ4ANU55fwuM-Oj4BAIcLrUM4MZdGdF3IYoogdZCQt_BXIfZYS0C28qjSbhwZndw41SU9CvYM4xtyOPMuzMvduf5s1gPhbAPTt7DvypZYLmapodUulQ1K1B5X/s640/Screen+Shot+02-08-16+at+02.59+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Xing has language switcher in the same language as the page. I really cannot read this so it is useless for me.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgteZG4XPVqZYbfOQkkxd5sFz51hiqYQ08KKWL7MtbWIJFrHrh8yTnuby0WYi9iyq-BWEstBN0UDjIME9_quGKEV4ESqTH4ZHGCN8EDu4NDyBRfh3TFad9TSLJg9hoWiJzxZ1e0YDxo_Z-B/s1600/Screen+Shot+02-08-16+at+02.18+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgteZG4XPVqZYbfOQkkxd5sFz51hiqYQ08KKWL7MtbWIJFrHrh8yTnuby0WYi9iyq-BWEstBN0UDjIME9_quGKEV4ESqTH4ZHGCN8EDu4NDyBRfh3TFad9TSLJg9hoWiJzxZ1e0YDxo_Z-B/s640/Screen+Shot+02-08-16+at+02.18+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Try to change language in Chinese LinkedIn. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3ukaOkDUFp40Ub3x4VXYmebH4JQXudVc7lFr5LWVINm8dU52fiemLXy-gcTxGe_7qMa6_uYc1ObD63kbAWJOLcgO_ahZEcAtU6RnZLfyp77-L-CF2BN-0icrisnHy-vy-Kv-JRoRL4h9/s1600/Screen+Shot+02-08-16+at+02.15+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3ukaOkDUFp40Ub3x4VXYmebH4JQXudVc7lFr5LWVINm8dU52fiemLXy-gcTxGe_7qMa6_uYc1ObD63kbAWJOLcgO_ahZEcAtU6RnZLfyp77-L-CF2BN-0icrisnHy-vy-Kv-JRoRL4h9/s640/Screen+Shot+02-08-16+at+02.15+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
It is here.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibAkdfzVKJ5yBjiK-SUUXvHkpbYdXBB-7L-D_lvzJGpIIUBxf6g4tZYEyg7-172CQnzOD2pRBAv2cvZxxAyNcFIWG36lrmdedztZAOXXz_aeEXSlagKgfI1dxn6UKe1NIQMmtuthIhWwep/s1600/Screen+Shot+02-08-16+at+02.41+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="484" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibAkdfzVKJ5yBjiK-SUUXvHkpbYdXBB-7L-D_lvzJGpIIUBxf6g4tZYEyg7-172CQnzOD2pRBAv2cvZxxAyNcFIWG36lrmdedztZAOXXz_aeEXSlagKgfI1dxn6UKe1NIQMmtuthIhWwep/s640/Screen+Shot+02-08-16+at+02.41+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Try it here. I didn't figure out.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSYnctk2rPrZQFjoz6IlkX-6O-g0XP45fuwhr1nNOsgcpcetAvsv8uTawcsdV6YOYIRa5UG5ffAmjtnZIxq_83e4Eo4KkbxZ3TJzvUYjFWno-KAUkYsqhBrUHedfTD5shfvBc9DG4yADdo/s1600/Screen+Shot+02-08-16+at+02.23+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSYnctk2rPrZQFjoz6IlkX-6O-g0XP45fuwhr1nNOsgcpcetAvsv8uTawcsdV6YOYIRa5UG5ffAmjtnZIxq_83e4Eo4KkbxZ3TJzvUYjFWno-KAUkYsqhBrUHedfTD5shfvBc9DG4yADdo/s640/Screen+Shot+02-08-16+at+02.23+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhredZNQ-EivexJGSTxjWRY6WpSrUSz7Jk-G2H4RdYU4EbF8G5BWfXdCQHFa_3hZb8N1mgOR_OwkEkGl8Y_tyhDzHMG95QPvP-9ZCYxQ3Kq37o4WH9tNHnRFeF86RSNnyvuyAwiEgheXQcz/s1600/Screen+Shot+02-08-16+at+02.24+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhredZNQ-EivexJGSTxjWRY6WpSrUSz7Jk-G2H4RdYU4EbF8G5BWfXdCQHFa_3hZb8N1mgOR_OwkEkGl8Y_tyhDzHMG95QPvP-9ZCYxQ3Kq37o4WH9tNHnRFeF86RSNnyvuyAwiEgheXQcz/s640/Screen+Shot+02-08-16+at+02.24+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Microsoft web-site add the globe icon to recognize language switcher. It is much better now.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfwXDocWDgURGT2zPUUY4lNWfH91E4b4QEwG8K_AqLXech02g4u_coyLOBTP8EtQojDOIcwn_0vb9I438i6Mj4Z7FxlrwSuZ0gHmAxnEA2Qy5Crdom64sh-ZN84Fhe9DfsHnqOEq2OKG3X/s1600/Screen+Shot+02-08-16+at+02.23+PM+001.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfwXDocWDgURGT2zPUUY4lNWfH91E4b4QEwG8K_AqLXech02g4u_coyLOBTP8EtQojDOIcwn_0vb9I438i6Mj4Z7FxlrwSuZ0gHmAxnEA2Qy5Crdom64sh-ZN84Fhe9DfsHnqOEq2OKG3X/s640/Screen+Shot+02-08-16+at+02.23+PM+001.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
But we go to another page. This is needless step. They can arrange it in a dropdown with search.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggCe1sB-Ak1T-6xwkH53_-uY0HO362JftMgLPnpPf8u66fHM__t4SgFG6UDFhUT6tR8RZyF0RyVdwOTaIO8bACF1eRinTn4p-SE_Y7wEPNULJNDtB7wjr5PJD5ulFOElWdxHQ-ghyphenhyphenWMgni/s1600/Screen+Shot+02-08-16+at+02.20+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="388" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggCe1sB-Ak1T-6xwkH53_-uY0HO362JftMgLPnpPf8u66fHM__t4SgFG6UDFhUT6tR8RZyF0RyVdwOTaIO8bACF1eRinTn4p-SE_Y7wEPNULJNDtB7wjr5PJD5ulFOElWdxHQ-ghyphenhyphenWMgni/s640/Screen+Shot+02-08-16+at+02.20+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Apple use flag icon and it is very clear how to change the language.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESgxW0NIqHp2Kid2wetTKi-M4SGDecMkDfqFG_7uB3o5SY5YcsY1yTcpSJqEXwu3OM0l1pxcyWjOceEw0UgtFNkTGAQLgd-TLMj_8C0r-NW2dHewDMyyKVM5DwoFqtyt9rNbpIj4Tm3E2/s1600/Screen+Shot+02-08-16+at+02.35+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESgxW0NIqHp2Kid2wetTKi-M4SGDecMkDfqFG_7uB3o5SY5YcsY1yTcpSJqEXwu3OM0l1pxcyWjOceEw0UgtFNkTGAQLgd-TLMj_8C0r-NW2dHewDMyyKVM5DwoFqtyt9rNbpIj4Tm3E2/s640/Screen+Shot+02-08-16+at+02.35+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Dell uses the same trick.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR_0ZNEE5LP5Crym-LOtVv9iSSALSfKeYTwfEQqt23qpCqB1q4CbUIJY9f81nOUpniMFKJGw7Kkm7IF0pnCDywtZBwsfH01Br_OIlVnv2xOrxd9E5QJvmLOA47B7ZZUoU8oHAD7kjV5TOC/s1600/Screen+Shot+02-08-16+at+02.40+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR_0ZNEE5LP5Crym-LOtVv9iSSALSfKeYTwfEQqt23qpCqB1q4CbUIJY9f81nOUpniMFKJGw7Kkm7IF0pnCDywtZBwsfH01Br_OIlVnv2xOrxd9E5QJvmLOA47B7ZZUoU8oHAD7kjV5TOC/s640/Screen+Shot+02-08-16+at+02.40+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
IBM leaves the language switcher in English. It is really smart because usually English speakers cannot read Japanese but all the world can read English alphabet. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55wF_F18kHWXQjgEPI1stzZItifYu7LCWTWn7P_V5UMuXJhFiskunaCDNIsNuLNx_tu_4u9hITCYEBzXcUmhIwev9gCgDLvJ6nT7VENtjVdbfkJ9ZEja0ckdNKUP2xRljWgS1AM-8v3tu/s1600/Screen+Shot+02-08-16+at+02.42+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55wF_F18kHWXQjgEPI1stzZItifYu7LCWTWn7P_V5UMuXJhFiskunaCDNIsNuLNx_tu_4u9hITCYEBzXcUmhIwev9gCgDLvJ6nT7VENtjVdbfkJ9ZEja0ckdNKUP2xRljWgS1AM-8v3tu/s640/Screen+Shot+02-08-16+at+02.42+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Dropdown is convenient way to make the language switcher if website has many of languages.</div>
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV_706KWCHYh-5fezn0NiIKCTDvwJByeNRktAmUbG3KYpO528_eIMEHZfwydah5eye67YwRipTIwnpyiZCyUxv4pmd7Av_7gVWZ0d6CVn4JCK4IP658tA-SSLsS2_cMYyj0ehhydzy5KtR/s1600/Screen+Shot+02-08-16+at+02.13+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="346" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV_706KWCHYh-5fezn0NiIKCTDvwJByeNRktAmUbG3KYpO528_eIMEHZfwydah5eye67YwRipTIwnpyiZCyUxv4pmd7Av_7gVWZ0d6CVn4JCK4IP658tA-SSLsS2_cMYyj0ehhydzy5KtR/s640/Screen+Shot+02-08-16+at+02.13+PM.PNG" width="640" /></a></div>
<br />
<div style="text-align: center;">
But the best solution has faceebook. It has the most popular languages in line. Users can understand that it is language switcher even if they don't speak any of these languages.</div>
<br />
<br />
<br />
<br />
<br />
<div style="text-align: center;">
So, lets make a summary.</div>
<br />
<br />
<b>Wrong way to </b><b>place </b><b>language switcher:</b><br />
<ul>
<li>Write “language name” in the same language</li>
<li>Move a language switcher from left bottom</li>
<li> Make separate page for languages</li>
</ul>
<br />
<div>
<br /></div>
<b>Right way to place language switcher</b><br />
<ul>
<li>Use flag or English for word “language”</li>
<li>Keep a language switcher in left bottom</li>
<li> Make dropdown for languages</li>
</ul>
<br />
<div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-55908133363596099822016-02-08T06:39:00.002+02:002016-02-08T06:39:46.159+02:00biodigital 3D web design<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTHpvdiTH1xuXT-HyeIvZjVoYZN5RQI2ygivv1IHVE6GZmHqB94nwU-__48znowCoVeCE7vUu6Jiqj67TTxX3kfqYu_xFE6F5JVwnrSvPVDcCDEMT59rZzZOGD5hzC7r7M19UCgvKZWToD/s1600/Screen+Shot+02-04-16+at+04.48+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTHpvdiTH1xuXT-HyeIvZjVoYZN5RQI2ygivv1IHVE6GZmHqB94nwU-__48znowCoVeCE7vUu6Jiqj67TTxX3kfqYu_xFE6F5JVwnrSvPVDcCDEMT59rZzZOGD5hzC7r7M19UCgvKZWToD/s640/Screen+Shot+02-04-16+at+04.48+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
3D technology finally starts its way to webdesign. I have seen many 3D illustrations in UI but now it is possible to make UX also. Today I want to show you biodigital 3D web design on this <a href="https://www.biodigital.com/" rel="nofollow" target="_blank">site</a>.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGj4wtBpRsbaosNg8J3kQLN_QRBkIpmaNV0B00aqknermum9yN_TxMGJ4gyMkp3krtS3hQ5a8Z4dWkpzmqYz-2txsILUPHWEHXq-c3_JYADwYJS47b2hmoiBifFDNgZf2dBGMazluMvHid/s1600/Screen+Shot+02-04-16+at+05.13+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGj4wtBpRsbaosNg8J3kQLN_QRBkIpmaNV0B00aqknermum9yN_TxMGJ4gyMkp3krtS3hQ5a8Z4dWkpzmqYz-2txsILUPHWEHXq-c3_JYADwYJS47b2hmoiBifFDNgZf2dBGMazluMvHid/s640/Screen+Shot+02-04-16+at+05.13+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Human body discovering is its main purpose of it. The target group consist of students and lectors. For private usage it is free.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEp_6ItmWRuR2CLyv4HDLtJIzzltcMjXUxvVqxw3wmLl2ERHg7QMn7ju1wnzaVBPfODUBUNJW6g_6u444kM6Gt139xAdqHNo1ea9LGY8D-ed2QC0aJ-0xZMvV3yULfbXU43afdhs2lefW/s1600/Screen+Shot+02-04-16+at+05.11+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEp_6ItmWRuR2CLyv4HDLtJIzzltcMjXUxvVqxw3wmLl2ERHg7QMn7ju1wnzaVBPfODUBUNJW6g_6u444kM6Gt139xAdqHNo1ea9LGY8D-ed2QC0aJ-0xZMvV3yULfbXU43afdhs2lefW/s640/Screen+Shot+02-04-16+at+05.11+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Users can easily sign up with social networks.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKruS4MUINgDA0SgOw3VePp1_pSfIEX1gjO9IHfTvK_98hCVOipHx6Y_7WjPnktxr1qGekDeSBzPRczQG0GNdUx69lQ6ROR9XL9pfIzav67_NDtLk9Hp7jLp1wCclcZTdtMXdLi8G_TGzi/s1600/Screen+Shot+02-04-16+at+04.46+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKruS4MUINgDA0SgOw3VePp1_pSfIEX1gjO9IHfTvK_98hCVOipHx6Y_7WjPnktxr1qGekDeSBzPRczQG0GNdUx69lQ6ROR9XL9pfIzav67_NDtLk9Hp7jLp1wCclcZTdtMXdLi8G_TGzi/s640/Screen+Shot+02-04-16+at+04.46+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
We start from the basis - a skeleton.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvzTS2M9zCgO-BJDfyO1lloENLRyfdn9Xs6gAZd-u8PN1f_kM9zmuPw1NEHdU_hyYraG8PK31PD9Ha3wSF6bRIlnHJg3FvXRI7oV8xSkQOldY1ExduSmlORxEGQVW8ZuK3vVElzaPZqcXF/s1600/Screen+Shot+02-04-16+at+05.27+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvzTS2M9zCgO-BJDfyO1lloENLRyfdn9Xs6gAZd-u8PN1f_kM9zmuPw1NEHdU_hyYraG8PK31PD9Ha3wSF6bRIlnHJg3FvXRI7oV8xSkQOldY1ExduSmlORxEGQVW8ZuK3vVElzaPZqcXF/s640/Screen+Shot+02-04-16+at+05.27+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
The interface is not complicated. Users can choose what do they want to discover in the left sidebar and look at it to the right.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70aNcJ_eoyQmazoOw9C3ED5Np9HZYgsZUnQQ1yFhwc1oZkHIctYyRHkqf_N6sO0W_ANveSGRYPO9e3ULnj3viUpuxEaMx4tEG8_SdB_amjJ2Hg36JCnTjYLLZekiZBSvcIT_rD3H3rKvL/s1600/Screen+Shot+02-04-16+at+05.08+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70aNcJ_eoyQmazoOw9C3ED5Np9HZYgsZUnQQ1yFhwc1oZkHIctYyRHkqf_N6sO0W_ANveSGRYPO9e3ULnj3viUpuxEaMx4tEG8_SdB_amjJ2Hg36JCnTjYLLZekiZBSvcIT_rD3H3rKvL/s640/Screen+Shot+02-04-16+at+05.08+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Customers can use presets with ready explanations.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHFqV5k_dymx0yehEUvMfU8Z4djgqgAapE0-uJdJ465aGFTjdYGwZ0HYntEQ4eIA4UyRUPXEEbv6Z61b2EkOEyTl-9mnklYsQhHwG9Rs0tSwTbvieNVw6lCxCA9QmIajOkwoIwKN9sbQXv/s1600/Screen+Shot+02-04-16+at+04.50+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="446" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHFqV5k_dymx0yehEUvMfU8Z4djgqgAapE0-uJdJ465aGFTjdYGwZ0HYntEQ4eIA4UyRUPXEEbv6Z61b2EkOEyTl-9mnklYsQhHwG9Rs0tSwTbvieNVw6lCxCA9QmIajOkwoIwKN9sbQXv/s640/Screen+Shot+02-04-16+at+04.50+PM.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
The high resolution screen-shot service is included. Also users can share this to expose the web site. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnO1ty8E_uuml8aLOLA3QRbxCQhihc1Ro0b-oShFcI1-4DRJi_pybiIsamONzlTHXIuAjXEjdZH_6EYHrQWm3KenV_z8uJae06e7H9W-m_Hp1IdiEHjmKHNWTe_HaXahmvxqspyJA97kNn/s1600/Screen+Shot+02-04-16+at+05.13+PM+001.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnO1ty8E_uuml8aLOLA3QRbxCQhihc1Ro0b-oShFcI1-4DRJi_pybiIsamONzlTHXIuAjXEjdZH_6EYHrQWm3KenV_z8uJae06e7H9W-m_Hp1IdiEHjmKHNWTe_HaXahmvxqspyJA97kNn/s640/Screen+Shot+02-04-16+at+05.13+PM+001.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
There are mobile app from this website. I think it can be good habit to explore human body in free time with a smart-phone.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
There are a lot of discussions about future of web design. One way is going forward 3D. It is more real but it is also very complicated. 3D artist, programmers and many weeks of development are needed. I am not sure that many stakeholders can afford this. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-34048290594517642792016-01-23T16:52:00.000+02:002016-01-23T16:52:37.092+02:00Google PageRanking Factors 2015 There are many gossips in web that PageRank is already dead. Google took this feature off Webmaster Tools. There was even an official information that company are not going to update it anymore. Explorations of independent companies such as Searchmetrics shows us contrary results. Google permanently changes its ranking factors but don't tells about it in public anymore. It is very important for us to know where and how can we use tools to promote our web-pages. Today we are going discover some Google juice for you.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwjorkJSNyZ7KwSiZhnHyC-7fl4PnSlwwDr8BilRlh6UrYWTLCmDreLWOoViG1YUo_jK6yCFxiMN4t6MAGm8DbE9VlnbyV5EoGjguCqrRy6Nps3rGAwDDfxgYFPH78GVofk3odJAjolode/s1600/Screen+Shot+01-22-16+at+05.36+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwjorkJSNyZ7KwSiZhnHyC-7fl4PnSlwwDr8BilRlh6UrYWTLCmDreLWOoViG1YUo_jK6yCFxiMN4t6MAGm8DbE9VlnbyV5EoGjguCqrRy6Nps3rGAwDDfxgYFPH78GVofk3odJAjolode/s640/Screen+Shot+01-22-16+at+05.36+PM.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRdzSDGUVTYqbIbDpgA0KthoR4BcfNbvg1-CLdsVS1ALs9AXK6HF50DjHKKa9OoeQbmPGHOBXvZSIF0qrKEamG_TAvjaQrfiTy_72dcXKgNla9rf2O2OF4pU33IyXAzo1lAY9TpUaWp029/s1600/Screen+Shot+01-22-16+at+05.37+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRdzSDGUVTYqbIbDpgA0KthoR4BcfNbvg1-CLdsVS1ALs9AXK6HF50DjHKKa9OoeQbmPGHOBXvZSIF0qrKEamG_TAvjaQrfiTy_72dcXKgNla9rf2O2OF4pU33IyXAzo1lAY9TpUaWp029/s640/Screen+Shot+01-22-16+at+05.37+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
According to Searchmetrics explorations the main innovation of Google Search is using Click-Through-Rate (CTR) as high valued ranking factor. This method come directly from Adwords service.<br />
<h4>
How does Click-Through-Rate work? </h4>
Google divide numbers of clicks by page views. If 100 users looked through Google search result and only 2 clicked on your link - your CTR will be 0.02. It seems to be very good CTR. What is the reason of ranking changes? It can be promotion of Adwords. Otherwise Click-Through-Rate is really important because it is proceed by really users and owners of websites cannot cheat Google.<br />
Now CTR change SEO business and will make a problem for new web sites. Because it is very hard for new web site with low position (10th page in the search) achieve high Click-Through-Rate score. The only way out for such a looser - use Adwords. Excellent promotion, isn't it?<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYMt6ppevyruZPDYXZ44tCRWoOB4XgdtOY3eab60La9IAsxwQuMGeJ1_fiDDPLTT_qggILQHVWkHFzfn3vnjV4MVXAqqO-MsJll2dbgtSBjxSwtKqlqoSwjgDIjLxxuC6f-q41YX0Jw1l/s1600/Screen+Shot+01-22-16+at+05.38+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYMt6ppevyruZPDYXZ44tCRWoOB4XgdtOY3eab60La9IAsxwQuMGeJ1_fiDDPLTT_qggILQHVWkHFzfn3vnjV4MVXAqqO-MsJll2dbgtSBjxSwtKqlqoSwjgDIjLxxuC6f-q41YX0Jw1l/s640/Screen+Shot+01-22-16+at+05.38+PM.PNG" width="640" /></a></div>
<br />
Google use its PageRanking as dangerous weapon. Quite unpopular social network Google+ is on the 3rd place in list of major factors that influence PageRanking. So, don't spend your time - create a G+ community for your web site and add everybody there.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXniJv2AVePS7IIEcHV0eUjvPtc0n161OgxW0SimShe50iSA8UBrxcwIfnfT7VwmZHIWpOg3VMgnhEUeXqbjjZ9HS8sScgO8wlmoWVcxH45U3ViSkgeG6I0fT5-VypVhj6RWFWfTrAAkw/s1600/Screen+Shot+01-22-16+at+05.59+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXniJv2AVePS7IIEcHV0eUjvPtc0n161OgxW0SimShe50iSA8UBrxcwIfnfT7VwmZHIWpOg3VMgnhEUeXqbjjZ9HS8sScgO8wlmoWVcxH45U3ViSkgeG6I0fT5-VypVhj6RWFWfTrAAkw/s640/Screen+Shot+01-22-16+at+05.59+PM.PNG" width="640" /></a></div>
<br />
Numbers of backlinks is only on 4th position. It was the most powerful tool of marketing specialists before. Now it is still important - but not really. Is it a reason for Backlink generators' websites to look so ugly?<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3ML61FqP3JHjYmiv_KCL9nLAwFLvYMjYE2bKP9yGg57NU60xVeKheEkE4dWzRqaZVMC7yhlN3nUVjAZt9ABHzrLWtQg2RkYj1KIVm6Fw7PACZiiKDUSpgZwJ1-9hWFiR7XLv0-6BFoJL/s1600/Screen+Shot+01-22-16+at+05.40+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3ML61FqP3JHjYmiv_KCL9nLAwFLvYMjYE2bKP9yGg57NU60xVeKheEkE4dWzRqaZVMC7yhlN3nUVjAZt9ABHzrLWtQg2RkYj1KIVm6Fw7PACZiiKDUSpgZwJ1-9hWFiR7XLv0-6BFoJL/s640/Screen+Shot+01-22-16+at+05.40+PM.PNG" width="640" /></a></div>
<br />
Facebook has 4 ways to influence PageRanking: likes, shares, comments and total score of links. There is no way to be on the first page of Google without alive facebook account.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk-lL4CunopQsgMyR_matHWaVTWjvKGHj9TKpqEIqxLw4OhJgetlGUMK3tA-A6wPxJdi8NjGdHt9CUCGUy5A4TtrGmFmFqcTSe6h38cL6avG_VANIVKVn2Cz5PFK6gjGAOKkzgfG5XDXLM/s1600/Screen+Shot+01-22-16+at+05.43+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk-lL4CunopQsgMyR_matHWaVTWjvKGHj9TKpqEIqxLw4OhJgetlGUMK3tA-A6wPxJdi8NjGdHt9CUCGUy5A4TtrGmFmFqcTSe6h38cL6avG_VANIVKVn2Cz5PFK6gjGAOKkzgfG5XDXLM/s640/Screen+Shot+01-22-16+at+05.43+PM.PNG" width="640" /></a></div>
<br />
Surprise! Pinterest is next social netwoks in Google PageRanking Factors 2015 list. Is it the way to improve visual side of Internet - I don't know. But actually I am agree with this solution.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaEwkP0cO8lFGB1c_dvvB-37ec5sQ6qWRQywkayj0-BQV1AX6YdUqmFpa3B8MiN-Xnc7LWZ1duhaQ2TWmbGsKM-qCrqMfB2crJaNSWk33Ns56lRPKUSaFdHk_S8eoY_y-DPI6DbhKh2OjH/s1600/Screen+Shot+01-22-16+at+05.46+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaEwkP0cO8lFGB1c_dvvB-37ec5sQ6qWRQywkayj0-BQV1AX6YdUqmFpa3B8MiN-Xnc7LWZ1duhaQ2TWmbGsKM-qCrqMfB2crJaNSWk33Ns56lRPKUSaFdHk_S8eoY_y-DPI6DbhKh2OjH/s640/Screen+Shot+01-22-16+at+05.46+PM.PNG" width="640" /></a></div>
<br />
Twitter is in the middle of the list.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxKjCPmEeYgBwujf138FcxbdbIOhJRFo_rhQcY7mvqMVflwulWUGdu5hcrNd8iNbcxL9L1rwLV046b8Jm6SvuyED830v0NIpB8mpGA6ff41T-7DbyhCjZYRpJf-TlyRnsAlnun2tDAaicv/s1600/Screen+Shot+01-22-16+at+05.49+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxKjCPmEeYgBwujf138FcxbdbIOhJRFo_rhQcY7mvqMVflwulWUGdu5hcrNd8iNbcxL9L1rwLV046b8Jm6SvuyED830v0NIpB8mpGA6ff41T-7DbyhCjZYRpJf-TlyRnsAlnun2tDAaicv/s640/Screen+Shot+01-22-16+at+05.49+PM.PNG" width="640" /></a></div>
<br />
Number of internal links is also very important for new Google PageRank. They help spread link juice around websites. The code must be like this:<br />
<span style="color: #666666; font-family: "courier new" , "courier" , monospace; font-size: x-small;"><a href="http://www.mydomain.com/page" title="Keyword Text">Keyword Text</a></span><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMi0QWH9_jyGirJ-SCgni0UmUy_QjzYgJD0C7dUwD4gqZebyE_Vw-PWwU_aLlTMKt2d588kIjwC0Kq0iEZ26NlmCAhokmnaE0xRdXqHabNB21qKhK1dzk6O1QX1hbFupLxoHBElt3DojxL/s1600/Screen+Shot+01-22-16+at+05.51+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMi0QWH9_jyGirJ-SCgni0UmUy_QjzYgJD0C7dUwD4gqZebyE_Vw-PWwU_aLlTMKt2d588kIjwC0Kq0iEZ26NlmCAhokmnaE0xRdXqHabNB21qKhK1dzk6O1QX1hbFupLxoHBElt3DojxL/s640/Screen+Shot+01-22-16+at+05.51+PM.PNG" width="640" /></a></div>
<br />
Headers, keywords, descriptions are in the bottom of the list. It is not important anymore to take care about headers. Google starts to use another method that is out of site owners control instead of them - Relevant Terms.<br />
<h4>
What is it "Relevant Term"? </h4>
There is a software inside Google that knows which words are often connected with other words. For example, if you are looking for "UX/UI". Naturally words like "test", "design", "application", "usability", "web", "user" must be on the page. If Google find them together with your search query, they influence PageRank. Relevant Terms are on the second place in Google Ranking Factors' list but there is no specification of where they have to be (text, header, links).<br />
<br />
<h4>
Conclusion.</h4>
PageRank was leverage for spamьers, black and gray SEO, and Google knows it. Website owners manipulated with keywords, titles, headers, backlinks etc to get on the first page of search results. Google implements service where owners cannot influence PageRank. But customers can do it in their social network account. So, PageRank is alive and its moto is: the website must be interesting and there is no way to cheat us anymore!<br />
<br />
For more details you can have a look at full list of <a href="http://www.smartinsights.com/search-engine-optimisation-seo/seo-strategy/seo-correlation-studies/attachment/seo-ranking-factors-2015/" rel="nofollow">PageRanking Factors</a>Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com2tag:blogger.com,1999:blog-2211718669828874428.post-52988677191733052232016-01-16T10:38:00.000+02:002016-01-16T10:55:11.875+02:00Usecase: I want to practice foreign language with native speaker onlineLets test some service for learning English online. I choose https://www.gospeaky.com for this purpose.<br />
<br />
<br />
<br />
Lets write down what do I want?<br />
Main usecases:<br />
1) I want to communicate easily with some foreigners to improve my language level.<br />
2) I want to talk with people who share my interests<br />
3) I want to know how to do it because I have never done it before. I afraid to do something wrong.<br />
4) My language level is not so good. I want to be sure that nobody will mock on me.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7SespXeR5nA2Gy_Z9Nv2RlqtMRsX1WFIaQsSlz6jzUE5gtLirbBuVcUeDG7ChWLHs1dIuOQbAxbIxhLpHJn5K9Cs_B_s7kgfRXns4SGQBujzvngRdCG6bsSqh8Wn5374TIpGfI0S6SQBs/s1600/Screen+Shot+01-15-16+at+04.25+PM+001.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7SespXeR5nA2Gy_Z9Nv2RlqtMRsX1WFIaQsSlz6jzUE5gtLirbBuVcUeDG7ChWLHs1dIuOQbAxbIxhLpHJn5K9Cs_B_s7kgfRXns4SGQBujzvngRdCG6bsSqh8Wn5374TIpGfI0S6SQBs/s640/Screen+Shot+01-15-16+at+04.25+PM+001.PNG" width="640" /></a></div>
<br />
<br />
<br />
The top of the site is heavy enough but it setup friendship and happy mood. There is only button in the center that means - do not spend your time for reading a landing page, sign up!<br />
<br />
<br />
<a name='more'></a><br /><br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_bnWGvvJJx1D9Ioc1qeC3x6wn1i-9B3Qcnxa61zyfp3-tStGPqR_Rgy7RK7bDUqUnldNZw97wt4lJHes-PVs-x-H42cMIAUYxrecffIGZcx1pA3wNjCjU5uo-ZzoThXXh_rEESXcrpV7/s1600/Screen+Shot+01-15-16+at+04.29+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_bnWGvvJJx1D9Ioc1qeC3x6wn1i-9B3Qcnxa61zyfp3-tStGPqR_Rgy7RK7bDUqUnldNZw97wt4lJHes-PVs-x-H42cMIAUYxrecffIGZcx1pA3wNjCjU5uo-ZzoThXXh_rEESXcrpV7/s640/Screen+Shot+01-15-16+at+04.29+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
Here is some information about service. It is small and unattractive. The amount of online users is too small. I prefer to put it in the middle, because it show me - the service is alive.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWOpflhD4EBjjCqKSe3AXastRWSCvCVzb-crdGT6J4hokdYoES5WIp5513SOg-1qHVDGjOBpQ0dm6DMhe8I8-apoUDSsVOE7GhP52EObU-zYCdplIHviLM9hbRpJfWnpdO0y25G6T8TfT5/s1600/Screen+Shot+01-15-16+at+04.39+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWOpflhD4EBjjCqKSe3AXastRWSCvCVzb-crdGT6J4hokdYoES5WIp5513SOg-1qHVDGjOBpQ0dm6DMhe8I8-apoUDSsVOE7GhP52EObU-zYCdplIHviLM9hbRpJfWnpdO0y25G6T8TfT5/s640/Screen+Shot+01-15-16+at+04.39+PM.PNG" width="640" /></a></div>
<br />
These three buttons are nor readable. Also I don't know why does user need brands that "believe in us". The end of the page is dangerous point because users decide to leave the page here. If they are not interested or not excited with this page - they will leave. UX designer has to stop them any way. I think promotion video would be very useful here. It is easy to make it attractive in video with nice music and users can change their mind to leave.<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIkFd84efVEQ5wJEMiRED9kg_xBWrIFuXe049irQip1oymrY0XuuCU6lQ71LW6-Usx8JRIVcsrIIR4uu09ESdu6rmBHQ9zyQ3FNkAjHpGjuIJQPnY94dLU53CrCIXvaUX1zpbKYQotJ4jB/s1600/Screen+Shot+01-15-16+at+04.40+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIkFd84efVEQ5wJEMiRED9kg_xBWrIFuXe049irQip1oymrY0XuuCU6lQ71LW6-Usx8JRIVcsrIIR4uu09ESdu6rmBHQ9zyQ3FNkAjHpGjuIJQPnY94dLU53CrCIXvaUX1zpbKYQotJ4jB/s640/Screen+Shot+01-15-16+at+04.40+PM.PNG" width="640" /></a></div>
<br />
Developers decided to grab existed account information from facebook or google+. It is easy and clever but some people don't like to connect their account to unknown web services. So, I would add signup with email.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrDDBrkWlWTbmKQurS6ri4w70YwmW6unvKD0gOV5cUDVbKPpFBYNwAp5aI42zPdgJcq3jmc_f10qxaQQadOpRt1O3bmhSTEUgYTCzRKFw2yjGFjQSNJWS-0NLAWhzHvSJWRqtdV_Q2zUUO/s1600/Screen+Shot+01-15-16+at+04.42+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrDDBrkWlWTbmKQurS6ri4w70YwmW6unvKD0gOV5cUDVbKPpFBYNwAp5aI42zPdgJcq3jmc_f10qxaQQadOpRt1O3bmhSTEUgYTCzRKFw2yjGFjQSNJWS-0NLAWhzHvSJWRqtdV_Q2zUUO/s640/Screen+Shot+01-15-16+at+04.42+PM.PNG" width="640" /></a></div>
<br />
The service sends email verification to my email.<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1bd-pRv_rbvmeMm8kdnz8RoFE6HhthDp1GydKt1IbFSwSJFT_tspkY4S1OglcerkXVACh2nCjmUbs5g6VRK3D32IckleFR3unHzjhf81JGnq08S0M2diYywmP2JMiloSoUgd2eAt2g1rw/s1600/Screen+Shot+01-15-16+at+04.42+PM+001.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1bd-pRv_rbvmeMm8kdnz8RoFE6HhthDp1GydKt1IbFSwSJFT_tspkY4S1OglcerkXVACh2nCjmUbs5g6VRK3D32IckleFR3unHzjhf81JGnq08S0M2diYywmP2JMiloSoUgd2eAt2g1rw/s640/Screen+Shot+01-15-16+at+04.42+PM+001.PNG" width="640" /></a></div>
<br />
After sign up there is simply wizard to add information to the account. We set up language we want to practice and our native one.<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQevdzae0qqGcW6ItdGoN6Ng7mElBpYzVJvR0EYJUqmc4GdwXOYn6uDNnpcJvl5Tc1VufocFUx3c6V5rS0TbO_4-paXWwcMH8pDp817EaXMl7AH_6jDW3qQeqtPAVhsPQP4h0YLfmyJ5M5/s1600/Screen+Shot+01-15-16+at+04.43+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQevdzae0qqGcW6ItdGoN6Ng7mElBpYzVJvR0EYJUqmc4GdwXOYn6uDNnpcJvl5Tc1VufocFUx3c6V5rS0TbO_4-paXWwcMH8pDp817EaXMl7AH_6jDW3qQeqtPAVhsPQP4h0YLfmyJ5M5/s640/Screen+Shot+01-15-16+at+04.43+PM.PNG" width="640" /></a></div>
<br />
UX is not very good. For example, I was looking for English language here but it is on the beginning of the list because this list is sorted by popularity not A-Z.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEime57w1nEYyYJYePzaUZ4X3M02iPMrNgdx9L8XX2_reKSRbPcdXhiCuuGxT5U9QCkImLM4CL1eft1T2QMfmLwJjr9jo9vjunDmYXhqm9NJ70GDLXFi5mbG1ueFFO_3tGoIGy38mhhxK6Wa/s1600/Screen+Shot+01-15-16+at+04.45+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEime57w1nEYyYJYePzaUZ4X3M02iPMrNgdx9L8XX2_reKSRbPcdXhiCuuGxT5U9QCkImLM4CL1eft1T2QMfmLwJjr9jo9vjunDmYXhqm9NJ70GDLXFi5mbG1ueFFO_3tGoIGy38mhhxK6Wa/s640/Screen+Shot+01-15-16+at+04.45+PM.PNG" width="640" /></a></div>
<br />
The service gets my picture from my Google account.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidYyfNDv8PhUYPo2FWn6zNf4T5xqApPVkQAn9OkBlZe29Nqm3QCLKmF7vE7ot_h9Uy_AnU8kMqOaBuXCYPMzhXPuIZzWM4b5ZQ4Jk2mnMgdvzH8Xj6V_UqXCPg4pRSL6xtRWpGTL1IkqZI/s1600/Screen+Shot+01-15-16+at+04.45+PM+001.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidYyfNDv8PhUYPo2FWn6zNf4T5xqApPVkQAn9OkBlZe29Nqm3QCLKmF7vE7ot_h9Uy_AnU8kMqOaBuXCYPMzhXPuIZzWM4b5ZQ4Jk2mnMgdvzH8Xj6V_UqXCPg4pRSL6xtRWpGTL1IkqZI/s640/Screen+Shot+01-15-16+at+04.45+PM+001.PNG" width="640" /></a></div>
<br />
There is funny penguin that gives you advice during the first usage of the service.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKQPnRlf8_fWwny_Tsvo6WgZKNrm9orH8vCNNrI1upjHeaID9wEIP1g-MNUVj-_jiEsT173gcBaGQLM7dwFcnxG2ekrNDEGFFKqA1XBMv7a59fnbvVtRp66GleugiOjPH6nejYVtslxIW-/s1600/Screen+Shot+01-15-16+at+04.46+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKQPnRlf8_fWwny_Tsvo6WgZKNrm9orH8vCNNrI1upjHeaID9wEIP1g-MNUVj-_jiEsT173gcBaGQLM7dwFcnxG2ekrNDEGFFKqA1XBMv7a59fnbvVtRp66GleugiOjPH6nejYVtslxIW-/s640/Screen+Shot+01-15-16+at+04.46+PM.PNG" width="640" /></a></div>
<br />
It shows us step-by-step UI of the service. I think it is very cool way to introduce users for sophisticated services.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiknXTOkbQh4AEVxl_1HNlyYk1eayaktoOgpcqKGjavj6wZITuckL3U_qEAjJla39je2KilRJyYJlBayatWbN0ukwkyZL1TmqB0sLJcOoYF2C1Dtbph9a10N0buIY-HDOH6151FdhNPzyzH/s1600/Screen+Shot+01-15-16+at+05.01+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiknXTOkbQh4AEVxl_1HNlyYk1eayaktoOgpcqKGjavj6wZITuckL3U_qEAjJla39je2KilRJyYJlBayatWbN0ukwkyZL1TmqB0sLJcOoYF2C1Dtbph9a10N0buIY-HDOH6151FdhNPzyzH/s640/Screen+Shot+01-15-16+at+05.01+PM.PNG" width="640" /></a></div>
<br />
There are so many elements inside the service. I am sure many of them has to be hidden. Also some parts have to be combined in one like this message about 50% profile complete. The view on HD monitor is not good because element are far one from another.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLdobdZmCXiyxRHr8nlpYrV-yhrMQbZ45wyQMnbXacsa55pfOJrT_RH1RiHU7Hi-R-zbXW4B-Rusy5wTenddUxZU_x3mTMfuYthfw3dEGvMGdbU1WahtAzJFHxxrMlgLo1gKDWuSapgxLy/s1600/Screen+Shot+01-15-16+at+05.02+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLdobdZmCXiyxRHr8nlpYrV-yhrMQbZ45wyQMnbXacsa55pfOJrT_RH1RiHU7Hi-R-zbXW4B-Rusy5wTenddUxZU_x3mTMfuYthfw3dEGvMGdbU1WahtAzJFHxxrMlgLo1gKDWuSapgxLy/s640/Screen+Shot+01-15-16+at+05.02+PM.PNG" width="640" /></a></div>
<br />
I decided to accomplish my profile. Here I can select my interests. So I can choose people with similar interest! But I can select only default. I cannot add my favorite music band, I can choose only "Rock music".<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWG7rwJucAlILsVyAq5DOo1UcMxLiWoOjW8tC2Sq4HTRaL66oiiM5-Y7idGsH6qXB2Y43wrTls6mCik_wTMYq9dC9URgQlFxqrApPDNYjlYv48Vd4ltUrNq4kuUjQUxKIaBaGdJGS81z1I/s1600/Screen+Shot+01-15-16+at+05.11+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWG7rwJucAlILsVyAq5DOo1UcMxLiWoOjW8tC2Sq4HTRaL66oiiM5-Y7idGsH6qXB2Y43wrTls6mCik_wTMYq9dC9URgQlFxqrApPDNYjlYv48Vd4ltUrNq4kuUjQUxKIaBaGdJGS81z1I/s640/Screen+Shot+01-15-16+at+05.11+PM.PNG" width="640" /></a></div>
<br />
The service has a badge system to develop loyalty of customers. I got Premium Profile Badge after I accomplish my profile.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZfToyNESvF1m_6Ag3fc03dEoK8pef7oOjBAz3trJ8Axu4agsoGcuDDTdzgKjTEoeNRBaYXvlOP-hmXnbzyD3HmU0lNqq-Ce1npFB4FlX8tG7lsDWMpW2fLFmPMUEw3vS7oikDTgLjA8zX/s1600/Screen+Shot+01-15-16+at+04.48+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZfToyNESvF1m_6Ag3fc03dEoK8pef7oOjBAz3trJ8Axu4agsoGcuDDTdzgKjTEoeNRBaYXvlOP-hmXnbzyD3HmU0lNqq-Ce1npFB4FlX8tG7lsDWMpW2fLFmPMUEw3vS7oikDTgLjA8zX/s640/Screen+Shot+01-15-16+at+04.48+PM.PNG" width="640" /></a></div>
<br />
The penguin gave me advice where can I find language friends. So I am going to live chat room. You can see language level, photo and country.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7qXXr7Y9nVUbeHJyW9Aoo7xxwgTR7-36rSlZD2ZALEQ3_F25uZXI4_RUdIX2qlyFuhv1XRv8sd6UNGKCkKyhbcn6BZBOB-fqd9K5nbMI2J6LBbKBb0u7fZvAKc41F0JEovAoKdbhNkpfT/s1600/Screen+Shot+01-15-16+at+05.08+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7qXXr7Y9nVUbeHJyW9Aoo7xxwgTR7-36rSlZD2ZALEQ3_F25uZXI4_RUdIX2qlyFuhv1XRv8sd6UNGKCkKyhbcn6BZBOB-fqd9K5nbMI2J6LBbKBb0u7fZvAKc41F0JEovAoKdbhNkpfT/s640/Screen+Shot+01-15-16+at+05.08+PM.PNG" width="640" /></a></div>
<br />
I can choose some native speaker ad write him a message.<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq-dhrJVIMHf0p3EmyQhlfICQjMC8SAo6RA8UHD8jPEByPqlFtSecfTf0dlLE6QtSi54kjxRHOfA3hrHzo3qZzKT2sbHkgUUYqw2cwACshjkGu_LMREfuOhEBY4LoRPZ5VuatkaeVdfUEo/s1600/Screen+Shot+01-15-16+at+05.49+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq-dhrJVIMHf0p3EmyQhlfICQjMC8SAo6RA8UHD8jPEByPqlFtSecfTf0dlLE6QtSi54kjxRHOfA3hrHzo3qZzKT2sbHkgUUYqw2cwACshjkGu_LMREfuOhEBY4LoRPZ5VuatkaeVdfUEo/s640/Screen+Shot+01-15-16+at+05.49+PM.PNG" width="640" /></a></div>
<br />
If users want to talk with you - you can use private chat for this.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDYxSUHD4dqm9jg6EvjN4QlRlL_yvXtbhYopiHrRu8m5sF-DlGMOa5GynseQsnDzatfnE_L__3TI5tBVEdqbkqLMq-u49jEMmUD1pCwHPTshYcl_ehDFQ-pRIEQUMLt2J83c8ftV62EQ3f/s1600/Screen+Shot+01-15-16+at+05.33+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDYxSUHD4dqm9jg6EvjN4QlRlL_yvXtbhYopiHrRu8m5sF-DlGMOa5GynseQsnDzatfnE_L__3TI5tBVEdqbkqLMq-u49jEMmUD1pCwHPTshYcl_ehDFQ-pRIEQUMLt2J83c8ftV62EQ3f/s640/Screen+Shot+01-15-16+at+05.33+PM.PNG" width="640" /></a></div>
<br />
There is also a vidio chat feature. But it works not very good - so users just give each others a Skype, Line or other accounts to talk in voice.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3BvBKRP9vNRtxMFiJvDe1CBwtCojHeYJgNL6ZB7ysUy6IbmkmG2q63uEhslRAVkLu6cVI70TSrVjrS35lEXCwpYqdsJnJk6e9gKVQSLXB-Dlh0sqCXoXYTfZW55Ic2FyF75-ei3FNUBQ4/s1600/Screen+Shot+01-16-16+at+03.52+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3BvBKRP9vNRtxMFiJvDe1CBwtCojHeYJgNL6ZB7ysUy6IbmkmG2q63uEhslRAVkLu6cVI70TSrVjrS35lEXCwpYqdsJnJk6e9gKVQSLXB-Dlh0sqCXoXYTfZW55Ic2FyF75-ei3FNUBQ4/s640/Screen+Shot+01-16-16+at+03.52+PM.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<b><br /></b>
<b><br /></b>
Service is clever. It propose me to share the link when I am loyal customer after many conversations.<br />
<b><br /></b>
<b><br /></b>
<b>Conclusion:</b><br />
<br />
Lets have a look at our usecases:<br />
1) I want to communicate easily with some foreigners to improve my language level.<br />
- It is easy to find language buddy and have a text chat, but Video chat has some technical problems.<br />
<br />
2) I want to talk with people who share my interests.<br />
- Yes, I can add my interests and see interests of others. I am sure information about this has to be on the main page to promote service. Disadvantage: I cannot modify my interests.<br />
<br />
3) I want to know how to communicate because I have never done it before. I afraid to do something wrong.<br />
- Smart penguin explain me a lot. But I need more information - how to start chat, what I have to ask first etc.<br />
<br />
4) My language level is not so good. I want to be sure that nobody will mock on me.<br />
- I didn't find any solution of this usecase.Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-17373678703015869752015-10-26T05:00:00.000+02:002015-10-26T05:00:01.654+02:00Usecase: I am going to watch some movies online. I don’t know what movie I am looking for.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIYZbBM_2BVDeP_IoPsuQZWVJ5xV2U96guMgZFwry-fbIWLVPDEtvARytDjxQREDYJg6Mz43mMTHzXJf0A45Yj0SjmzN1EuSOWFrrR5N3Rtb668bUnmkSkHM4NJ7a5XKoh-Yx0Ic-MWv05/s1600/Screen+Shot+10-22-15+at+11.03+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIYZbBM_2BVDeP_IoPsuQZWVJ5xV2U96guMgZFwry-fbIWLVPDEtvARytDjxQREDYJg6Mz43mMTHzXJf0A45Yj0SjmzN1EuSOWFrrR5N3Rtb668bUnmkSkHM4NJ7a5XKoh-Yx0Ic-MWv05/s640/Screen+Shot+10-22-15+at+11.03+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
This one looks pretty cool. Let’s find some.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<a name='more'></a><br />
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWcBxNsYdnrDsbtCkvLkh3Rrs2XHz6MkghAS3p6zuKW7Uq9zrr-53Qc8mj7lM6GeEC4LmExFcI2iEwfZ0UxVZTkDQ9ERtJ40pawG7WVJgW4XoEVuxr_IqS9eIgSSfd97v5JF7YlJuqbtz1/s1600/Screen+Shot+10-22-15+at+11.05+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWcBxNsYdnrDsbtCkvLkh3Rrs2XHz6MkghAS3p6zuKW7Uq9zrr-53Qc8mj7lM6GeEC4LmExFcI2iEwfZ0UxVZTkDQ9ERtJ40pawG7WVJgW4XoEVuxr_IqS9eIgSSfd97v5JF7YlJuqbtz1/s640/Screen+Shot+10-22-15+at+11.05+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
I am going to search visually. Maybe I would like some
poster. On this web site images are compressed and very small – it is hard to
figure out what is nice movie.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTfO2Vbt-oF_zD9QlC_MHzmaIEDR60M3fJkvrq5NtpFjTdNhZQ-8BBAg5Kuuynxt807b56mBLBPuMFlDzn1R4dMh-SjmH-KzLe_X9iiOrhWMW200YcRDtGM35lbrGaSqk4awyq5WP_O-dZ/s1600/Screen+Shot+10-22-15+at+11.18+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTfO2Vbt-oF_zD9QlC_MHzmaIEDR60M3fJkvrq5NtpFjTdNhZQ-8BBAg5Kuuynxt807b56mBLBPuMFlDzn1R4dMh-SjmH-KzLe_X9iiOrhWMW200YcRDtGM35lbrGaSqk4awyq5WP_O-dZ/s640/Screen+Shot+10-22-15+at+11.18+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Here are small posters also. But then I realized that these
are categories. So I can skip all 2008 movies just because I don’t like
“Madagascar” cartoon. It is very bad way to organize website navigation.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUtpxqcx4Zi20h0nq7uExFXxu2GPYlwLc_5H5PpUpL8OwOKD8qiN7tj1n7Rw3YdE0jWyPActoFQHcan4k23Ictqfh41aAcSz0VRcfhdrGJr1ckSNg3h8Q_gGKvczlKT9OJW5G2MEmGiVLm/s1600/Screen+Shot+10-22-15+at+11.11+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUtpxqcx4Zi20h0nq7uExFXxu2GPYlwLc_5H5PpUpL8OwOKD8qiN7tj1n7Rw3YdE0jWyPActoFQHcan4k23Ictqfh41aAcSz0VRcfhdrGJr1ckSNg3h8Q_gGKvczlKT9OJW5G2MEmGiVLm/s640/Screen+Shot+10-22-15+at+11.11+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
Here is better posters presentation. They even have a IMDB
rate on it – so I can choose in two ways – by beauty of the poster and by rate
in the same time. What I really don’t like – it is mess of ugly information on
the right side.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8hqWxcZsb2FrvAOrMviclwVjFSMzHPb5OuIE-kCbJ_4gc6dZzLMKcYY4UZGTHIwND9jERuR97Sts1gs2pBuEUkzhAxDpqCt6VOss99F2dt_ypf7HDHdkq_2Q1vLbRUcjSiznAiefG465/s1600/Screen+Shot+10-22-15+at+11.15+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8hqWxcZsb2FrvAOrMviclwVjFSMzHPb5OuIE-kCbJ_4gc6dZzLMKcYY4UZGTHIwND9jERuR97Sts1gs2pBuEUkzhAxDpqCt6VOss99F2dt_ypf7HDHdkq_2Q1vLbRUcjSiznAiefG465/s640/Screen+Shot+10-22-15+at+11.15+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
This one is also great. Posters are interactive – you can
see “play” icon when cursor is hovered over it.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsKYeR2YemTIKssiBqhwy3Gq68zUwWZTcowxgH-AbVf7GeVl-n0FInN6i-jNgGduxsgpocDprNHRKCB1t_O4oMvreyeFG0uLj5eoSW-XyartZWrjYMcO4RmWDZCgMHRXJcQWOf7mCdmcvS/s1600/Screen+Shot+10-22-15+at+11.24+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsKYeR2YemTIKssiBqhwy3Gq68zUwWZTcowxgH-AbVf7GeVl-n0FInN6i-jNgGduxsgpocDprNHRKCB1t_O4oMvreyeFG0uLj5eoSW-XyartZWrjYMcO4RmWDZCgMHRXJcQWOf7mCdmcvS/s640/Screen+Shot+10-22-15+at+11.24+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
I like this one. There are big posters, useful sidebar, and
nothing I don’t need.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo3sG9u1ud2Br4TNMFRMN5xvAUOzV2Na6PdCivl8KctU7Gci8JARV7oN9Km-axkELPaxoFaTCeSoTOyz2BteJuqUuyQbxC024vaf6Nqjb6r-3jikSbU6tp2u8JulIcY8SJCP89ILy4l2Uo/s1600/Screen+Shot+10-22-15+at+11.27+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo3sG9u1ud2Br4TNMFRMN5xvAUOzV2Na6PdCivl8KctU7Gci8JARV7oN9Km-axkELPaxoFaTCeSoTOyz2BteJuqUuyQbxC024vaf6Nqjb6r-3jikSbU6tp2u8JulIcY8SJCP89ILy4l2Uo/s640/Screen+Shot+10-22-15+at+11.27+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
Users can change view. Here they can see more information
about movies. Users can see what is free of charge. I think there are too much
free space in the middle. There would be some useful information like IMDB
rate. Users prefer to look at the poster when they search. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeP6jUbelEJc56HSYeoepIkFyUDTbgshjA5p9ShrtOzxy3UMe5H2x4O61IfvGV5C7tZojORbDIlLxqpDxxH94vl_uRxSYxA6hwRCBbQmzynTNfKnYjKdn1xM11xfD_9SSDnO3bGzCf8FHs/s1600/Screen+Shot+10-22-15+at+11.45+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="352" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeP6jUbelEJc56HSYeoepIkFyUDTbgshjA5p9ShrtOzxy3UMe5H2x4O61IfvGV5C7tZojORbDIlLxqpDxxH94vl_uRxSYxA6hwRCBbQmzynTNfKnYjKdn1xM11xfD_9SSDnO3bGzCf8FHs/s640/Screen+Shot+10-22-15+at+11.45+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
What if I want to watch some Sci-Fi movie? Let’s try filters
and navigations. Here we have “genres”.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL91KsZXVS9rKi1SpwWFcbtHtnC3l6iI9v_Wcwc2RxqC4TglBc07GoOhO3VyGkmhbXWlrRBEYZW-w5NNqp0he6ceBRVO_srsJ6AEf1h35LReTrV6zArSScfXMtvKDrszJaFEO0IW8Z92z9/s1600/Screen+Shot+10-22-15+at+11.48+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="352" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL91KsZXVS9rKi1SpwWFcbtHtnC3l6iI9v_Wcwc2RxqC4TglBc07GoOhO3VyGkmhbXWlrRBEYZW-w5NNqp0he6ceBRVO_srsJ6AEf1h35LReTrV6zArSScfXMtvKDrszJaFEO0IW8Z92z9/s640/Screen+Shot+10-22-15+at+11.48+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p> </o:p>“Category” is better word for this.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcLMRWTFn0CLoOQgsXJiTVVdsObZ5dc9dplh5qmw5WDI2dOOqjyyzqGj0k-DnCm1EDWdNs0Fl-veJSR_Q__LYbWkZT8bQKfNHSRJTX_8ISbKsinPwFX1aUtgANTjrPZrrvdWkQD-QRag_P/s1600/Screen+Shot+10-22-15+at+11.49+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcLMRWTFn0CLoOQgsXJiTVVdsObZ5dc9dplh5qmw5WDI2dOOqjyyzqGj0k-DnCm1EDWdNs0Fl-veJSR_Q__LYbWkZT8bQKfNHSRJTX_8ISbKsinPwFX1aUtgANTjrPZrrvdWkQD-QRag_P/s640/Screen+Shot+10-22-15+at+11.49+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Users will never find Sci-Fi movie on this web site.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHKdVt-CwCnW6BYuoy7rAfTjyACuVFNS17Aq-FwlWFnlnpMu79nK1_APVrAFjo_gx4P1T7x0ztNW8vg_RE3lcMooDCcLmtmm2PvMgx1orHFhBGizlZevq-xJM7Nb3GgU-YbE7uNAW9b0NF/s1600/Screen+Shot+10-22-15+at+11.51+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHKdVt-CwCnW6BYuoy7rAfTjyACuVFNS17Aq-FwlWFnlnpMu79nK1_APVrAFjo_gx4P1T7x0ztNW8vg_RE3lcMooDCcLmtmm2PvMgx1orHFhBGizlZevq-xJM7Nb3GgU-YbE7uNAW9b0NF/s640/Screen+Shot+10-22-15+at+11.51+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
I am very sure that filter in sidebar is the best way to do
it. And we can choose several categories in one search.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
I decided to watch “The Martian”. I go to search input and
enter the name.</div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga_aG_nFd2uUW758zd6vJ7aS1qhjRIH763fvbQR_LDH8gJcQ-svCT5BjdkJMpa8GEnxkZ3m1sgwaQzJ-dLmUTND5765o0Cw_Isb3LeVFhjV2INJ2RK3jKaSzQFdaSEsRab6Grh67qQGSQb/s1600/Screen+Shot+10-22-15+at+11.37+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga_aG_nFd2uUW758zd6vJ7aS1qhjRIH763fvbQR_LDH8gJcQ-svCT5BjdkJMpa8GEnxkZ3m1sgwaQzJ-dLmUTND5765o0Cw_Isb3LeVFhjV2INJ2RK3jKaSzQFdaSEsRab6Grh67qQGSQb/s640/Screen+Shot+10-22-15+at+11.37+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The search has to be interactive and show you variations
before you finish typing. Here we have to press “search” button. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGkMjaLIHwuSH1ODzHzccP_YAXTqOj04M3TMHmdnveo0w8M1EACTqVKktGxunI2HQh-SuaAvP_65l3tviUUWGXWQz8dU7sAJkSRVBAeMRumKlBMxIIy9VJqCgrR53P7TOtFsp1wwwGRtYO/s1600/Screen+Shot+10-22-15+at+11.38+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGkMjaLIHwuSH1ODzHzccP_YAXTqOj04M3TMHmdnveo0w8M1EACTqVKktGxunI2HQh-SuaAvP_65l3tviUUWGXWQz8dU7sAJkSRVBAeMRumKlBMxIIy9VJqCgrR53P7TOtFsp1wwwGRtYO/s640/Screen+Shot+10-22-15+at+11.38+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
Here we also have to press button – but result seams much
better. We also found some similar movie. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQZ9pyQWwiiWlxefcBgQHKXivu05NZjmtGheNB3n1TDDspS2TkUdl8RhCOTGylaaJYFhF5XgESXkbh6ATXUpjSWtz7tco1P-jPVsdv0tDI3LSkvt4j0NLgEG4uFGNoGVpG1vOiHzbQ1d0x/s1600/Screen+Shot+10-22-15+at+11.35+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQZ9pyQWwiiWlxefcBgQHKXivu05NZjmtGheNB3n1TDDspS2TkUdl8RhCOTGylaaJYFhF5XgESXkbh6ATXUpjSWtz7tco1P-jPVsdv0tDI3LSkvt4j0NLgEG4uFGNoGVpG1vOiHzbQ1d0x/s640/Screen+Shot+10-22-15+at+11.35+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
Finally we have interactive search.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ISjfUb_aLrgVrslFLIguzI89nLz9iVqZn4QUekPHHVNcHWwgmdlEqQvdEQwDOXKNl4gv5exHf_kAs-Nz9JRBtf_zvS7QkcaukINsGy-3OBj1biQtI1tatrwIT9VeoM2_Iy1sm6EiqLry/s1600/Screen+Shot+10-22-15+at+11.34+AM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ISjfUb_aLrgVrslFLIguzI89nLz9iVqZn4QUekPHHVNcHWwgmdlEqQvdEQwDOXKNl4gv5exHf_kAs-Nz9JRBtf_zvS7QkcaukINsGy-3OBj1biQtI1tatrwIT9VeoM2_Iy1sm6EiqLry/s640/Screen+Shot+10-22-15+at+11.34+AM.PNG" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
There is also extended search.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<b>Recap:</b> Big posters, additional rates nearby each movie, well-organized
categories navigation, smart search -
all these features will help your customers to find some movie for their
pleasure.<o:p></o:p></div>
Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-36904497644434192782015-08-20T02:11:00.000+03:002015-08-20T12:33:57.262+03:00Hand-drawn web design in landing pages and other sites<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ7kI_ab7wjLoaGb_bKim30nfXuRPDZsqzOqIVOfGlFQzEtySMBVZuuKD1w03mlKM6V-f8nepT9PRwScqJ6Ow5j7o5hbnSnCyo3nLoKRNtKqHGqYK1EN9Bjk37hZI2uUhdSsR_QmvNvj96/s1600/ScreenShot219.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="313" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ7kI_ab7wjLoaGb_bKim30nfXuRPDZsqzOqIVOfGlFQzEtySMBVZuuKD1w03mlKM6V-f8nepT9PRwScqJ6Ow5j7o5hbnSnCyo3nLoKRNtKqHGqYK1EN9Bjk37hZI2uUhdSsR_QmvNvj96/s640/ScreenShot219.png" width="640" /></a><br />
<br />
It is not so easy to make web design human friendly. Flat design and other modern trends make web site robotic. All these straight lines, uniform colors, glamour photos are not natural and they makes people feel uncomfortable like in hospital. Austrian artist and architect Hundertwasser called straight lines "godless and immoral" and "something cowardly drawn with a rule, without thought or feeling". There is one solution to make web sites human friendly – use hand-drawing design, which lively lines look far more natural. This way of web exposure became the latest trend. Let’s look through some of them.<br />
<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHA2OlICYDLfj-ct-2Dg43t_ScqrnwkhJBkqob36GBWg2jmp8uN3HXDEI3nwwZIKBCy1SP9p2lnlFXB4kL8hDPgcJqpC1MVPnh6EdJlqdQH5ggyhfMlEeUhrSoOZsaCfcTe4LWFBBzB42/s1600/ScreenShot215.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHA2OlICYDLfj-ct-2Dg43t_ScqrnwkhJBkqob36GBWg2jmp8uN3HXDEI3nwwZIKBCy1SP9p2lnlFXB4kL8hDPgcJqpC1MVPnh6EdJlqdQH5ggyhfMlEeUhrSoOZsaCfcTe4LWFBBzB42/s640/ScreenShot215.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRNT16fPwjjqHissfSlMdiAh5wxTEYZulaWENNFzmDit_ic9r3HKRhRGUl_fBKJLsKL3yh2GT9pv37Tpsf6BlPgOyzHYUzRR2sVgYUCBzYjI9wzLGB0YGn2YnD5wkvVNmAv_Gv20gTQuBB/s1600/ScreenShot214.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRNT16fPwjjqHissfSlMdiAh5wxTEYZulaWENNFzmDit_ic9r3HKRhRGUl_fBKJLsKL3yh2GT9pv37Tpsf6BlPgOyzHYUzRR2sVgYUCBzYjI9wzLGB0YGn2YnD5wkvVNmAv_Gv20gTQuBB/s640/ScreenShot214.png" width="640" /></a></div>
<br />
This is an e-shop of hipsters’ dresses. <a href="http://www.meandoli.com/">Whole site</a> is drawn by pencils.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-crvE8bQaKYNxW5cCaoKrPuT53GltJEWWop7MZyzG843uQWj5EHbMeQMRIklBt9JvKTr4x6K7ERD43ER4V5KfwhItUyLNWRqzGM2Zujo2lm0EKDnPb1DJLwa002kpOughLKQdpPuN2Po/s1600/ScreenShot216.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-crvE8bQaKYNxW5cCaoKrPuT53GltJEWWop7MZyzG843uQWj5EHbMeQMRIklBt9JvKTr4x6K7ERD43ER4V5KfwhItUyLNWRqzGM2Zujo2lm0EKDnPb1DJLwa002kpOughLKQdpPuN2Po/s640/ScreenShot216.png" width="640" /></a></div>
<br />
On other hand <a href="http://kinetic.com.sg/">some sites</a> seem to be too weird to use it in, for example, commerce.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitHmN0EdX6gDU4kiBwWkc8AUEK5TDxh0Jda5-Bs10rKMn0k90M1y2d_IIUgiOl5d_IwHe9dMxqxlIhxI5jDryeWPsxagXnxlvnQ8SjvYP8DTjzdKwl9UK3ZXHsX3gESgG3SZ7VgmF3HEhB/s1600/543ba22121a1687001032c3135f9cf1f.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="484" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitHmN0EdX6gDU4kiBwWkc8AUEK5TDxh0Jda5-Bs10rKMn0k90M1y2d_IIUgiOl5d_IwHe9dMxqxlIhxI5jDryeWPsxagXnxlvnQ8SjvYP8DTjzdKwl9UK3ZXHsX3gESgG3SZ7VgmF3HEhB/s640/543ba22121a1687001032c3135f9cf1f.jpg" width="640" /></a></div>
<br />
It is cool for teenager customers. They like weird and aggressive design. Like this web site concept by <a href="https://www.behance.net/sindinosaurio">Sindy Ethel</a> and <a href="https://www.behance.net/r3do">Alan (R3DO) Rodriguez</a>.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgWlwhr9GasiwOX6Urcnl3pvyD8MQcM8FwpBYquaTaErZCxH4shlaX6KDcmWkjMfiqQIWs9kQ3Mv1eGd2l_2v9Pb2tKUPTuzExV1eWSeeonedaZuxq0785vY6I3OygpL-rfU9kqNHfDeN/s1600/b0ed56f985279dee63796682b2c4ccba.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="418" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgWlwhr9GasiwOX6Urcnl3pvyD8MQcM8FwpBYquaTaErZCxH4shlaX6KDcmWkjMfiqQIWs9kQ3Mv1eGd2l_2v9Pb2tKUPTuzExV1eWSeeonedaZuxq0785vY6I3OygpL-rfU9kqNHfDeN/s640/b0ed56f985279dee63796682b2c4ccba.jpg" width="640" /></a></div>
<br />
Designers have to keep balance between creativity and information readability. <a href="https://www.behance.net/mohsin">Like this one does.</a><br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRgAjFy1lSFyqEp0YzbCkMd0G2Akgv10nNNblPVMyUTAu9_GQhpIqDBEGPhbJrKj8myr1mmuJQ2YVeAn394k391uIVGIa_dr7Y-_322enxkmToRN3RdZ2i9tOau9dzhyphenhypheneMHGgH1wgwji2/s1600/ScreenShot217.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRgAjFy1lSFyqEp0YzbCkMd0G2Akgv10nNNblPVMyUTAu9_GQhpIqDBEGPhbJrKj8myr1mmuJQ2YVeAn394k391uIVGIa_dr7Y-_322enxkmToRN3RdZ2i9tOau9dzhyphenhypheneMHGgH1wgwji2/s640/ScreenShot217.png" width="640" /></a></div>
<br />
Here we can see use of drawing in decorative case. <a href="http://www.hermesemployeur.com/en/">There</a> is enough space for information perception.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCTN2miDnvufkA0jxVZ15mCzVOJ7X65htMyNoShUWWnp-GMsWIRuas0pgCt6vwO4eK_fXLWyArgGjoYKs5lzbqouO-qFyMS8wsMZVDDbFSXfeDGTOXNgREFWUOWcH_vj2dMCtUgDgPnmEt/s1600/6dff452ae881fa36bbe02d2a648f14b4.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCTN2miDnvufkA0jxVZ15mCzVOJ7X65htMyNoShUWWnp-GMsWIRuas0pgCt6vwO4eK_fXLWyArgGjoYKs5lzbqouO-qFyMS8wsMZVDDbFSXfeDGTOXNgREFWUOWcH_vj2dMCtUgDgPnmEt/s640/6dff452ae881fa36bbe02d2a648f14b4.jpg" width="640" /></a></div>
<br />
Some designers use art a little bit. They combine drawings with photos.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIGbVNyDMqMycuUo8H1b1eeui6-tgEQRhxYgFZaccnfubxKnNtZ88w2OpJQQ7hNqHAFkPi_D9SS6YjTAjaKEofjzEIrhjbiyBOAfq4n8Bce0z6BRq4utjff_vwxbhTcnezoRyq6TiHqaEO/s1600/ScreenShot218.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIGbVNyDMqMycuUo8H1b1eeui6-tgEQRhxYgFZaccnfubxKnNtZ88w2OpJQQ7hNqHAFkPi_D9SS6YjTAjaKEofjzEIrhjbiyBOAfq4n8Bce0z6BRq4utjff_vwxbhTcnezoRyq6TiHqaEO/s640/ScreenShot218.png" width="640" /></a></div>
<br />
<a href="http://wybieramyklienta.pl/en">Some of them</a> combine drawings with geometry.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqJeoMhVrLyl0jaSJKL6pAOpfj5sq9j5mpFdkKr6_LWJFimVxr86X4WOU8TviHW5Wfo7bE_0u94JcPayYvB-VnfMaSOa8PSXgdBzWpd1f44NUqiKlo6G9kP8sLq-_I7ZYx6W9c2Dd4csc/s1600/Gonzalo-Azores-X-Barclaycard2.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="508" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqJeoMhVrLyl0jaSJKL6pAOpfj5sq9j5mpFdkKr6_LWJFimVxr86X4WOU8TviHW5Wfo7bE_0u94JcPayYvB-VnfMaSOa8PSXgdBzWpd1f44NUqiKlo6G9kP8sLq-_I7ZYx6W9c2Dd4csc/s640/Gonzalo-Azores-X-Barclaycard2.jpeg" width="640" /></a></div>
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzSlXMiE_msm0t63FBiXagpPis07U5jWqEhFYr8_Ywk25VYzmeYktZBIH9bsNcduOa8FpgyrhFd6R2iDdRqait6Tsv8cNB9b4-CJrLMPvR85zT81zHXcdGbwIDnD-NarDNIrQdqGK53u3_/s1600/cb30f97b8622987f7a45f10b056177d8.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzSlXMiE_msm0t63FBiXagpPis07U5jWqEhFYr8_Ywk25VYzmeYktZBIH9bsNcduOa8FpgyrhFd6R2iDdRqait6Tsv8cNB9b4-CJrLMPvR85zT81zHXcdGbwIDnD-NarDNIrQdqGK53u3_/s640/cb30f97b8622987f7a45f10b056177d8.jpg" width="640" /></a></div>
Hand-drawing design is popular in food business. I think it is great influence of chalk lettering menu design.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IdhYyplnBqPIUVggkT5UdSh8ry1pLrgH8YmPar3YRljvx_3IaPT4KfxTcAcWXvZ82TFm1OF7o7tQZ8YNvlefU-nLo4HE8B6zV5dZT3sa1RuiRiq1Mva3whMMtW_AJ2Z7N_pDdvpiwyKZ/s1600/ScreenShot221.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IdhYyplnBqPIUVggkT5UdSh8ry1pLrgH8YmPar3YRljvx_3IaPT4KfxTcAcWXvZ82TFm1OF7o7tQZ8YNvlefU-nLo4HE8B6zV5dZT3sa1RuiRiq1Mva3whMMtW_AJ2Z7N_pDdvpiwyKZ/s640/ScreenShot221.png" width="640" /></a></div>
<br />
Also it is popular in<a href="http://helenandjoshsittinginatree.com/index.html"> family web sites</a> because drawings are very sweet.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV9-o5Trgkf1ITWn9yNlBat62YYrfYxTYTalu9XMJxuH0HQWvnGTdMTnTzEtnPRfWVqzzrafkOd7IKC5qa2_fc0DH3l9hYNH7RDFh-kuUqYKnci99E6kCJiRyry0U_W8jeAivMY2AAX3Ky/s1600/ScreenShot220.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV9-o5Trgkf1ITWn9yNlBat62YYrfYxTYTalu9XMJxuH0HQWvnGTdMTnTzEtnPRfWVqzzrafkOd7IKC5qa2_fc0DH3l9hYNH7RDFh-kuUqYKnci99E6kCJiRyry0U_W8jeAivMY2AAX3Ky/s640/ScreenShot220.png" width="640" /></a></div>
<br />
Some cultures are very into drawings. We meet hand-made illustration on Japanese and Korean<a href="http://hunting.kotobayo.tv/"> web-sites</a> often. They are more complicated and detailed.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRbsMxN5WEwBn5tYCz0k5cvQnUzk8S5TPhNUrQm3E5A5OgsP41l8Jmr0uggpbNF-7mTTPal1I8h5lDah_eeCOxYiYR_KS9lJjnJ6152nnuxdVKQtI_TD7hPz4II4-r5zBhNdOzQe56IuDr/s1600/bic-ans-du-stylo-bic-cristal-on-behance-13844268888nkg4.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="534" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRbsMxN5WEwBn5tYCz0k5cvQnUzk8S5TPhNUrQm3E5A5OgsP41l8Jmr0uggpbNF-7mTTPal1I8h5lDah_eeCOxYiYR_KS9lJjnJ6152nnuxdVKQtI_TD7hPz4II4-r5zBhNdOzQe56IuDr/s640/bic-ans-du-stylo-bic-cristal-on-behance-13844268888nkg4.jpg" width="640" /></a></div>
<br />
We can see that hand-drawn web sites are very catchy and human friendly. Why aren’t they so popular in modern design? Probably, because hand-drawn web sites are much more expensive in production. But there is a way out - there are many skilled artists in developing countries and they can do the same job twice or trhee times cheaper than in USA or western europe. Like this artist from Ukraine: <a href="https://www.behance.net/mykytiuk">https://www.behance.net/mykytiuk</a><br />
You just need to find them and cooperate.<br />
<div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-10710063892886938342015-04-27T12:48:00.000+03:002015-05-04T15:18:05.994+03:00 Use cases and offers: How do mobile operators' front-pages look like?<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQAOXoIH9qfOoSWcextzxkhGyI4t_lob-tWmCDvIc-pEd2ff-pFK-eCPi4KvPBIR9rWyj0VQp_cmQ3cJ3sYiNbumVQciSXD1H3miPkvm9bTh4-7uRx9V2mONxHJ7F0SaFAQ_tRgSvPUERD/s1600/ScreenShot001.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQAOXoIH9qfOoSWcextzxkhGyI4t_lob-tWmCDvIc-pEd2ff-pFK-eCPi4KvPBIR9rWyj0VQp_cmQ3cJ3sYiNbumVQciSXD1H3miPkvm9bTh4-7uRx9V2mONxHJ7F0SaFAQ_tRgSvPUERD/s1600/ScreenShot001.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
Usually users have to know - what is site they just have arrived about. There are some images of things that are connected with site business - pizza on pizzeria site, or toys on children online shop. </div>
<div class="separator" style="clear: both;">
This rule didn't work with mobile network operators' (MNO) web-sites, because their identity is already wide known from TV ads or bildboards. It is enough to make up logotype and colours there for users to identify the company. This knowledge make MNO's websites kind of online bildboard with many offers. There are another use cases that are minor. Lets look through some of them.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggIufTyY_5Ufmx-ELii9rpDo-QCsanPjaEOIOnEet6AM66nOvh2HPLdusjRa0vZzPfnpvESCJ1qVhK-Cvmfw5C6DTL96TrZyVrtPFgFwGo23MPxb29HEWz2e4hyphenhyphenk7QtLjxb_jlTNM2RPpJ/s1600/ScreenShot005.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggIufTyY_5Ufmx-ELii9rpDo-QCsanPjaEOIOnEet6AM66nOvh2HPLdusjRa0vZzPfnpvESCJ1qVhK-Cvmfw5C6DTL96TrZyVrtPFgFwGo23MPxb29HEWz2e4hyphenhyphenk7QtLjxb_jlTNM2RPpJ/s1600/ScreenShot005.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
"O2" web site put cat on the front page. I am realy impressed with it. The offers are mostly connected with kind of cellphone shop. So users come to buy cellphones here. This is major use case.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5uJNSxlLqkJrvbGbLYZ2EL_zsxkATlyF4Zp_vok0FfLKcnTtxxDfO0zLGXhRiFNeX16AqefeRdfo70k98rrQ0Us2iz9TMWHGSzKL6IfTU6OvL3-82L7hJP5FG1bugJ2DeGBYOJUm-vx0J/s1600/ScreenShot006.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5uJNSxlLqkJrvbGbLYZ2EL_zsxkATlyF4Zp_vok0FfLKcnTtxxDfO0zLGXhRiFNeX16AqefeRdfo70k98rrQ0Us2iz9TMWHGSzKL6IfTU6OvL3-82L7hJP5FG1bugJ2DeGBYOJUm-vx0J/s1600/ScreenShot006.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Vodaphone sells cellphones also.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZnPUy1uTc4V3JJKWSufojaD_8IBHPxeBvsaj-utdJSZvMIRiv5eC3gRTxqI3_62_opXWwQBvizuQclyK-a5sB99nbRSZ_zUX3W_aGHlKtQ7sEXdfAb_Ga23sbobD33_yZch96OdZl3nyF/s1600/ScreenShot007.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZnPUy1uTc4V3JJKWSufojaD_8IBHPxeBvsaj-utdJSZvMIRiv5eC3gRTxqI3_62_opXWwQBvizuQclyK-a5sB99nbRSZ_zUX3W_aGHlKtQ7sEXdfAb_Ga23sbobD33_yZch96OdZl3nyF/s1600/ScreenShot007.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Ortel mobile makes his front page multifunctional. The major attention is atracted to action "5 Euro bonus credit". There are another important links underneath (Trariffs, Advantages, Security).</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBIbKqw5RP1P0XflMtRUQZXrHCQ7FWlonMnhNPq500o8jygmQUlIQiBqdEJ5GMwnJ4wjhyphenhyphen4YNk5u6QZ0W9aspfi-RLPaEVVNIZ5lXysQu-45awdbUvbu67Un6vqsAjbIwqKwdLZTbwdutc/s1600/ScreenShot008.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBIbKqw5RP1P0XflMtRUQZXrHCQ7FWlonMnhNPq500o8jygmQUlIQiBqdEJ5GMwnJ4wjhyphenhyphen4YNk5u6QZ0W9aspfi-RLPaEVVNIZ5lXysQu-45awdbUvbu67Un6vqsAjbIwqKwdLZTbwdutc/s1600/ScreenShot008.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
This one has no distinct identity. The main offer is "Join us because it is profitably in rouming". Users need more motivation to join.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ixWKoH8cCHEcguX1bXABTADp2V4fW_fYmYa7RJouNI7ZQEyhKcNNtdyMlOjN1_sdFRE2kgr5Y9PcMWNnGl6GkYWxWkppRzMrvalZL6ws7eUTLo1EUAaEs15SRZdDrA-2QRJEYIBhiCCZ/s1600/ScreenShot002.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ixWKoH8cCHEcguX1bXABTADp2V4fW_fYmYa7RJouNI7ZQEyhKcNNtdyMlOjN1_sdFRE2kgr5Y9PcMWNnGl6GkYWxWkppRzMrvalZL6ws7eUTLo1EUAaEs15SRZdDrA-2QRJEYIBhiCCZ/s1600/ScreenShot002.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Singapore mobile operator Singtel makes business on toys of Hello Kitty. Asian users use to have such toys on the cellphone.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIE3bUOe7kCZRNu78xibMY1qZBXmOMcl_moStCCLqrc6wV-Xqm5TX4zfKqnJno9Hh1HnkBXN8TR6_IiH3S3w4cCW3Nr_7FCQQTFmLSFYTxOe7hmaYLoKJUQFqPxs4rhPoFPNHRNvrhM2c1/s1600/ScreenShot003.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIE3bUOe7kCZRNu78xibMY1qZBXmOMcl_moStCCLqrc6wV-Xqm5TX4zfKqnJno9Hh1HnkBXN8TR6_IiH3S3w4cCW3Nr_7FCQQTFmLSFYTxOe7hmaYLoKJUQFqPxs4rhPoFPNHRNvrhM2c1/s1600/ScreenShot003.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Singtel has geometric unusual menu by the way.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJzkZOn1x8EvUbbUZxA4Wv73fyeq6niU7O5G2NlVN0ljKAnyDI8Z2QnCp8zDGKHT9cX4U9WrAf1_HImvU0W2niSG8RkAd1_HnPVgdZRuQTiJ1L10NvtzrSoEtqA5MO9FNSddD7NgMy1gCl/s1600/ScreenShot009.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJzkZOn1x8EvUbbUZxA4Wv73fyeq6niU7O5G2NlVN0ljKAnyDI8Z2QnCp8zDGKHT9cX4U9WrAf1_HImvU0W2niSG8RkAd1_HnPVgdZRuQTiJ1L10NvtzrSoEtqA5MO9FNSddD7NgMy1gCl/s1600/ScreenShot009.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
This is agressive advertisement of Russian MTC. I am not sure what do they offer but users are scary anyway.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPXZC_xAHamwCMyFtz3S7kwUOinNibJeGm0yL8g3Z2eXPHKQcyDnwUAewYa17VrzJvStIbLd60m7wPamCwFr7eqYpnTwQUt7c7qd5IYzqcOdHNjGfWn4D9JeJdctGvvpNWc2QKzzFH9gg8/s1600/ScreenShot010.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPXZC_xAHamwCMyFtz3S7kwUOinNibJeGm0yL8g3Z2eXPHKQcyDnwUAewYa17VrzJvStIbLd60m7wPamCwFr7eqYpnTwQUt7c7qd5IYzqcOdHNjGfWn4D9JeJdctGvvpNWc2QKzzFH9gg8/s1600/ScreenShot010.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Ukrainian mobile network operator Kyivstar uses its identity very cool. The main offer is action "Freedom smartfone". There are another links to other use cases below (Balance recharge, SMS, Phone setting).</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTQxgz3WDB5ZuzIFtrNYLX5793a1cPtUvl0I0aKvdibqJk-ucR6AUm-UThfUE_HV4yqF3wKiB9RHXRfEiSeEFF8rtxMzXb9lA4uKHkw4jFnIiKX1DtgADP4z8H3uQ_yv6eVPPk45ehvqF/s1600/ScreenShot011.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTQxgz3WDB5ZuzIFtrNYLX5793a1cPtUvl0I0aKvdibqJk-ucR6AUm-UThfUE_HV4yqF3wKiB9RHXRfEiSeEFF8rtxMzXb9lA4uKHkw4jFnIiKX1DtgADP4z8H3uQ_yv6eVPPk45ehvqF/s1600/ScreenShot011.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
This company makes the front page as landing page. Users want simply tariffs and here they are.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBSaOgoOGAKo1uvfbmRK-Kh_aIBp0EegNPKZHUpO8BX9PTWh_CcuZEC9If0KGgbwWl91pvsEkpU5dUnIF1VPhm5XJvLZ4m74R3I4SDII7KN9WeQu20bn_F0TRk9uRR8cTx0uKCCSyp0Wul/s1600/ScreenShot015.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBSaOgoOGAKo1uvfbmRK-Kh_aIBp0EegNPKZHUpO8BX9PTWh_CcuZEC9If0KGgbwWl91pvsEkpU5dUnIF1VPhm5XJvLZ4m74R3I4SDII7KN9WeQu20bn_F0TRk9uRR8cTx0uKCCSyp0Wul/s1600/ScreenShot015.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Life:) MNO uses its sweet characters. This one calls "Watch mobile TV"!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So, as you can see, there are many use cases and meny different way to communicate with users in this business. You don't have to choose only one, It is better to combine them.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div><hr>
<div class="separator" style="clear: both; text-align: left;">
Use cases and offers: How do mobile operators' front-pages look like?, 2015</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<a href="http://webdesign-review.blogspot.com/p/karamba.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDoeWyMepoHq-ZoJDPw1MaKAoIOLvmAoASIGcb_YDC-E5Pudbgj5MpdEKKeK3Z0tQ4Os4PiMLuJEiIR4FuVoFicZuGKRIxqgFuKFzp4mHvrpIIyV6WVWNSKquMjrEDXkWeheasFtJJ-vNc/s640/ad1.png" /></a>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-13781253344652549032015-04-20T10:00:00.000+03:002015-04-20T10:00:13.208+03:00Sitetips: If you have service business - make your web site good-natured<div class="separator" style="clear: both; text-align: center;">
</div>
From this Monday I'll start a new column in this blog - sitetips. I am going to show you not only mistakes but brilliant decisions also. Today we are talking about nice and small web site from Japan: http://www.kissingkourami.jp<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisS8RRT2QnvCwFedU6I_SxdY6MF3ryDnqbKBtTa5ip3DRjimySoAQpA1JRK_LZv-Zyo5s3FfD-UiIFLjrJsRSPiUqIUaSAyBUyndIX3gCnDAOpcQIPvvqci6pM8MmnW6GNVGxVlXhOAX2i/s1600/ScreenShot002.bmp" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisS8RRT2QnvCwFedU6I_SxdY6MF3ryDnqbKBtTa5ip3DRjimySoAQpA1JRK_LZv-Zyo5s3FfD-UiIFLjrJsRSPiUqIUaSAyBUyndIX3gCnDAOpcQIPvvqci6pM8MmnW6GNVGxVlXhOAX2i/s1600/ScreenShot002.bmp" height="418" width="640" /></a></div>
<br />
I do like bright, simply and good-natured web-design. Japanese are great masters of it.<br />
<br />
<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTRJu0VbB3tc2mqVyySpgUuZUGJEtG08RlR2DX1r9KRYM4ie61YmIOAHBZ4YZ0kIKm_pu0tVpl3XD4ImM_WZRzQqACTqfWdaqjairQYUdzgmJY1jCS-pYISrS-9vd5uJepVEemY9ah-LdK/s1600/ScreenShot004.bmp" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTRJu0VbB3tc2mqVyySpgUuZUGJEtG08RlR2DX1r9KRYM4ie61YmIOAHBZ4YZ0kIKm_pu0tVpl3XD4ImM_WZRzQqACTqfWdaqjairQYUdzgmJY1jCS-pYISrS-9vd5uJepVEemY9ah-LdK/s1600/ScreenShot004.bmp" height="430" width="640" /></a></div>
<br />
If your business is about service - it is very cool to make the first communication good-natured. <br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibP6Sh3Bq5_rKesOkbJgUpOUYFW2zJxZOsrJ8luvgWnBXiZ7VbAporhlN8BeX5EMGLAnUOW-0dMaCG88Yx1-UKkzw8m6gMznSYSD6Zls503qG4yeBWpwp7R_Sldr4opRh45XJnzx-quhB6/s1600/ScreenShot005.bmp" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibP6Sh3Bq5_rKesOkbJgUpOUYFW2zJxZOsrJ8luvgWnBXiZ7VbAporhlN8BeX5EMGLAnUOW-0dMaCG88Yx1-UKkzw8m6gMznSYSD6Zls503qG4yeBWpwp7R_Sldr4opRh45XJnzx-quhB6/s1600/ScreenShot005.bmp" height="428" width="640" /></a></div>
<br />
Just make the site simple and clear, without any garbidge like ads or blinking banners.<br />
<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2egzjPAHLB46Ka8N97J3O0hckr27tCNnIC-2CnFbW4SMNbiz4DRWiR_av_QJRfM1a6RMvWl5zmrIh9otGnDENCz-dZujK7juUTjohyphenhyphenRrwcG-2qQX0TlcXdBKlvgnEWe1Kd5zPW02h1bR2/s1600/ScreenShot006.bmp" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2egzjPAHLB46Ka8N97J3O0hckr27tCNnIC-2CnFbW4SMNbiz4DRWiR_av_QJRfM1a6RMvWl5zmrIh9otGnDENCz-dZujK7juUTjohyphenhyphenRrwcG-2qQX0TlcXdBKlvgnEWe1Kd5zPW02h1bR2/s1600/ScreenShot006.bmp" height="376" width="640" /></a><br />
And give them good feeling from the begining. Drawings can help you with it.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg97F0Meh9-WvkyljjWRz_dsz4Tc_ueSjEWRLVeXOGU3_P3NZEjFKEXQpSnWDEQ4Wg-O6zFMwAE1y3gWcVg2eT0cTqoffAXk_7NX5403zAx5nMxmiMS9BBZkwaFhmfUeffnF-jdLTyHUcOJ/s1600/ScreenShot001.bmp" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg97F0Meh9-WvkyljjWRz_dsz4Tc_ueSjEWRLVeXOGU3_P3NZEjFKEXQpSnWDEQ4Wg-O6zFMwAE1y3gWcVg2eT0cTqoffAXk_7NX5403zAx5nMxmiMS9BBZkwaFhmfUeffnF-jdLTyHUcOJ/s1600/ScreenShot001.bmp" height="416" width="640" /></a></div>
<br />
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-61666706786435756682015-04-14T00:20:00.003+03:002015-04-14T00:20:53.964+03:00Usability level without any text understanding<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDVfhdyvmOZxpoCbV7WWntWknJBUUvFXEnhRJo206c6U1YvawTQ0H15CgB46QRKC6R_rRKYfpy50uyYE-6PJrZXvtutLwsn6Q0l1YNlBfMU1U6VNA5AWsHwyj0cr4_pfodhpaY-ASVWCD/s1600/Screen+Shot+04-13-15+at+11.53+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDVfhdyvmOZxpoCbV7WWntWknJBUUvFXEnhRJo206c6U1YvawTQ0H15CgB46QRKC6R_rRKYfpy50uyYE-6PJrZXvtutLwsn6Q0l1YNlBfMU1U6VNA5AWsHwyj0cr4_pfodhpaY-ASVWCD/s1600/Screen+Shot+04-13-15+at+11.53+PM.PNG" height="356" width="640" /></a></div>
<br />
I want to check some local web-site to show you usability level without any text understanding. This time we'll check Ukrainian book-store http://www.bambook.com
<br />
<br />
<a name='more'></a><br /><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSZaIZj_JUNv14BpfoHzL9A4oaL0gZlgax9SHgrQlOtUEW2m0zppraSSTGgR-BbO55qrVIBQ6YuLuTnALhUCgGl7nipw0-UduM4w_sc0btKq0QqFp5YE4xgfyIltE_5vyvcQmi1KBkdu_k/s1600/Screen+Shot+04-12-15+at+01.52+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSZaIZj_JUNv14BpfoHzL9A4oaL0gZlgax9SHgrQlOtUEW2m0zppraSSTGgR-BbO55qrVIBQ6YuLuTnALhUCgGl7nipw0-UduM4w_sc0btKq0QqFp5YE4xgfyIltE_5vyvcQmi1KBkdu_k/s1600/Screen+Shot+04-12-15+at+01.52+PM.PNG" height="279" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
The first page is a disaster. Users can’t understand that they are on the online book-shop. The logo is not related to books and looks like it is made by some pupil. Contact information is in mess in right top. Big green line in the middle of the screen is very hard and useless. Books "cemetery" in the bottom has no prices and section names on the book covers. Right and left columns are too heavy.
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv_XslF-CHh-aQdsFARBy3YQHYdwPan6V65Y3qixpX6FDEXCMf6sUccgo7M7Oh6wSrb4ejfzRdF3Puf1Tddr-L_KLOVOADwXyZ67-trBjyUU2W3VWgkGmTNHX7R5nSlbFtL6QLM2eTPhv-/s1600/Screen+Shot+04-12-15+at+01.56+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv_XslF-CHh-aQdsFARBy3YQHYdwPan6V65Y3qixpX6FDEXCMf6sUccgo7M7Oh6wSrb4ejfzRdF3Puf1Tddr-L_KLOVOADwXyZ67-trBjyUU2W3VWgkGmTNHX7R5nSlbFtL6QLM2eTPhv-/s1600/Screen+Shot+04-12-15+at+01.56+PM.PNG" height="278" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
Search result is also in big mess. There are a lot of blank spaces. Designer can use this space better. There are section names in the center of this page. The books I am looking for is deep in the bottom.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinKaIGp0xx10UHrBRm8OswAH53xNSDuq-YCAn_kCk1Wv2PJEEP-yBNIMHmS18SQFnYvlwuPA7rMyOBoUP3rfrHgCkr6QYGHme0uuK5KDm-hG00ehav2WJ4yiqLqBIiMr7IhitzZTC-agnD/s1600/Screen+Shot+04-13-15+at+11.43+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinKaIGp0xx10UHrBRm8OswAH53xNSDuq-YCAn_kCk1Wv2PJEEP-yBNIMHmS18SQFnYvlwuPA7rMyOBoUP3rfrHgCkr6QYGHme0uuK5KDm-hG00ehav2WJ4yiqLqBIiMr7IhitzZTC-agnD/s1600/Screen+Shot+04-13-15+at+11.43+PM.PNG" height="310" width="640" /></a></div>
<br />
<br />
<br />
Every book page has heavy green column that attract users’ attention. The description is under the button. It has to be after it.
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0BdukMonnDcmiEsXpQTZLafEEleR2rTO_ZDweB-8P0RWiiZgpbIgpZprZe336tEliQTa1y1S0gzki2tkJnYEaegFXKlb3ZRHcOtT_8jexc1ulOMA2T72DAofV8ghC3YS6ejtM15PGRFCK/s1600/Screen+Shot+04-13-15+at+11.48+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0BdukMonnDcmiEsXpQTZLafEEleR2rTO_ZDweB-8P0RWiiZgpbIgpZprZe336tEliQTa1y1S0gzki2tkJnYEaegFXKlb3ZRHcOtT_8jexc1ulOMA2T72DAofV8ghC3YS6ejtM15PGRFCK/s1600/Screen+Shot+04-13-15+at+11.48+PM.PNG" height="280" width="640" /></a></div>
<br />
When I try to buy the book I go to some page. I can’t see my book here. I loose the "track". I have to figure out where am I. It is enough for me, I am going to leave this website.<br />
<div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-62753261405728254962015-04-06T08:00:00.000+03:002015-04-06T08:00:02.535+03:00Indigo Bookshop usability testInternet was going to kill the paper books business. But still it helps to sell it.<br />
I try to test usability of <a href="http://www.chapters.indigo.ca/en-ca/books/">Indigo Bookshop</a> as example.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGUh0tKmJdcf6Ava4_YEVstgloqq412ftbRTmCgeaaR86o0mnLQLsjG-loL9oFZ3K-dlFoGJYxNFWCcm4rixHcviGC4KwgC4MQ8hfqCWO9hbSGho5Hp3CL4XvI9ef5_ZNZQQPrGBSpYTt/s1600/Screen+Shot+03-27-15+at+03.32+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGUh0tKmJdcf6Ava4_YEVstgloqq412ftbRTmCgeaaR86o0mnLQLsjG-loL9oFZ3K-dlFoGJYxNFWCcm4rixHcviGC4KwgC4MQ8hfqCWO9hbSGho5Hp3CL4XvI9ef5_ZNZQQPrGBSpYTt/s1600/Screen+Shot+03-27-15+at+03.32+PM.PNG" height="328" width="640" /></a></div>
<br />
<br />
<a name='more'></a><br />
<br />
The bookstore website design has to do:<br />
1.<span class="Apple-tab-span" style="white-space: pre;"> </span>Make people buy the book<br />
2.<span class="Apple-tab-span" style="white-space: pre;"> </span>Keep them from leaving the store<br />
3.<span class="Apple-tab-span" style="white-space: pre;"> </span>Give them opportunity to buy more books or donate money<br />
<br />
The first page is very important to keep random visitors.<br />
<div>
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-CYf97tUb8v6_Mflm_gyS9sFZ3JAyrXcA_gOSPwt3WzixmhMowhFLew76FcVB9vPOyMZgqsjWbnF9eixX1ICL3VlO9DMSuUX5iAx-MhkJni2jHEUYtg48h9QTxzesGLX_WIoR6SNfFQX0/s1600/Screen+Shot+03-16-15+at+04.14+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-CYf97tUb8v6_Mflm_gyS9sFZ3JAyrXcA_gOSPwt3WzixmhMowhFLew76FcVB9vPOyMZgqsjWbnF9eixX1ICL3VlO9DMSuUX5iAx-MhkJni2jHEUYtg48h9QTxzesGLX_WIoR6SNfFQX0/s1600/Screen+Shot+03-16-15+at+04.14+PM.PNG" height="554" width="640" /></a></div>
<br />
Customers can see that they come to book shop. There is a big search input to find books. I prefer to put the books navigation into the right top side. This solution gives the quick access for people who want to buy books as a present. Usually people know friends' hobbies and can easily choose a gift in definite sections such as “Art” or “History”.<br />
<div>
<br /></div>
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUSZGxtxDndDFDTHMOpqvCBTan4QTay7SYjxs_V3OoPjQCWbH7RrwJeaz66GQxqgwHTIO6bcAiP6Jq-iZR6QiSnCUahbYjCim55YQlBKtjzhtCtFqH9RC2NLnWOkZG4fghyphenhyphenHHb-US2Zmtb/s1600/Screen+Shot+03-16-15+at+04.18+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUSZGxtxDndDFDTHMOpqvCBTan4QTay7SYjxs_V3OoPjQCWbH7RrwJeaz66GQxqgwHTIO6bcAiP6Jq-iZR6QiSnCUahbYjCim55YQlBKtjzhtCtFqH9RC2NLnWOkZG4fghyphenhyphenHHb-US2Zmtb/s1600/Screen+Shot+03-16-15+at+04.18+PM.PNG" height="554" width="640" /></a></div>
<br />
When user clicks on some book he can see a big photo of the author. This is a fault. Users loose the 'track' from the previous page. They need a picture of the book they are looking for – not the author.<br />
<div>
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9cOnib-vhZFopYFSBaCLFLAD_2MvKb1C9VcoMxTI6bVGyxKa3-ZyWfcPgVsysIrqgRb_FJj7xSLamk-RmB4k2OQzaINkZWrzW4pCtgEsaEfOXn0Z5QVxwl8HXRhdW_P884SKtpcs65rtS/s1600/Screen+Shot+03-16-15+at+04.25+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9cOnib-vhZFopYFSBaCLFLAD_2MvKb1C9VcoMxTI6bVGyxKa3-ZyWfcPgVsysIrqgRb_FJj7xSLamk-RmB4k2OQzaINkZWrzW4pCtgEsaEfOXn0Z5QVxwl8HXRhdW_P884SKtpcs65rtS/s1600/Screen+Shot+03-16-15+at+04.25+PM.PNG" height="498" width="640" /></a><br />
<br />
<br />
The book’s chaotic description is underneath. The information "Details" has to be divided with font-weight or font-style. There are several prices to the right. The marketing department wants to show some smart discounts but... I don't understand what it is. Users feel angry and upset when they cannot understand clearly the information. This part has to be carefully usability tested. "Shop now" button is ok. But, what I have to do if I am not sure to buy this book? I need some references! If you give users way to escape - they will use it.<br />
<div>
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYtH4SrSKIHUaXDBxd3Lpr7OltqTksHxdPR3qUdvqu8ekWg0LCn6FK9M4E-2IQdOt5scF-izfQqxeflmSihf9RGXA0J7M__JG_vqFNlaAcEvbEBoLEWtPcfQtoj9UBAVQfuPyEaAuE0Qc/s1600/Screen+Shot+03-23-15+at+12.55+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYtH4SrSKIHUaXDBxd3Lpr7OltqTksHxdPR3qUdvqu8ekWg0LCn6FK9M4E-2IQdOt5scF-izfQqxeflmSihf9RGXA0J7M__JG_vqFNlaAcEvbEBoLEWtPcfQtoj9UBAVQfuPyEaAuE0Qc/s1600/Screen+Shot+03-23-15+at+12.55+PM.PNG" height="392" width="640" /></a></div>
<br />
This is another way to lose the customers. If they scroll to the end and find noting - they will go away.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUFDmRzWypAnP45ZvxVP_guUfYBfwie5cn-zblVJ0j7P3APWUJ2Umkm66k1jlnppzDvN8moZCeYRinQXkqfiNAfroYdvvoBVOKVrxeHE2x8lAn8A_W0Bv5Rw3F4dvfpOsYhZvWBjoop7Z3/s1600/Screen+Shot+03-23-15+at+01.01+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUFDmRzWypAnP45ZvxVP_guUfYBfwie5cn-zblVJ0j7P3APWUJ2Umkm66k1jlnppzDvN8moZCeYRinQXkqfiNAfroYdvvoBVOKVrxeHE2x8lAn8A_W0Bv5Rw3F4dvfpOsYhZvWBjoop7Z3/s1600/Screen+Shot+03-23-15+at+01.01+PM.PNG" height="392" width="640" /></a><br />
<br />
<br />
<br />
<br />
The search is made nice. Users can find the book even if they miss the letter in the name. This list people can sort with several sophisticated systems.<br />
<div>
<br /></div>
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWY0DZilCRT5fYrSVccxg0pG-aTFkVTXl71IWLCbVb7232IOWcEg-SWpj0adVwJl_QsUYPmO0y8qzROzaCK13NRhOQ7zAvgzAwD3siIpTL4OVT_gCfq4DrwXlb8Vx1kYpQvHootgBdVA9g/s1600/Screen+Shot+03-23-15+at+01.06+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWY0DZilCRT5fYrSVccxg0pG-aTFkVTXl71IWLCbVb7232IOWcEg-SWpj0adVwJl_QsUYPmO0y8qzROzaCK13NRhOQ7zAvgzAwD3siIpTL4OVT_gCfq4DrwXlb8Vx1kYpQvHootgBdVA9g/s1600/Screen+Shot+03-23-15+at+01.06+PM.PNG" height="392" width="640" /></a></div>
<br />
"Save to wish list" option became popular after its success in Amazon.com. But gift list is something new. It is amazing idea for such stuff. Many customers spend long time thinking about. And it is cool if we can control it and use it in further advertisements.<br />
<div>
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTCAcnpEz6eMEiZSG-7BES79dGqCk9dtOajxdCfJ6ivB-bQCzaNsOXBj8vdyMoFwrgg70WbWd2THlNHFYd1_a6VQIN7YhOhCKaM4zSLSqYi33EAeufDjeURxTzQAazJHG7Bs9RNNncKMF/s1600/Screen+Shot+03-23-15+at+01.07+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTCAcnpEz6eMEiZSG-7BES79dGqCk9dtOajxdCfJ6ivB-bQCzaNsOXBj8vdyMoFwrgg70WbWd2THlNHFYd1_a6VQIN7YhOhCKaM4zSLSqYi33EAeufDjeURxTzQAazJHG7Bs9RNNncKMF/s1600/Screen+Shot+03-23-15+at+01.07+PM.PNG" height="240" width="640" /></a><br />
<br />
<br />
<br />
<br />
The gifts fall down in the bottom part of the site. I like the way it goes.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0RPPa6MEPtQd1GFzkjh0v22VATrz5Na3fvh0nNckRE2kxh0KAonsDWQ3YkSHsYhRbihCmIphQaE9aMnekxqsbvdxxs5oTvMDXnplUOVQb7m1ocRJFI2ZVSgyW_S7_MDDT6yfje9LnVPWZ/s1600/Screen+Shot+03-23-15+at+01.25+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0RPPa6MEPtQd1GFzkjh0v22VATrz5Na3fvh0nNckRE2kxh0KAonsDWQ3YkSHsYhRbihCmIphQaE9aMnekxqsbvdxxs5oTvMDXnplUOVQb7m1ocRJFI2ZVSgyW_S7_MDDT6yfje9LnVPWZ/s1600/Screen+Shot+03-23-15+at+01.25+PM.PNG" height="394" width="640" /></a></div>
<br />
<br />
Here are many odd things like “code” input or something. UX designer have to check the percentage of users who need it. If it is less than 15% - he has to hide it in some way. It is cool that users can checkout with PayPal. The sign about free shipping has to be closer to the main button.<br />
Good stuff is donation window. It draws more money and customer's loyalty.<br />
<div>
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvVFCULKWh4p2FllSnAI07jmvx6DIE4FalhlsqRSJ2XCFpFZTOHaV-HLcipVPKy9pQlMcKnQUDIh61DuNbFpj1yc0vpDY2BTayotGTdxf8Eq2pN5vPAeJdTWfDrYs-DkcoSH_jeUWxVmq4/s1600/Screen+Shot+03-23-15+at+01.26+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvVFCULKWh4p2FllSnAI07jmvx6DIE4FalhlsqRSJ2XCFpFZTOHaV-HLcipVPKy9pQlMcKnQUDIh61DuNbFpj1yc0vpDY2BTayotGTdxf8Eq2pN5vPAeJdTWfDrYs-DkcoSH_jeUWxVmq4/s1600/Screen+Shot+03-23-15+at+01.26+PM.PNG" height="394" width="640" /></a></div>
<br />
Registration is not obligated. It is good for users who hate registrations. But it is very important to catch them. Book store can collect the information about user’s preferences and give them direct book advertisement inside the system. Also this is the way to keep high loyalty of users - website can give them discounts, presents. Marketing department can communicate directly with users. So, the lure (massege “You could save money”) has to be more visible. The cover is too small here. Users don't see what they are buying and it is a fault.<br />
<br />
<br />
<br />
Let’s estimate this website design.<br />
1.<span class="Apple-tab-span" style="white-space: pre;"> </span>Make people buy the book – good<br />
2.<span class="Apple-tab-span" style="white-space: pre;"> </span>Keep them from leaving the store – bad<br />
3.<span class="Apple-tab-span" style="white-space: pre;"> </span>Give them opportunity to buy more books or donate money - middle<br />
<br />
The website is made pretty well. But it still needs UX testing.Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-30889136200819080782014-09-29T10:37:00.000+03:002015-05-04T17:04:20.576+03:00EDI (electronic document interchange) system user interface and user experience design<br />
The paperless business became a popular idea in late 90th. But technologies was very low and people used to make deal with papers. Nowadays this idea is not still realized to the end. What do we have today? I am going to check a service for electronic document interchange (EDI) - docusign.co.uk.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHctL7qV0cZfjuRNJX1pJPRFs1Sm1O9bMnTN-npXwJ23WoDdzLAabnuIxaoz-lyP3UpSx-LFIQef2hTOH1x18hCEg39DB3LVaRGx9O8b83zQemCaNtkASXj-8sTRjCmurFY7XDYvvCBSaQ/s1600/Screen+Shot+09-24-14+at+01.44+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHctL7qV0cZfjuRNJX1pJPRFs1Sm1O9bMnTN-npXwJ23WoDdzLAabnuIxaoz-lyP3UpSx-LFIQef2hTOH1x18hCEg39DB3LVaRGx9O8b83zQemCaNtkASXj-8sTRjCmurFY7XDYvvCBSaQ/s1600/Screen+Shot+09-24-14+at+01.44+PM.PNG" height="346" width="640" /></a></div>
<br />
<a name='more'></a><br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK1JqAaCbHdFddHAOH9PxnJCGgFOEdmXlnvQnoT9pIOyOo1mQZZWTZmBEc3UD0Y3yYInfH8K-7rQYgpkAQbwaORZyY4N-ImNVSWpc4oJabSLnYWhaxNa-NN46XcODwvJRfAB2oTf_Dwexy/s1600/Screen+Shot+09-24-14+at+01.50+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK1JqAaCbHdFddHAOH9PxnJCGgFOEdmXlnvQnoT9pIOyOo1mQZZWTZmBEc3UD0Y3yYInfH8K-7rQYgpkAQbwaORZyY4N-ImNVSWpc4oJabSLnYWhaxNa-NN46XcODwvJRfAB2oTf_Dwexy/s1600/Screen+Shot+09-24-14+at+01.50+PM.PNG" height="346" width="640" /></a></div>
The site takes some information here at the start. I think they need it for their call center to sale the product by phone. Usually this is a bad way of communication with customers but here are many high-motivated businessmen who really want a callback. You can also choose the type of document you are going to test.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJloQr4Cksu4bL78QxdQO_C267ufwS65swBJE99Qp2JvZx4MQroPnaeDwNUNRYZhvFYs0DBqExod1bfvnBOaY_LgV_0rqIAZBqRLqs1QU4Vr-WvGfZe5Ix5XPmrHToTvLV5cqNjrNzbGvf/s1600/Screen+Shot+09-24-14+at+03.13+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJloQr4Cksu4bL78QxdQO_C267ufwS65swBJE99Qp2JvZx4MQroPnaeDwNUNRYZhvFYs0DBqExod1bfvnBOaY_LgV_0rqIAZBqRLqs1QU4Vr-WvGfZe5Ix5XPmrHToTvLV5cqNjrNzbGvf/s1600/Screen+Shot+09-24-14+at+03.13+PM.PNG" height="346" width="640" /></a></div>
Than users come directly to demo without any welcome screen. People can think that it is a real agreement they have to sign for using this service. The demo needs some extra page or window with welcome greeting.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgM3rt4CieMXHQUQHrg28TP6Qv88WHM6BJUIefY2A3OxyyrhDOgnRvxY3YwPmWI36LJLR7UV_5ivDLNm3mDgYe9vHO-W0YhQ7PkO-OO-ycyNqxJymjgGaArc3rrccpYdfEGKwJr6_O_xQS/s1600/Screen+Shot+09-24-14+at+01.58+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgM3rt4CieMXHQUQHrg28TP6Qv88WHM6BJUIefY2A3OxyyrhDOgnRvxY3YwPmWI36LJLR7UV_5ivDLNm3mDgYe9vHO-W0YhQ7PkO-OO-ycyNqxJymjgGaArc3rrccpYdfEGKwJr6_O_xQS/s1600/Screen+Shot+09-24-14+at+01.58+PM.PNG" height="346" width="640" /></a></div>
If user clicks on "Sign on paper button" – it goes to print and download window. It is complicated. I prefer put “Download” and “Print” icon on the previous window. If users try to close the window here, they come back to previous. <br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYA_mHQxqDm41Q54ny0P8XfdHZIkKdqtN36cIW4u0aEMluFvA6oUZI_npoh-MPIBRBVnaDYvSOW715aZRKArY0iYnNh9f6ut1c43LB36BYp96ihM_GNCWuStMiYwZSuX7EXRccoqv1BY0n/s1600/Screen+Shot+09-24-14+at+03.19+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYA_mHQxqDm41Q54ny0P8XfdHZIkKdqtN36cIW4u0aEMluFvA6oUZI_npoh-MPIBRBVnaDYvSOW715aZRKArY0iYnNh9f6ut1c43LB36BYp96ihM_GNCWuStMiYwZSuX7EXRccoqv1BY0n/s1600/Screen+Shot+09-24-14+at+03.19+PM.PNG" height="345" width="640" /></a></div>
Users can read the document. Here are simply navigation to the right and menu in the top.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSAR6EZ6_Ngp_52vcLRAjYgkohdf8Nky_ZL_gyXAuf81GcN6TB1ueQ4Su-U8eb4JRNLWhyphenhyphenQvkHGuy3MmBk-3tmyEG-3dvtvoQTLiuPpXbVYYMXH73yA-VGO05TzBJJzRJLyCNtXicGFQ9/s1600/Screen+Shot+09-24-14+at+03.22+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSAR6EZ6_Ngp_52vcLRAjYgkohdf8Nky_ZL_gyXAuf81GcN6TB1ueQ4Su-U8eb4JRNLWhyphenhyphenQvkHGuy3MmBk-3tmyEG-3dvtvoQTLiuPpXbVYYMXH73yA-VGO05TzBJJzRJLyCNtXicGFQ9/s1600/Screen+Shot+09-24-14+at+03.22+PM.PNG" height="346" width="640" /></a></div>
The sign part is ugly. The company name does not come from my account information and users have to retype it again. Where is the partner’s signature?<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2FJHFfvrm0iI68ix5SixrOfcv8gsyixNNNhPA272Cs4WcPYgIC_JEWnE57MkOSAvUex4GxQpyI9pE7sIRITRhawl4_5Mv-f89Q1mPBOpj3jaFPzrkl4IzjfUxhOIGyf1TKiGEoCC51d7X/s1600/Screen+Shot+09-26-14+at+04.28+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2FJHFfvrm0iI68ix5SixrOfcv8gsyixNNNhPA272Cs4WcPYgIC_JEWnE57MkOSAvUex4GxQpyI9pE7sIRITRhawl4_5Mv-f89Q1mPBOpj3jaFPzrkl4IzjfUxhOIGyf1TKiGEoCC51d7X/s1600/Screen+Shot+09-26-14+at+04.28+PM.PNG" height="346" width="640" /></a></div>
Signature process has some gaming elements. Users can choose the sign. This is cool “investments” into the service. This action makes a good anchor in the mind. <br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvOV4HhwpS7FZdn5LYqHsA1KT8JJDJ3bF8CVd_uWU6mWB96wYPDBYRBiwXwaVjX0azP-1KVGMf3o8bMvcPZXwJvrBzqXOF7yXEIPX_W8WmoeWx-l90RO0R46V0QCaKPDqvq_jlmY38OxBl/s1600/Screen+Shot+09-26-14+at+04.29+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvOV4HhwpS7FZdn5LYqHsA1KT8JJDJ3bF8CVd_uWU6mWB96wYPDBYRBiwXwaVjX0azP-1KVGMf3o8bMvcPZXwJvrBzqXOF7yXEIPX_W8WmoeWx-l90RO0R46V0QCaKPDqvq_jlmY38OxBl/s1600/Screen+Shot+09-26-14+at+04.29+PM.PNG" height="346" width="640" /></a></div>
Users can also draw their signature by the mouse.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq6vReR-7U-mKc5lfL9E_cEKholxO1I7TM9swGehcjR0zI5Haa0Kwqg9pXIHN3kUPBhyphenhyphenrVto-q6xLoO18cXBtv-XeWGDi2L_2r-N9M3Xrsx-iGwD5oltkQ2MFuvKscCqEJukZaRSnRB7XL/s1600/Screen+Shot+09-26-14+at+04.41+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq6vReR-7U-mKc5lfL9E_cEKholxO1I7TM9swGehcjR0zI5Haa0Kwqg9pXIHN3kUPBhyphenhyphenrVto-q6xLoO18cXBtv-XeWGDi2L_2r-N9M3Xrsx-iGwD5oltkQ2MFuvKscCqEJukZaRSnRB7XL/s1600/Screen+Shot+09-26-14+at+04.41+PM.PNG" height="346" width="640" /></a></div>
When user has finished filling all required fields, the system notifies him with some kind of tooltip. The “Confirm signing” button doesn’t looks like a button. Users cannot understand what they have to do without tooltips.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Q0hW9KrXo_F39GT-oG3ndBTZWffWpwr4nrguZXTjBGSaccZhDFDCNZgd46g8CCZc-KloMtWdNGW6u-bMTRdxYS5oQZRm_WGy5WWm078XBYyb2ta2jaak71aFEalRuH0Ve949HdhjU17I/s1600/Screen+Shot+09-26-14+at+04.48+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Q0hW9KrXo_F39GT-oG3ndBTZWffWpwr4nrguZXTjBGSaccZhDFDCNZgd46g8CCZc-KloMtWdNGW6u-bMTRdxYS5oQZRm_WGy5WWm078XBYyb2ta2jaak71aFEalRuH0Ve949HdhjU17I/s1600/Screen+Shot+09-26-14+at+04.48+PM.PNG" height="346" width="640" /></a></div>
On the next step the system compliments you and invites to use trial. It sends a letter to the user also. <br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixxY0ZZrkZEWnTCpf8dihkHguBi2ePoZpUotz947zv8ZDU8msUfELEBvbTzILkyYu3h8KQdiynfgJ2iyjRPAmoozEHqjZJIvOn3uhfOTx20Bcf3OkqkPsnv0o65Bsb624nM5MgBl6Y3Bda/s1600/Screen+Shot+09-26-14+at+05.33+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixxY0ZZrkZEWnTCpf8dihkHguBi2ePoZpUotz947zv8ZDU8msUfELEBvbTzILkyYu3h8KQdiynfgJ2iyjRPAmoozEHqjZJIvOn3uhfOTx20Bcf3OkqkPsnv0o65Bsb624nM5MgBl6Y3Bda/s1600/Screen+Shot+09-26-14+at+05.33+PM.PNG" height="346" width="640" /></a></div>
The full electronic document interchange system looks like this. The first page is good organized. Users have a direct access to main actions. The only problem is “Buy” button in wrong place.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqwjMrgD2G_jSOdZ7zS1juZCp0K-zT_fLUSTAdYDKnMHLoT30VdCqynYnO2SocawOrR28evHQagABjlScdEqsmPVp96sWMMMIrWMuOtOWawuxLZXd3iUfy8F5Cn8fV5Qg_N6fggcAqAiRG/s1600/Screen+Shot+09-26-14+at+05.37+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqwjMrgD2G_jSOdZ7zS1juZCp0K-zT_fLUSTAdYDKnMHLoT30VdCqynYnO2SocawOrR28evHQagABjlScdEqsmPVp96sWMMMIrWMuOtOWawuxLZXd3iUfy8F5Cn8fV5Qg_N6fggcAqAiRG/s1600/Screen+Shot+09-26-14+at+05.37+PM.PNG" height="346" width="640" /></a></div>
When user uploads the document, he can fill fields with connection information and even chooses what they have to do.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz70n2jDolyC3j1d1eOzYJETbi6VXnT1CTggh2Osuvhw_pRFCVa3pOy9rNCaCA7mPwndwk9_5BuJzusuoYIY95OtRNbEpyYVStFdzW7uoo7BcbnOuQOATP8hjc4TWvvfLEE8V-JK1nv9me/s1600/Screen+Shot+09-26-14+at+05.39+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz70n2jDolyC3j1d1eOzYJETbi6VXnT1CTggh2Osuvhw_pRFCVa3pOy9rNCaCA7mPwndwk9_5BuJzusuoYIY95OtRNbEpyYVStFdzW7uoo7BcbnOuQOATP8hjc4TWvvfLEE8V-JK1nv9me/s1600/Screen+Shot+09-26-14+at+05.39+PM.PNG" height="346" width="640" /></a></div>
Rare actions are hidden. If users need more security, they can open it like this.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoeLZSjt1rQShTpabwQDwqZtFztNcedvyVLqjb_F4FJvtt0LqjypXrzc8uNzn8nCvayCEt7s0REDU-YX_q8HEd-Vn716oNA7i6viLgFs6hMgRHVcFrnX5f1_MjoB3toy0WkxYMht1wZgLy/s1600/Screen+Shot+09-26-14+at+05.42+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoeLZSjt1rQShTpabwQDwqZtFztNcedvyVLqjb_F4FJvtt0LqjypXrzc8uNzn8nCvayCEt7s0REDU-YX_q8HEd-Vn716oNA7i6viLgFs6hMgRHVcFrnX5f1_MjoB3toy0WkxYMht1wZgLy/s1600/Screen+Shot+09-26-14+at+05.42+PM.PNG" height="346" width="640" /></a></div>
Here are many hidden windows. It is good that people cannot see what they never use.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDYeGelBR_1pWrPmYm9_r20DwPF1y0T77E8aowXhPa9mN3ZpPg7mBUrjgEx3T94HbxYdIL1T16lVPvcEU3cg84oshoQHr6_Dy4yWOh9zqWsyQ8ycHnC2CSSQdPEPDoLMYYkW6_eOLWbiO/s1600/Screen+Shot+09-26-14+at+05.43+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDYeGelBR_1pWrPmYm9_r20DwPF1y0T77E8aowXhPa9mN3ZpPg7mBUrjgEx3T94HbxYdIL1T16lVPvcEU3cg84oshoQHr6_Dy4yWOh9zqWsyQ8ycHnC2CSSQdPEPDoLMYYkW6_eOLWbiO/s1600/Screen+Shot+09-26-14+at+05.43+PM.PNG" height="346" width="640" /></a></div>
The “Next” button are put in bad place. Just try to understand that this document is connected with an inconspicuous button in the bottom.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFoUz72UMswPIR58TJ5J4HSm30B57Ny3HhT5qd03YYZ3TMSx7tGkg51wlLXCzNlsuTxuOgD_pTDhVEw0Kh_LI88DXEGnUcqwk4THOoGRDwE7f6E2YkOV91PMA-uXFHAKclocoB6fpZdg0D/s1600/Screen+Shot+09-26-14+at+05.48+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFoUz72UMswPIR58TJ5J4HSm30B57Ny3HhT5qd03YYZ3TMSx7tGkg51wlLXCzNlsuTxuOgD_pTDhVEw0Kh_LI88DXEGnUcqwk4THOoGRDwE7f6E2YkOV91PMA-uXFHAKclocoB6fpZdg0D/s1600/Screen+Shot+09-26-14+at+05.48+PM.PNG" height="346" width="640" /></a></div>
Here user can put any field in blank places of his document. The process looks like a dress-up game when you use it the first time. The icons are too tiny aside the heavy lines of PDF document. I prefer make them more remarkable.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmGnmQHCnXg2D36HT8M83QAdK9_g9mthiURqCP1A5nRLSBSYzSfwoJu7KK_TACPJ9e6gxFhUjEB-6EmTRz35XTTdjmRHpuoH2fYSh8yXN9hI6mGzcHzpBf9moN0G-i1WBbdvs1ERhXuW3i/s1600/Screen+Shot+09-26-14+at+05.51+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmGnmQHCnXg2D36HT8M83QAdK9_g9mthiURqCP1A5nRLSBSYzSfwoJu7KK_TACPJ9e6gxFhUjEB-6EmTRz35XTTdjmRHpuoH2fYSh8yXN9hI6mGzcHzpBf9moN0G-i1WBbdvs1ERhXuW3i/s1600/Screen+Shot+09-26-14+at+05.51+PM.PNG" height="346" width="640" /></a></div>
Every field you can customize in the right part. For example user can force his partner to fill some fields. I think it is better to put quick customization just below the field and leave right part for advanced.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJzh8TsDoey0wBzMXCRIpin4lkfTA0RLt6BFfmRp4g4Z5Gw_l4Hzg8BALwAJl6G-oryDJ2Q4pIj2ix6DLl4WnzN_5g6gc7T8Dq38HqnSwJZ0Ut7O2BQs6MmW5PIH99Ra3Zc6cFm7hJnuO/s1600/Screen+Shot+09-26-14+at+05.58+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJzh8TsDoey0wBzMXCRIpin4lkfTA0RLt6BFfmRp4g4Z5Gw_l4Hzg8BALwAJl6G-oryDJ2Q4pIj2ix6DLl4WnzN_5g6gc7T8Dq38HqnSwJZ0Ut7O2BQs6MmW5PIH99Ra3Zc6cFm7hJnuO/s1600/Screen+Shot+09-26-14+at+05.58+PM.PNG" height="346" width="640" /></a></div>
Users can check out all his documents in the manager. They can sort the list by the filter to the left side, make mass action with drop-down in top menu, and sign the documents. The “Sign” button drives users to the document. I think they have to give users the opportunity to sign it blind in case they highly trust the partner.<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVR2OweXPcq2XaKGq2oss-GLJ1YyPtuD1AOcHyUzjVW450IqlG-uN00qom8a0tanwEOQV6nDqGCqzb380BWDJXAiNG0EqpsF8A9oqH2Avp5eDc0b-GSxNw8Ig80MmPh8Bko_fOs3_Oh_t1/s1600/Screen+Shot+09-26-14+at+06.05+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVR2OweXPcq2XaKGq2oss-GLJ1YyPtuD1AOcHyUzjVW450IqlG-uN00qom8a0tanwEOQV6nDqGCqzb380BWDJXAiNG0EqpsF8A9oqH2Avp5eDc0b-GSxNw8Ig80MmPh8Bko_fOs3_Oh_t1/s1600/Screen+Shot+09-26-14+at+06.05+PM.PNG" height="346" width="640" /></a></div>
The settings are too complicated. Each item has only a couple of customizations. The rest of the space is empty. I think they can group them better – Personal information, Contacts and System settings.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSb3RQ0XcC8rywLhT2JbltsW4Sa3KeV9z70nn0FcIgXAzcZc_SIXvkmqaKFqCxTEJytsMpPaw1hra-9z-G6yay3HSfzxY4BdSW3pRo-_M1uVMKU8rywT0eutRcE44tfotnnJXR7rGxcMHq/s1600/Screen+Shot+09-26-14+at+06.09+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSb3RQ0XcC8rywLhT2JbltsW4Sa3KeV9z70nn0FcIgXAzcZc_SIXvkmqaKFqCxTEJytsMpPaw1hra-9z-G6yay3HSfzxY4BdSW3pRo-_M1uVMKU8rywT0eutRcE44tfotnnJXR7rGxcMHq/s1600/Screen+Shot+09-26-14+at+06.09+PM.PNG" height="346" width="640" /></a></div>
You can also customize a design of the system and emails.<br />
<br />
I think developers made big afford to make this site useful and comfortable. Some parts are very user-friendly but all electronic document interchange system is not very clear and simply as users expect for. I hope it will be better some time and we will never use paper in our business at all.<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div><hr>
<div class="separator" style="clear: both; text-align: left;">
EDI (electronic document interchange) system user interface and user experience design, 2014</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<a href="http://webdesign-review.blogspot.com/p/karamba.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDoeWyMepoHq-ZoJDPw1MaKAoIOLvmAoASIGcb_YDC-E5Pudbgj5MpdEKKeK3Z0tQ4Os4PiMLuJEiIR4FuVoFicZuGKRIxqgFuKFzp4mHvrpIIyV6WVWNSKquMjrEDXkWeheasFtJJ-vNc/s640/ad1.png" /></a>
<br />
<div class="separator" style="clear: both; text-align: left;">Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-53276465541015252382014-09-15T10:03:00.000+03:002015-05-04T17:04:57.701+03:00Drive the e-disc!<br />
<br />
Do you know what will happen if you upload 30 Mb file as attachment into your email? The service will upload it in the file storage. Today we will check their interfaces.<br />
<div>
<br /></div>
<div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQB52wmYILUfArpXJ4AsaRxijgj-LEcMHsr5CGmLPjCj9mI2XxZ07up1KCcx8RXlnitzw29OuNJK9TgnH9oFqhi1CGb1mhJlJwkullOSKVagW7I9G9-1fi3Vp26D95-UOqBdwhyphenhyphenj3ag1Mo/s1600/Screen+Shot+09-09-14+at+03.25+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQB52wmYILUfArpXJ4AsaRxijgj-LEcMHsr5CGmLPjCj9mI2XxZ07up1KCcx8RXlnitzw29OuNJK9TgnH9oFqhi1CGb1mhJlJwkullOSKVagW7I9G9-1fi3Vp26D95-UOqBdwhyphenhyphenj3ag1Mo/s1600/Screen+Shot+09-09-14+at+03.25+PM.PNG" height="326" width="640" /></a></div>
<br />
Let us test the Gmail and its storage – Google Drive.</div>
<div>
<br /></div>
<div>
<br />
<a name='more'></a><br /></div>
<div>
<br /></div>
<div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisiGciR7xcreb0Afjyj6w-ZbjwTTzXiMyteamc9gJC3ohmq9WHjSSREAQSbVv5F8MmoRYKxApSKRYO1qr3eDxF-TaJtbwTkTR46lBtAIbiTFBseiiwXAIAtppojf5nf9aAlda8AMrpHi1T/s1600/Screen+Shot+09-09-14+at+03.30+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisiGciR7xcreb0Afjyj6w-ZbjwTTzXiMyteamc9gJC3ohmq9WHjSSREAQSbVv5F8MmoRYKxApSKRYO1qr3eDxF-TaJtbwTkTR46lBtAIbiTFBseiiwXAIAtppojf5nf9aAlda8AMrpHi1T/s1600/Screen+Shot+09-09-14+at+03.30+PM.PNG" height="326" width="640" /></a></div>
<br />
First – you cannot understand what this service is for. The logo and the name tells us nothing to figure out the service. When new users see the Google Drive icon – they would not understand what is it. Anyway users don’t know exactly how many Mbs they can attach. So, users just don't need this button here.<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPPTHTOjffs7pM-iV47MVsfSW_t3cw2Zea4ozw9SYgUltD1E8bKSw01FVRWjb0w2aYXgzCXe7Kt8lgpr4KlxsxVUKbnQ1WoZdfUCXgNdl1S-Yn9PHxhAGVkg5kP8WtjpyVi0o4h9vn6gis/s1600/Screen+Shot+09-09-14+at+03.34+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPPTHTOjffs7pM-iV47MVsfSW_t3cw2Zea4ozw9SYgUltD1E8bKSw01FVRWjb0w2aYXgzCXe7Kt8lgpr4KlxsxVUKbnQ1WoZdfUCXgNdl1S-Yn9PHxhAGVkg5kP8WtjpyVi0o4h9vn6gis/s1600/Screen+Shot+09-09-14+at+03.34+PM.PNG" height="326" width="640" /></a></div>
<br />
Therefore, they usually click paper clip icon. The system analyzes how heavy the file is and gives you unnecessary massage that you are out of 25 Mb email limit. “But don’t worry? You can sent it using Google Drive.” </div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQtZjd0Y3fAA3QsN6qwU6YgAEkVqC195UJ_3pQQvL9yWEEZTPEJzui2fVOicKM12C2E7fp3RvZHc9z0jD6eeR-yFKGdq8z3px8bdVa2pgToPDq5DtOHQkAzxT5wvBdEUd9EncJGM_ykVMx/s1600/Screen+Shot+09-09-14+at+03.43+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQtZjd0Y3fAA3QsN6qwU6YgAEkVqC195UJ_3pQQvL9yWEEZTPEJzui2fVOicKM12C2E7fp3RvZHc9z0jD6eeR-yFKGdq8z3px8bdVa2pgToPDq5DtOHQkAzxT5wvBdEUd9EncJGM_ykVMx/s1600/Screen+Shot+09-09-14+at+03.43+PM.PNG" height="398" width="640" /></a></div>
</div>
<div>
I can understand it from the marketing point of view. If you divide the service into the parts – you can sell more. MacDonalds uses it a lot – they sell you fried potato and always offer you to buy sauce in addition to main menu. I don’t think it have to be like this with free online services. Users do not have to know what e-mail limit is. Service have to upload it to another service in silence. <br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIvEpJRSQRDLOpwf7ekpnXaZtLhPvTJtq4OGjsdbYvWYcYt6Be0ru5_YEo-iQYK8U0UuzdT9uEDPDkUJcC37vk_tW55E3Wtv_zvEuLnsP1jqknX0p5jHI2SpFn4rfb4UJXRhr3IbvXSPZv/s1600/Screen+Shot+09-09-14+at+03.49+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIvEpJRSQRDLOpwf7ekpnXaZtLhPvTJtq4OGjsdbYvWYcYt6Be0ru5_YEo-iQYK8U0UuzdT9uEDPDkUJcC37vk_tW55E3Wtv_zvEuLnsP1jqknX0p5jHI2SpFn4rfb4UJXRhr3IbvXSPZv/s1600/Screen+Shot+09-09-14+at+03.49+PM.PNG" height="414" width="640" /></a></div>
<br />
Google opens the window “Insert files using Drive”. Users have to upload files to this window again. This is third unnecessary step. The next one is “Upload” button. Service force users to do four steps except one.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwqQmaxTGy-HEf0D4p-emvpDzTJKFhwbWVd_ro9z_W2JOREAtkHrdnaAriV0QXuSfRYMrXHJwexUrFuCl-LoxZ9Yoa40ppFmKGcrgOu4Zw3z0B_TixgxGJrSbMG46D_837H0INhP5H9GjA/s1600/Screen+Shot+09-09-14+at+03.54+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwqQmaxTGy-HEf0D4p-emvpDzTJKFhwbWVd_ro9z_W2JOREAtkHrdnaAriV0QXuSfRYMrXHJwexUrFuCl-LoxZ9Yoa40ppFmKGcrgOu4Zw3z0B_TixgxGJrSbMG46D_837H0INhP5H9GjA/s1600/Screen+Shot+09-09-14+at+03.54+PM.PNG" height="370" width="640" /></a></div>
<br />
The link to file in the email has no “Download” button. Many users cannot figure out where they have to press if it looks not like the link or button.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikPv45xmMsvlmiSzfJsQI0ZZXDPR5nbb48A8IExkNUAuabyT9Wj64zVh2p5MJZZyjzSDnrcCLpuhCMRdnC2mywsHw6SH1futdog9KNmmcISERvnJSKoZvhQ3_CL9qgL_XY8M0eTXLviDjy/s1600/Screen+Shot+09-09-14+at+03.58+PM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikPv45xmMsvlmiSzfJsQI0ZZXDPR5nbb48A8IExkNUAuabyT9Wj64zVh2p5MJZZyjzSDnrcCLpuhCMRdnC2mywsHw6SH1futdog9KNmmcISERvnJSKoZvhQ3_CL9qgL_XY8M0eTXLviDjy/s1600/Screen+Shot+09-09-14+at+03.58+PM.PNG" height="302" width="640" /></a></div>
<br />
If you don’t have Google account – you cannot download it. So, Google cannot share files with other email networks.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha0FXN6LOZtovzrKPy79HKHFzdIgau6rG7_gA6GzPdRJni9_Vlifcww9SPv3Hy1On46AD7qIkgRs-5rscfzBR072zq7XTG9xYHRxbOAv3sWv2h6E0kUkgh589dLocTTP1Ffls1B1eVohDt/s1600/Screen+Shot+09-09-14+at+04.00+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha0FXN6LOZtovzrKPy79HKHFzdIgau6rG7_gA6GzPdRJni9_Vlifcww9SPv3Hy1On46AD7qIkgRs-5rscfzBR072zq7XTG9xYHRxbOAv3sWv2h6E0kUkgh589dLocTTP1Ffls1B1eVohDt/s1600/Screen+Shot+09-09-14+at+04.00+PM.PNG" height="326" width="640" /></a></div>
<br />
But the most fantastic thing happens when you press on the attachment. Instead of download – it opens the attachment in new window. Just try to understand what is it and how to download the files.</div>
<br />
<br />
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-US"><br /></span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwK3yAIRJrswVbcIekbFQN-wkbFqPucvMF6o_dvcBM-KYZEC9H91rgB73XuZPzuK6SMBDUPEtKBG_mdoBzDCKFh-BEQLlz5ODsviM7WnJ6lMwaLFG89xrKemBwStOdYjXqfVJmEnyhLrx5/s1600/Screen+Shot+09-12-14+at+02.36+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwK3yAIRJrswVbcIekbFQN-wkbFqPucvMF6o_dvcBM-KYZEC9H91rgB73XuZPzuK6SMBDUPEtKBG_mdoBzDCKFh-BEQLlz5ODsviM7WnJ6lMwaLFG89xrKemBwStOdYjXqfVJmEnyhLrx5/s1600/Screen+Shot+09-12-14+at+02.36+PM.PNG" height="326" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal">
<span lang="EN-US"> </span>This is another service of Google – Doc. Let’s look at this page in details. What does user usually do when he receive mail attachment? He views or downloads it. The service has to show files and gives you understandable buttons under the file list – “download” and “view” in case if we can open it in browser. The download button is very small icon and it stands over the files among another undefined icons. You cannot exit from here because here is no exit button. Users are trapped here. One "amazing" thing - the top left link with the name of the file is for … renaming the file.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCZ9DKZAGOgc5tigbFUGfqFLxb7ryV9QFsgWCC9SrPbAuZM2EQDxCCl2vPav2y67x5NP7nXzBlfudSwMXAQwSCxMyAxx15xtGkkNvTrAqAELNM6xRmMOEQaz2BLISZGMh-xhSbhvXeiTED/s1600/Screen+Shot+09-12-14+at+02.50+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCZ9DKZAGOgc5tigbFUGfqFLxb7ryV9QFsgWCC9SrPbAuZM2EQDxCCl2vPav2y67x5NP7nXzBlfudSwMXAQwSCxMyAxx15xtGkkNvTrAqAELNM6xRmMOEQaz2BLISZGMh-xhSbhvXeiTED/s1600/Screen+Shot+09-12-14+at+02.50+PM.PNG" height="348" width="640" /></a></div>
</div>
<div class="MsoNormal">
Open button makes users feel stupid. Why do they have to choose application for this case? Service has to choose it automatically.<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZRvnme9XVH_a5-NSqr0tEbHraCn4ZTW8YdAdKBJ6QNZnPkYLDDNPH-b-gcjlGSb6Fc9JvoPutjv8N4Sb1nIV6vLGGubPZMBzNayszQl8qmxHUEqAdeXH9Xer8RAIzFun_chD08TzOH31/s1600/Screen+Shot+09-12-14+at+03.44+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZRvnme9XVH_a5-NSqr0tEbHraCn4ZTW8YdAdKBJ6QNZnPkYLDDNPH-b-gcjlGSb6Fc9JvoPutjv8N4Sb1nIV6vLGGubPZMBzNayszQl8qmxHUEqAdeXH9Xer8RAIzFun_chD08TzOH31/s1600/Screen+Shot+09-12-14+at+03.44+PM.PNG" height="348" width="640" /></a></div>
I am going to check another e-mail storage services (<u>freemail.ukr.net</u> and <u>mail.yandex.ru</u>) to feel the difference. Here are two buttons “file” and “file from eDisc”. Users don’t figure out what are they for. Why does it use “file” except of “upload”? Why does it give you hesitation where do I have to click? <br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikOuxeGta97C82Tp9_4NmrbXWvlCJ9buIaBIm6liplu2qSeFAvkqkkk_nuFcHhA-_l51sg4LWR2PyMqMdRs3i1mNWe3wifM5-CtOcOhYUv5h_zP23NAh80qw1BOe6DCR-2J82aM8vuHy1I/s1600/Screen+Shot+09-12-14+at+03.37+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikOuxeGta97C82Tp9_4NmrbXWvlCJ9buIaBIm6liplu2qSeFAvkqkkk_nuFcHhA-_l51sg4LWR2PyMqMdRs3i1mNWe3wifM5-CtOcOhYUv5h_zP23NAh80qw1BOe6DCR-2J82aM8vuHy1I/s1600/Screen+Shot+09-12-14+at+03.37+PM.PNG" height="348" width="640" /></a></div>
Ukr.net shows to users message that weight of the files is bigger than 18Mb but they have an opportunity to upload it with service eDisc. Users do not care about Mb, size, and services. His only wish is sending a file to recipient. It is cool that here is “use always” checkbox and users will never see this window again. <br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_XQCAd7gVoQZlYKATyDLjMdoQcE6586ATSxE08urssRFqQH6-Us2krCMxUZ6afF60ZA_hQJS1ncXpjtSIWM1FWvpaxvVWQF1CJa77QL7PC0rJvWGUm8iKyrPrlmSu4Jz9RF3qydHiL2eO/s1600/Screen+Shot+09-12-14+at+03.48+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_XQCAd7gVoQZlYKATyDLjMdoQcE6586ATSxE08urssRFqQH6-Us2krCMxUZ6afF60ZA_hQJS1ncXpjtSIWM1FWvpaxvVWQF1CJa77QL7PC0rJvWGUm8iKyrPrlmSu4Jz9RF3qydHiL2eO/s1600/Screen+Shot+09-12-14+at+03.48+PM.PNG" height="348" width="640" /></a></div>
<br />
The link inside the letter has Mbs information that gives you a tip. This is good way to highlight the link.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHY40JYJdHKAPIckclV-V3iZceZOIiIjey51svNrwuXNoDH8rIAEIHZ5wUF4fTmANJXyB4KPWsRqEeDsEwJk_H9Z6iTrwHgAGDfMKwWmodaUjWHvJN7sVoZy9UHYmIcCy5BZ5e9thnarnh/s1600/Screen+Shot+09-12-14+at+03.51+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHY40JYJdHKAPIckclV-V3iZceZOIiIjey51svNrwuXNoDH8rIAEIHZ5wUF4fTmANJXyB4KPWsRqEeDsEwJk_H9Z6iTrwHgAGDfMKwWmodaUjWHvJN7sVoZy9UHYmIcCy5BZ5e9thnarnh/s1600/Screen+Shot+09-12-14+at+03.51+PM.PNG" height="348" width="640" /></a></div>
Users cannot download file without account. At least – they can see the file name and type here.<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs4CANvg_2IkQBW6MZ6jDGw9XJx6Kh4vbVxEl-vVblo2uhbbiKE5HToMCUOwWFzYZ-pJoDMTBOgN1UbAv5CVV8F9TTpJidW0aZa8JpuKrP0uLAq-96n0exDHcKm44XQeNNYCiyEE7i2nEk/s1600/Screen+Shot+09-12-14+at+03.02+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs4CANvg_2IkQBW6MZ6jDGw9XJx6Kh4vbVxEl-vVblo2uhbbiKE5HToMCUOwWFzYZ-pJoDMTBOgN1UbAv5CVV8F9TTpJidW0aZa8JpuKrP0uLAq-96n0exDHcKm44XQeNNYCiyEE7i2nEk/s1600/Screen+Shot+09-12-14+at+03.02+PM.PNG" height="348" width="640" /></a></div>
It is Mail Yandex. Here is clear massage to users – Attach files and the logo of “Yandex Disc” nearby. So users can understand that UFO and the "attach" button are connected.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielC6iEWqaWKg3LRABbBLLirvdBDMAmjHPLNG_eTzmUUucqt7gBmRrF48IkwSJ_URd-P274TUZZCqCBR_AOUaauFrvhppohEiamo_C1fuj3QNQqBN97Qa4mfVOkN0Qr2StoTKGCmNdV6IQ/s1600/Screen+Shot+09-12-14+at+03.07+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielC6iEWqaWKg3LRABbBLLirvdBDMAmjHPLNG_eTzmUUucqt7gBmRrF48IkwSJ_URd-P274TUZZCqCBR_AOUaauFrvhppohEiamo_C1fuj3QNQqBN97Qa4mfVOkN0Qr2StoTKGCmNdV6IQ/s1600/Screen+Shot+09-12-14+at+03.07+PM.PNG" height="348" width="640" /></a></div>
The uploading process is simple. Users do not understand that other service is processing. Only tiny gray link “The following files have been uploaded to <a href="https://disk.yandex.ua/">Yandex.Disk</a>:” gives us opportunity to go out of the mail.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ZAq6SLaHoiTA-Q0zRMXOpYLF10rTnBYaAPPUdFCeDFHNfslYmCeMd9naeiNA9p6P4CU_sBRXoWKbxS_EKeaZjlyDBSaPoqHeeG8utadlHmoS_vYkhTmVPupE_3MeJRao6GsNZLyYn88b/s1600/Screen+Shot+09-12-14+at+03.27+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ZAq6SLaHoiTA-Q0zRMXOpYLF10rTnBYaAPPUdFCeDFHNfslYmCeMd9naeiNA9p6P4CU_sBRXoWKbxS_EKeaZjlyDBSaPoqHeeG8utadlHmoS_vYkhTmVPupE_3MeJRao6GsNZLyYn88b/s1600/Screen+Shot+09-12-14+at+03.27+PM.PNG" height="348" width="640" /></a></div>
<br />
The link inside the letter is also not very clear but it is blue underlined link that people use to click on.<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhElO7P_zcWnwWo8ceEPq_IHVkXXV62KD7e8NHUvaj2VNyzFSkr0Dz89T9VyBDSNo5VYrJuaE2rM384EoL5upDKu8Bph840CRNuYmGvF1_LqDwilZjFicfib0nnrcBKvfawUMsqoSqWpkyr/s1600/Screen+Shot+09-12-14+at+03.34+PM.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhElO7P_zcWnwWo8ceEPq_IHVkXXV62KD7e8NHUvaj2VNyzFSkr0Dz89T9VyBDSNo5VYrJuaE2rM384EoL5upDKu8Bph840CRNuYmGvF1_LqDwilZjFicfib0nnrcBKvfawUMsqoSqWpkyr/s1600/Screen+Shot+09-12-14+at+03.34+PM.PNG" height="348" width="640" /></a></div>
On the next page we can see the file even if users have no account in the service. You can see big and clear buttons “View” and “Download”. It is right and simply way to send big files. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div><hr>
<div class="separator" style="clear: both; text-align: left;">
Drive the e-disc!, 2014</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<a href="http://webdesign-review.blogspot.com/p/karamba.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDoeWyMepoHq-ZoJDPw1MaKAoIOLvmAoASIGcb_YDC-E5Pudbgj5MpdEKKeK3Z0tQ4Os4PiMLuJEiIR4FuVoFicZuGKRIxqgFuKFzp4mHvrpIIyV6WVWNSKquMjrEDXkWeheasFtJJ-vNc/s640/ad1.png" /></a>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-5821056801423103552014-07-14T12:00:00.000+03:002015-05-04T17:05:30.817+03:00How to make good promo site<br />
If you have developed nice online system you have to have nice promo site also. Users need the first page to enter the system. It is a web page where you have to give some kind of good impression for your existed and future customers. You don’t need something extraordinary with plenty of information. It has to be simple. Web designers usually put there big photos of happy people, motto and registration/login form. Social networks are good systems to explore this kind of promo pages. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnMpL16Vu8SWSg1TDlvjlIl1Ff5ciBdxk7cBpBmFuqXnt0MoROHukt2J5r1vAaGbMNODYqAQLCIr_c5Hn8GqgnsLa4KG5K9mYVdvCptkf547KuMXcAJczbijsaHBQymHfv0VKrKIh68XIN/s1600/social_promo006.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnMpL16Vu8SWSg1TDlvjlIl1Ff5ciBdxk7cBpBmFuqXnt0MoROHukt2J5r1vAaGbMNODYqAQLCIr_c5Hn8GqgnsLa4KG5K9mYVdvCptkf547KuMXcAJczbijsaHBQymHfv0VKrKIh68XIN/s1600/social_promo006.jpg" height="312" width="640" /></a></div>
<br />
<br />
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7iuceCWKHnJIUsmAW4dti-6wVIzLdDMrPXIhmeAIVN2IWVikDNzT0ByTA7L-kY_MyP1d60N1UkPCJVapyMqe_wGHAI8jPtmcS9o3R_32NTct_zpnnIPOZlDwhioUijfMVxaFpB9wR42Ct/s1600/gmail_design009.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7iuceCWKHnJIUsmAW4dti-6wVIzLdDMrPXIhmeAIVN2IWVikDNzT0ByTA7L-kY_MyP1d60N1UkPCJVapyMqe_wGHAI8jPtmcS9o3R_32NTct_zpnnIPOZlDwhioUijfMVxaFpB9wR42Ct/s1600/gmail_design009.jpg" height="312" width="640" /></a></div>
<br />
Let’s have a look at the biggest social network – facebook. They have 1.28 billion monthly active users and no competitors behind so they don’t care about what users and future customers think about their first page. Here is ugly advertisement of their mobile application. Does it have some sense? Every mobile device already has this application so this is stupid to promote it here. Another question is “why do I see this ads if I have entered facebook from a laptop?” It is very easy to detect what device and browser I came from. Еhe promo-site has to be flexible. If I came from laptop browser – I don’t need now this application. If I came from mobile browser – maybe I have not got it so I need this advertisement. <br />
The quality of mobile icon here is very low. It is like a product of some kid who created the icon after several Corel Draw online lessons. The facebook lose its fame when they use graphic like this. <br />
The promo site uses only a part of the browser’s space. The advertisement fills half of the screen and another half under it is empty. But the language selection is on the second screen deep in the bottom of the page. Users used to see it on the top.<br />
Here is a registration form to the right. I have no statistic but I am pretty sure that 98% of users fill login form and they don’t need this big registration one. It is wrong decision to make promo site for 2% of future customers. The registration form has to be hidden under some button or link “Register now”.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDnNkSzHoZIrl1yvx6ZCk369ICdK6ms-8AeFV4yl4QJ7XWRZmv_zGqeRDQJGadqbabZ-YW7-EmSEzHp45qQvu74CStzfj7fXlu_6CuSeOwcdB4PJNumiiISSdg13TL2NviyWMwhn3bN8sl/s1600/social_promo008.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDnNkSzHoZIrl1yvx6ZCk369ICdK6ms-8AeFV4yl4QJ7XWRZmv_zGqeRDQJGadqbabZ-YW7-EmSEzHp45qQvu74CStzfj7fXlu_6CuSeOwcdB4PJNumiiISSdg13TL2NviyWMwhn3bN8sl/s1600/social_promo008.jpg" height="312" width="640" /></a></div>
<br />
<br />
Russian analogue of facebook copied its problems. It has mobile application advertisement in the center. The login and registration form are combined together. It is clever because existed users and future customers fill the same inputs and just choose what button you click. This form has unusual position so developers doubled “sign up” link in right top. The logo have no name because “Vkontakte” means nothing for English speakers. So the cut it to easy-to-remember abbreviation - VK.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlRimTsAn511hIi3naMu23UWGyti5wxaOlW397MbKHvYmh_mDnkscm7AsKoZyDlronBoLo9UdyK9dq-YJiZ9HV4z687anZKgo5We9kYxNwM3s_dSEVz1b0udqm94HXx6dQtEggSjKNVSq/s1600/social_promo001.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlRimTsAn511hIi3naMu23UWGyti5wxaOlW397MbKHvYmh_mDnkscm7AsKoZyDlronBoLo9UdyK9dq-YJiZ9HV4z687anZKgo5We9kYxNwM3s_dSEVz1b0udqm94HXx6dQtEggSjKNVSq/s1600/social_promo001.jpg" height="312" width="640" /></a></div>
<br />
Google Plus has no promo site at all. You just come directly to login form. Maybe it is one of the reason why do they are so unpopular. The language selection is in the right bottom. Users can hardly find it if they need.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRJmwodi1r-016Wqngv9vdVG1CLcoSfRPs92y4uSW-1cjfaU_hE6nf3OikIsHEeUTuWBuSpiEO-YQ974AZh2J2Fs7Q6ZQX04fgIn0eNhmge_EhJEDpytKL9_06Hx95Mfp3gLJbWMIcibmB/s1600/social_promo003.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRJmwodi1r-016Wqngv9vdVG1CLcoSfRPs92y4uSW-1cjfaU_hE6nf3OikIsHEeUTuWBuSpiEO-YQ974AZh2J2Fs7Q6ZQX04fgIn0eNhmge_EhJEDpytKL9_06Hx95Mfp3gLJbWMIcibmB/s1600/social_promo003.jpg" height="312" width="640" /></a></div>
Twitter has right elements order on its promo site. Big welcome and explanation is on the left part of the central column. The login/registration form is on the right. The language selection is on the right top. The twitter’s logo icon is too small and lonely on the top right. This is bad way of branding. Search form is too light and unaligned. But the worst part of this site is a background. What is this? After some discovering you can recognize a festival stage photo there. The picture looks like trash and it give bad first impression.<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5c_O3oAXKsHOhYmngqdJcq6oEhbv2vLhuf2b388jnky825ESoAtwAvnZUVCvY9G-erf5LoC2_E5IpsKSRnMkdQDiM-cVPGmxcpSxd95Z4oOR-2qvJjA8AHZXpKE5Dapf-0Lr5vUVxs52/s1600/social_promo004.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5c_O3oAXKsHOhYmngqdJcq6oEhbv2vLhuf2b388jnky825ESoAtwAvnZUVCvY9G-erf5LoC2_E5IpsKSRnMkdQDiM-cVPGmxcpSxd95Z4oOR-2qvJjA8AHZXpKE5Dapf-0Lr5vUVxs52/s1600/social_promo004.jpg" height="312" width="640" /></a></div>
The logo of LinkedIn is in the right place and has right size. Here are the login form and the strict motto on the top. LinkedIn is not so popular like facebook (just 300 million users) and they expect many new so the registration form can be in the right part. The image of profile pictures is very strange here because it give very strange feeling (Another social network! Why do I have to have one more?). Nice feature “Find a colleague” is in the bottom of the page. It is wrong place because users hardly find it. I would put it instead the registration form.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuReGoJzlkEHKysvgmwKFHL6GzfBy5TRzonHNmdlXQRDWpXWFCPlcyfZhTCVYALYoae_dIkWCBDtm2JlamdSJBYFpkdhZGrGcfG_SpY64PNm5l_NB-EYVonJEIcg-FjrX8vfEqgRQG_au/s1600/social_promo007.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuReGoJzlkEHKysvgmwKFHL6GzfBy5TRzonHNmdlXQRDWpXWFCPlcyfZhTCVYALYoae_dIkWCBDtm2JlamdSJBYFpkdhZGrGcfG_SpY64PNm5l_NB-EYVonJEIcg-FjrX8vfEqgRQG_au/s1600/social_promo007.jpg" height="312" width="640" /></a></div>
<br />
Russian social network Odnoklassniki combines very nice background collage that shows gallery features in the system. Here is also very cool “Sign up” button that opens registration form in other page. I would do it without a page reload via JavaScript. The site has order problems: the motto has to be in the center to the left; the language selection in the top right; the logo is missed on the collage. There are links to other products of the main owners company in left top. It takes place of logotype so I would push it to the right. <br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisg03I67DdmnXY-vh6znAHVaoj1r9vFjamYKOXUq5Kn4cyjTM1xnrr-vpTm395eKcpdGXREbYg-0lgRJrDcg56v-WR7siObIDegs67-MB47rpS7a2Jbdft4CYhq-o6LJ5888LOiVf5EDjh/s1600/social_promo005.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisg03I67DdmnXY-vh6znAHVaoj1r9vFjamYKOXUq5Kn4cyjTM1xnrr-vpTm395eKcpdGXREbYg-0lgRJrDcg56v-WR7siObIDegs67-MB47rpS7a2Jbdft4CYhq-o6LJ5888LOiVf5EDjh/s1600/social_promo005.jpg" height="312" width="640" /></a></div>
<br />
Xing promo site has very nice photo on the background. Happy people are little bit trivially but it works. The site points users’ attention on register form. The owners wishes are clear – make more accounts, click the button. It makes this page very similar to landing page.
<div class="separator" style="clear: both; text-align: left;">
<br /></div><hr>
<div class="separator" style="clear: both; text-align: left;">
How to make good promo site, 2014</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<a href="http://webdesign-review.blogspot.com/p/karamba.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDoeWyMepoHq-ZoJDPw1MaKAoIOLvmAoASIGcb_YDC-E5Pudbgj5MpdEKKeK3Z0tQ4Os4PiMLuJEiIR4FuVoFicZuGKRIxqgFuKFzp4mHvrpIIyV6WVWNSKquMjrEDXkWeheasFtJJ-vNc/s640/ad1.png" /></a>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0tag:blogger.com,1999:blog-2211718669828874428.post-34674698268901775922014-06-30T10:00:00.000+03:002015-05-04T17:05:57.801+03:00Paging, navigation and pagination in web design<br />
You have to think about the paging in web design. It can be paging by screens in adaptive design, it can be traditional 1, 2, 3 pagination or there would be no paging at all. Anyway, you have to think about it on each web project. Let us see, how pagination has been organized on popular web sites.<br />
<div>
<br /></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ-6dDBn6KEKM6VjJrbxhW7q2POlOvs4_AMd22ebWs-2GCOrlUOiC26OC-6FbnuQ-rs8ega-mHmLyaQox31b0myuZWrszHtXT97y_Loqb8FqJw1L__PsUYgmV3lS8HwUWm0MBtvwLU2g-u/s1600/Screen+Shot.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ-6dDBn6KEKM6VjJrbxhW7q2POlOvs4_AMd22ebWs-2GCOrlUOiC26OC-6FbnuQ-rs8ega-mHmLyaQox31b0myuZWrszHtXT97y_Loqb8FqJw1L__PsUYgmV3lS8HwUWm0MBtvwLU2g-u/s1600/Screen+Shot.jpg" height="306" width="640" /></a></div>
<br />
The paging in facebook is realized via AJAX and it is downloading when you scroll page down. It is good for social network because users stick into reading without end. Other social networks (xing.com, linkedin.com, instagram.com) and biggest portal yahoo.com use this solution also.<br />
<br />
<a name='more'></a><br /><br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXrlmeu2T6gmQnpjy6o0txMhP3BV9LXRcQXzW2KVjGGNYUfCe0-U4az701G5MjpO_0q0IOTGNC-GuhTYok8cuO0izFIeQQmQwUW9WdOSnqd33FdyNRbQX0Iib8xk_D1LekfSuFSkQdhjEb/s1600/Screen+Shot+010.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXrlmeu2T6gmQnpjy6o0txMhP3BV9LXRcQXzW2KVjGGNYUfCe0-U4az701G5MjpO_0q0IOTGNC-GuhTYok8cuO0izFIeQQmQwUW9WdOSnqd33FdyNRbQX0Iib8xk_D1LekfSuFSkQdhjEb/s1600/Screen+Shot+010.JPG" height="192" width="640" /></a></div>
<br />
linkedin.com uses mixed type of paging. Messages page has other navigation (previous-next) than main friends Records one (AJAX download).<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv47fATUBMR_KX1JZCVSW1BNLWjtA_RFbL2nOTv-tbRquOKGj-0AovRT41st474sZmS53Z33UURcpVXOwChxnlqG4O8kgTT4tSquN35CaMQQ550_Y5zcoaQv73w64DaRHIBuQ1aOzJ9anU/s1600/Screen+Shot+002.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv47fATUBMR_KX1JZCVSW1BNLWjtA_RFbL2nOTv-tbRquOKGj-0AovRT41st474sZmS53Z33UURcpVXOwChxnlqG4O8kgTT4tSquN35CaMQQ550_Y5zcoaQv73w64DaRHIBuQ1aOzJ9anU/s1600/Screen+Shot+002.JPG" height="210" width="640" /></a></div>
<br />
Google has traditional paging. Each page has its number and users can click it and go there. The reason of this old-school solution can be in shape of logotype and page numbers just accord with “oooooo” letters. However, I think the main reason of it is habit of users. When you are looking for the site that is not very popular - users jump through some quantity of pages.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjibvVrvi5HVbZjVEh97S39y43aqvU2VqOnUcnGQJsiogsWZwH_Y1u8q7mYEdDlWUf_GTDgKEkcHp9C47T78nA-kbCQy9s9pDzutWLgr4JVYGx33BfsCOpbhhOx5Us3SSfUdfE0IsGAetAY/s1600/Screen+Shot+003.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjibvVrvi5HVbZjVEh97S39y43aqvU2VqOnUcnGQJsiogsWZwH_Y1u8q7mYEdDlWUf_GTDgKEkcHp9C47T78nA-kbCQy9s9pDzutWLgr4JVYGx33BfsCOpbhhOx5Us3SSfUdfE0IsGAetAY/s1600/Screen+Shot+003.JPG" height="184" width="640" /></a></div>
<br />
Bloggers.com decided to make only “newer posts” and “older posts” navigation. This really suck if I want to find some post in the beginning. I have to go through all pages to find it.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8X8d6PZxQ9LJR5BGe9cglZYg14WLHRkfwRRsb5S2YmRmzPSS3TpmmcN_Te80hrAlq68GiagC4kIizPZrnQyttdrLkg5F1MyDk1vl0jqH_HZlLpo2OMKTIl3N6aP12rFC19D69fHM-cyqS/s1600/Screen+Shot+005.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8X8d6PZxQ9LJR5BGe9cglZYg14WLHRkfwRRsb5S2YmRmzPSS3TpmmcN_Te80hrAlq68GiagC4kIizPZrnQyttdrLkg5F1MyDk1vl0jqH_HZlLpo2OMKTIl3N6aP12rFC19D69fHM-cyqS/s1600/Screen+Shot+005.JPG" height="306" width="640" /></a></div>
<br />
Livejournal.com blog network main page is bottomless as any other social network. Users can choose many templates for their blogs. Some of them have navigation only in the top of the page. Therefore, if I have scrolled posts until the end I cannot go to the next page without returning to the top.<br />
<div>
<br /></div>
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdOIwH2P-VD-u6W20TsAMme2gxzqhUjjUVML4vVL3wbwAPiUPCyWaLhPGmQNVlqFHA52tg_Vv8dz1JArEJMt9fgrseg5QIXrcKom9EUsakI8PRnR3SBdPohUajCzxjvEovA0dER08Kyou0/s1600/Screen+Shot+006.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdOIwH2P-VD-u6W20TsAMme2gxzqhUjjUVML4vVL3wbwAPiUPCyWaLhPGmQNVlqFHA52tg_Vv8dz1JArEJMt9fgrseg5QIXrcKom9EUsakI8PRnR3SBdPohUajCzxjvEovA0dER08Kyou0/s1600/Screen+Shot+006.JPG" height="306" width="640" /></a></div>
<br />
<a href="http://webdesign-review.blogspot.com/2014/06/fast-view-on-gmail-uiux-solutions.html">As I have told before</a> Gmail has also mistake in pages navigation position. It has to be in the bottom after all the letters. If users want to go to some definite page in the beginning, designer can give them opportunity to do it and double navigation.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWDfDtQH8z0dTrt009ad6Sg55fuoYK-19ZSoR_EmWJfJahWiR6Md34LU_epkOmkCnWqAEz8KF6YxhpmO7Lw4rYKBHtqlUl2PSRGBkObOvV9cgkuFgZcYrHCqZ4HyF_rwc-6kgkWX2LLBkV/s1600/Screen+Shot+007.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWDfDtQH8z0dTrt009ad6Sg55fuoYK-19ZSoR_EmWJfJahWiR6Md34LU_epkOmkCnWqAEz8KF6YxhpmO7Lw4rYKBHtqlUl2PSRGBkObOvV9cgkuFgZcYrHCqZ4HyF_rwc-6kgkWX2LLBkV/s1600/Screen+Shot+007.JPG" height="280" width="640" /></a></div>
<br />
Doubled pages navigation is realized in freemail.ukr.net. It is in the top and in the bottom of each page.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO8stpmgOdQv33ogispSpdqPj5cPxwBbKHoVh8AKSm4Z0tAVEZsyrP9UfEBf5118JA1YrqAuC37Nrl90v2fkA1HvGqafYQrJv7o3Mh-gtX3Yn-L4hR6JMGD5yz2FboCjPfFldasNnzjcOg/s1600/Screen+Shot+009.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO8stpmgOdQv33ogispSpdqPj5cPxwBbKHoVh8AKSm4Z0tAVEZsyrP9UfEBf5118JA1YrqAuC37Nrl90v2fkA1HvGqafYQrJv7o3Mh-gtX3Yn-L4hR6JMGD5yz2FboCjPfFldasNnzjcOg/s1600/Screen+Shot+009.JPG" height="158" width="640" /></a></div>
<br />
Russian mail.yandex.ru has strange paging. It has big “more” button that open next messages. It also has paging by month. I am hope they have tested this paging before, but I think this is wrong way of pagination. Users usualy can't remember the date of their income letters. But they can figure out how many pages before they can find wanted letters.<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmP1m2K0NU5HfQgFTmbk8dD58z7n5pOH4cgEz6jRMlQWPtSGGnqTE96-v1PCIKdScl-ES84y9DfS3YbQhsQze7MNuC-m58kOoafchnQFk-C41nBSamoCkcIRXcUTpUVpzI9HZqUMpPAL0K/s1600/gmail_design008.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmP1m2K0NU5HfQgFTmbk8dD58z7n5pOH4cgEz6jRMlQWPtSGGnqTE96-v1PCIKdScl-ES84y9DfS3YbQhsQze7MNuC-m58kOoafchnQFk-C41nBSamoCkcIRXcUTpUVpzI9HZqUMpPAL0K/s1600/gmail_design008.jpg" height="312" width="640" /></a></div>
<br />
Facebook uses navigation by years on a personal page also.<br />
<br />
<br />
<br />
<br />
The pagination depends of users’ behavior. If web site want them to spend more time reading – they use automatic AJAX downloading of the next items (articles, posts etc.) If users know the page of the item they search (post, letter etc.) – it is better to use classic pagination with numbers. “Next” and “Previous” pagination is useful for readers of the blog but not for the owner when he/she try to find his old post. Some pagination solution is uncomfortable when they are put in wrong place (top, right).
<div class="separator" style="clear: both; text-align: left;">
<br /></div><hr>
<div class="separator" style="clear: both; text-align: left;">
Paging, navigation and pagination in web design, 2014</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<a href="http://webdesign-review.blogspot.com/p/karamba.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDoeWyMepoHq-ZoJDPw1MaKAoIOLvmAoASIGcb_YDC-E5Pudbgj5MpdEKKeK3Z0tQ4Os4PiMLuJEiIR4FuVoFicZuGKRIxqgFuKFzp4mHvrpIIyV6WVWNSKquMjrEDXkWeheasFtJJ-vNc/s640/ad1.png" /></a>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>Anonymoushttp://www.blogger.com/profile/04267670971517283510noreply@blogger.com0