tag:blogger.com,1999:blog-589642669774293082024-03-05T23:37:14.500+05:30UX&UI DesignersUseful Information for Information Architect, Usability Analyst, Expert Reviewer, User Experience Designer, User Interface DesignerHitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comBlogger122125tag:blogger.com,1999:blog-58964266977429308.post-72468672562692162922022-01-24T19:44:00.005+05:302022-01-24T19:44:44.517+05:30Design Thinking - the Core Value System that leads to the ultimate, futuristic, and holistically optimized organizational growth<p> <span style="caret-color: rgb(102, 102, 102); font-family: ledger, serif; font-size: 20px;">As per popular notion, to a layman, the word design refers to aesthetics. And why not? For several years we have known the Versaces, Jimmy Choos, and Channels of the world to be spoken together with the word - design. The supreme quality and state of the art craft of the products and services of these brands defined a laudable experience for their customers.</span></p><div class="blogs-content" style="box-sizing: border-box; caret-color: rgb(102, 102, 102); color: #666666; font-family: "inter ui", sans-serif; font-size: 14px; margin: 0px; padding: 0px 0px 70px;"><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px;">Imbibing design thinking as a culture in the corporates is way beyond crafting a shoe or a handbag. Nevertheless, it is about making 'state-of-the-art' a 'normal' across all layers within an organization.</p></div><div class="blogs-content" style="box-sizing: border-box; caret-color: rgb(102, 102, 102); color: #666666; font-family: "inter ui", sans-serif; font-size: 14px; margin: 0px; padding: 0px 0px 70px;"><h2 class="section-title voice-blog-title" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 36px; font-weight: 500; letter-spacing: 0px; line-height: 1.1; margin: 0px; padding: 0px 0px 50px;">What is Design Thinking Culture?</h2><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">Design thinking culture is getting habitual into a system - a set of values, code of conduct, ways to respond to a problem or opportunities in a way that helps to optimize the output across all verticals in an organization. These organizational habits are inducted into the core value system of an organization.</p><div class="blogs-content" style="box-sizing: border-box; margin: 0px; padding: 0px 0px 70px;"><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">Design thinking impacts every touchpoint of an organization - inside-out. It helps to get the best outcome in customer experience, employee satisfaction and profits.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">How does a team respond to a given situation with mindful observation and empathy? What innovative solution do they come up with? And how do they optimize the solution?</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;"><span class="text_high_light" style="box-sizing: border-box; font-weight: 700; margin: 0px; padding: 0px;">Holistically maximized outcomes every time with each endeavour comes from a strong intent to appreciate design. Then it involves the skill set and resources to conform to the same</span>.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px;">The best example of design thinking that the world looks up to is Apple. Design thinking does not just reflect on their product, but it percolates to each layer of the organization. There is a 'Wow' factor that the brand creates at every touchpoint. And it is attributed to people that Apple hires.</p></div><div class="blogs-content" style="box-sizing: border-box; margin: 0px; padding: 0px 0px 70px;"><h2 class="section-title voice-blog-title" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 36px; font-weight: 500; letter-spacing: 0px; line-height: 1.1; margin: 0px; padding: 0px 0px 50px;">How to embrace design?</h2><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">A design thinking process takes time to be completely inducted into the mindset of the organization. It starts with getting the people who appreciate design. <span class="text_high_light" style="box-sizing: border-box; font-weight: 700; margin: 0px; padding: 0px;">They should be ready to embrace the design thinking practices and culture of the organization.</span> They should be given the freedom to experiment and innovate to the extent that even failures should be allowed.</p><div class="blogs-content" style="box-sizing: border-box; margin: 0px; padding: 0px 0px 70px;"><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">There have been several examples where companies have failed only because they refused to innovate. A recent article published in McKinsey -'Nine keys to becoming a future-ready company' emphasizes the need to take bold decisions. As per the article, the top 30 companies in the survey are <span class="text_high_light" style="box-sizing: border-box; font-weight: 700; margin: 0px; padding: 0px;">taking bold decisions across nine key organizational imperatives that include - purpose, value, culture, structure, decision making, talent, ecosystems and learning.</span></p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px;">Hence' <span class="text_high_light" style="box-sizing: border-box; font-weight: 700; margin: 0px; padding: 0px;">freedom to innovate and tolerance to small failure should be imbibed into the company's culture.</span> It will help to optimize possibilities of growth in the long run.</p></div><div class="blogs-content" style="box-sizing: border-box; margin: 0px; padding: 0px 0px 70px;"><h2 class="section-title voice-blog-title" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 36px; font-weight: 500; letter-spacing: 0px; line-height: 1.1; margin: 0px; padding: 0px 0px 50px;">Why should you adopt design thinking?</h2><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">Now the question comes to mind - what is new about these practices? Businesses have always tried to do their best to serve the customers. And there have been some really good products in the industry that the world looks up to even today.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">Mercedes, Rolls-Royce, Walt Disney and several such time tested brands prove that great products and brands existed before the concept of design thinking came into prominence. So what were the gaps in the traditional business practices that design thinking culture is able to fill?</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">Perhaps, the answer to that lies in the fact that the competition was less. At present, most companies are struggling to differentiate their products in the market. Further, the way technology has become an integral part of businesses, has majorly impacted the way interactions happen between colleagues, or with customers.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">Several years ago, getting a landline connection used to be a tedious process. The same is said about booking an Ambassador car. These were perhaps the best examples of product-oriented businesses. Of course, the industry has come a long way since then. And the approach continually evolved towards being customer centric.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">In this regard, the only differentiation that design thinking brings to the table is empathy and an intent to create a 'Wow' effect at every touchpoint and interaction. Design thinking does not differentiate between a colleague, a customer, investor or any other business associate. It only emphasizes creating an incredible experience all across and for everyone.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">So what happens when you write an email to your client by applying design thinking? - They want to sign up with you as soon as possible because they believe that you truly understand their problem and will solve it for them.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">What happens when you hand over some tasks to your colleague in the same manner? - It brings a smile to their face and they look forward to working with you. It improves the working environment.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">What happens when you take the same approach in dealing with your customers? - They not only come back to you, but they also recommend you to others.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px;"><span class="text_high_light" style="box-sizing: border-box; font-weight: 700; margin: 0px; padding: 0px;">Design thinking has brought 'one-to-one experience' to the core of interactions in business.</span> And this is the real superpower of business teams that practice design thinking.</p></div><div class="blogs-content" style="box-sizing: border-box; margin: 0px; padding: 0px 0px 70px;"><h2 class="section-title voice-blog-title" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 36px; font-weight: 500; letter-spacing: 0px; line-height: 1.1; margin: 0px; padding: 0px 0px 50px;">How design thinking has impacted brands?</h2><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">Let's take the example of Tesla's cube truck. Who designs an electric cyber track with 400-600 km mileage when fully charged, 14,000 pounds towing capacity, on-board power inverters, autopilot, and a bullet-proof 30X cold-rolled stainless steel body just to grab attention?</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">Elon Musk invested in this model just to see how people from all over the world react to it and channelise the insights to develop future products. Going forward, their sedans were far more superior than all other automobile brands. It set a benchmark in terms of the range, affordability, and pick up as compared to other electric cars.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">Tesla's design thinking process helped them to create headlines as they pitched the idea and then led the insights to bring about unmatched innovation. And in all this, the one core quest they had was - to add value to their customers.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">Disney applied the design thinking approach when they created the VR character of Doc. McStuffins in a Children's Hospital in Los Angeles. They empathised with kids and tried to reduce their stress and boredom while sitting in the hospital's waiting rooms.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px;">Disney created this character with several other stuffed toy animals to keep the kids happily engaged and stress-free.</p></div><div class="blogs-content" style="box-sizing: border-box; margin: 0px; padding: 0px 0px 70px;"><h2 class="section-title voice-blog-title" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 36px; font-weight: 500; letter-spacing: 0px; line-height: 1.1; margin: 0px; padding: 0px 0px 50px;">How is Design Thinking practised?</h2><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">So far, we have discussed how the culture of design thinking impacts the overall work culture and helps companies to scale up unprecedented growth. Now, we will see how design thinking is practised?</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;"><span class="text_high_light" style="box-sizing: border-box; font-weight: 700; margin: 0px; padding: 0px;">Empathy - Empathy helps to identify an improvement opportunity. It helps you to keep the needs of the user of your product at the centre.</span></p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">For that, you have to identify and define their real problems. In the above example, Tesla pitched an aspirational product that felt like prayers being answered for the users of an electric truck. And Disney understood the anxiety and stress of kids sitting in the waiting room of a hospital and tried to get rid of that by engaging them with something enjoyable. Success was guaranteed in both cases as it gave the users more than what they could even think of as a solution to their problems.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;"><span class="text_high_light" style="box-sizing: border-box; font-weight: 700; margin: 0px; padding: 0px;"></span></p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;"><span class="text_high_light" style="box-sizing: border-box; font-weight: 700; margin: 0px; padding: 0px;">Cognitive paths/ destinations</span> - The word cognition refers to the perception, or mental impulse of a person through thoughts, observation, and experiences. Design thinking teaches you to use cognitive strategies to approach one particular situation in all possible ways. How?</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">By <span class="text_high_light" style="box-sizing: border-box; font-weight: 700; margin: 0px; padding: 0px;">understanding human psychology and behaviour</span>. Any interaction/product/service that is human-centred has to have deep knowledge about the human mind and how it influences their decisions/actions. It helps you to understand their problems better and also indicates their propensity to react negatively or positively to a given solution.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;"><span class="text_high_light" style="box-sizing: border-box; font-weight: 700; margin: 0px; padding: 0px;">Creative thinking</span> - There could be several starting points with the same or even diverse destinations. <span class="text_high_light" style="box-sizing: border-box; font-weight: 700; margin: 0px; padding: 0px;">It is all about keeping your mind open to possibilities and trying to find an alternative opening for every roadblock that comes in the way</span>. Creative thinking helps you to achieve that.</p><div class="blogs-content" style="box-sizing: border-box; margin: 0px; padding: 0px 0px 70px;"><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;"><span class="text_high_light" style="box-sizing: border-box; font-weight: 700; margin: 0px; padding: 0px;">Collaborative Processes</span> - It involves involving other people and brainstorming together for the best possible outcome of your creative initiative/endeavour/product.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">Together you can come up with unique and innovative solutions for the problems. It also helps to iterate and explore the scope of the product or optimize the solution.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px;">Thus, a continual process of implementing design thinking practices helps to improve the performance of an organization in a holistic manner. The intent to make state-of-the-art at every attempt and get a 'Wow' reaction from everyone your work interacts with - is sure to make you the only 'go-to' in your domain.</p></div><div class="blogs-content" style="box-sizing: border-box; margin: 0px; padding: 0px;"><h2 class="section-title voice-blog-title" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 36px; font-weight: 500; letter-spacing: 0px; line-height: 1.1; margin: 0px; padding: 0px 0px 50px;">In a nutshell…</h2><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px 0px 28px;">Embrace design thinking, provide freedom for innovation and space for failures. Apply design thinking approach through empathetic observation, realizing and deeply understanding a problem/opportunity. Use this understanding to come up with innovative solutions. Continue the same approach to keep optimizing the solution.</p><p class="caption-para" style="-webkit-user-select: text; box-sizing: border-box; color: black; font-family: ledger, serif; font-size: 20px; line-height: 1.6; margin: 0px; padding: 0px;">Need we say more on why you must embrace design NOW?</p></div></div></div></div>Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-41255066258923433162020-07-29T15:54:00.001+05:302020-07-29T15:54:55.241+05:30The 7 factors that influence user experience<p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em; outline: none;"><font color="#444444" face="arial">In 2004 Peter Morville, an information architect, created a 7-facet honeycomb to guide those concerned with user experience. Governments, Fortune 500 companies, website codes, and more strive to respect their guidelines.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Every organization strives to improve the overall product experience and delivers quality service to meet customer satisfaction. On the other hand, they use a variety of techniques to improve user experience.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">There are 7 factors that define the user experience, according to Peter Morville a pioneer in the UX field who wrote several of UX’s best-selling books:</font></p><ul style="box-sizing: inherit; font-size: 18px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.5em; padding-left: 30px;"><li style="box-sizing: inherit;"><font color="#444444" face="arial">Useful</font></li><li style="box-sizing: inherit;"><font color="#444444" face="arial">Usable</font></li><li style="box-sizing: inherit;"><font color="#444444" face="arial">Findable</font></li><li style="box-sizing: inherit;"><font color="#444444" face="arial">Credible</font></li><li style="box-sizing: inherit;"><font color="#444444" face="arial">Desirable</font></li><li style="box-sizing: inherit;"><font color="#444444" face="arial">Accessible</font></li><li style="box-sizing: inherit;"><font color="#444444" face="arial">Valuable</font></li></ul><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Let’s take a look at each specialty and what it means for general user information:</font></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrQPasSZeBADdN44LuEmpRZRhW3xo9WUez3GsV31uCZNy1Dn1W50RCeN0kabKHmYAKr1cPZRRNA-MmX5R_boCDf3OgQGwPu3UokBIAaeEjWKr0ERYHG8shgdizJQLLbcBwcUAoWStpQ/s883/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><font color="#444444" face="arial"><img border="0" data-original-height="609" data-original-width="883" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrQPasSZeBADdN44LuEmpRZRhW3xo9WUez3GsV31uCZNy1Dn1W50RCeN0kabKHmYAKr1cPZRRNA-MmX5R_boCDf3OgQGwPu3UokBIAaeEjWKr0ERYHG8shgdizJQLLbcBwcUAoWStpQ/s320/1.PNG" width="320" /></font></a></div><figure class="wp-block-image" style="box-sizing: inherit; font-size: 18px; margin: 0px 0px 1em;"><font color="#444444" face="arial"><br /></font></figure><h2 style="box-sizing: inherit; clear: both; font-size: 3.125rem; font-weight: 500; line-height: 1.1; margin-bottom: 0.5em;"><span style="box-sizing: inherit; font-weight: 700;"><font color="#444444" face="arial">Useful</font></span></h2><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">it simply means that Your content should be fresh and clear to fulfill the need.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Product usability increases or falls through the quality of its design. If the product does not work for someone why would you want to bring it to market?</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">It is noteworthy that “useful” catches the eye of the beholder and objects can be considered “useful” if they bring non-functional benefits such as pleasing or pleasing beauty.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">When you make products that the consumer does not use, they may experience negative effects. So, make sure you bring useful products to customers in a great way.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Good designers often plan how they can make their work seem useful to users. One of the most useful things will be reviews, which show users the right information about products.</font></p><h2 style="box-sizing: inherit; clear: both; font-size: 3.125rem; font-weight: 500; line-height: 1.1; margin-bottom: 0.5em;"><span style="box-sizing: inherit; font-weight: 700;"><font color="#444444" face="arial">Usable</font></span></h2><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">The website should be easy to use and users should be able to achieve their goal effectively, efficiently, and intuitively.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Usability is concerned with enabling users to successfully use their products effectively and efficiently.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Assume you have added an active feature to your website or app, but if it is not usable, it will ruin the user experience.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Designers should make sure that all the features and options included are easy to use. It has never been a good idea to give your users half-done work.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">For a website to be useful it must provide objectives for the target audience that is usable. Communication should not require much thought or effort, as it is well-planned and accurate. When it comes to websites, 94% of consumers want an easy-to-use one.</font></p><h2 style="box-sizing: inherit; clear: both; font-size: 3.125rem; font-weight: 500; line-height: 1.1; margin-bottom: 0.5em;"><span style="box-sizing: inherit; font-weight: 700;"><font color="#444444" face="arial">Findable</font></span></h2><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Availability leads to the notion that a product should be straightforward to find and in the case of digital and information products. If you cannot find a product, you will not purchase it and that is true for all possible users.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">It is important to display the necessary information to the relevant users in a convenient way.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">the acquisition factor is very important for all businesses. It is best to advertise your product in newspapers, websites, social media platforms, and many other platforms that are only possible for advertisement.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Consider a simple example; if you have picked up a newspaper and all the stories in it are given in a page layout, rather than categorized by categories such as Sports, Entertainment, business, politics, research, etc. You may find reading the newspaper very annoying. </font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">The more steps you need to take to do something, the more your user feels harassed. </font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Availability is important to the user experience(UX) of various products.</font></p><h2 style="box-sizing: inherit; clear: both; font-size: 3.125rem; font-weight: 500; line-height: 1.1; margin-bottom: 0.5em;"><span style="box-sizing: inherit; font-weight: 700;"><font color="#444444" face="arial">Credible</font></span></h2><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Credible refers to the consumer’s capability to trust your product and the services you provide that is the users should trust and believe what they are being told.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Without trust, consumers will not buy any products or services from you.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Making your products more reliable joins customer testimonials on your website to provide your particular product or service.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">In the past, Toyota has faced many recollections over the years.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">According to Edmunds.com, “More than 34 million vehicles in the United States and millions more worldwide are involved in Takata Airbag recalls, which took place in 2014.”</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Toyota has blundered and not made a reliable product which is why they have made it even harder to trust their products.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Of the nearly 250,000 products introduced each year in the U.S., 85-95% fail due to users’ lack of trust in the product, regardless of their quality. </font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">It is almost impossible to bring the user experience if the user thinks that the originator of the product is false, anointed with malicious intent.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Randall Terry said; “I have cheated you once, I have been ashamed of you. I cheated twice, I was embarrassed. ”Today’s users will not give you a second chance to cheat – there are many options in almost every field to choose a reliable product provider.</font></p><h2 style="box-sizing: inherit; clear: both; font-size: 3.125rem; font-weight: 500; line-height: 1.1; margin-bottom: 0.5em;"><span style="box-sizing: inherit; font-weight: 700;"><font color="#444444" face="arial">Desirable</font></span></h2><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Desirable means that your website or app is used and apprised by the person who found it the best done. The most widely trusted commodities have the most desirable feature of the product, the design, its use, and cost.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">A good user experience leaves a good impression of your website or app to its users.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">The attraction is conveyed to product design, image, identity, beauty, and emotional design. </font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Desirable value is measured when you return with satisfied customers who play an important role in growing your business by spreading news of your product and telling how much they were satisfied by that.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Therefore, it is important to increase your product value which can lead to better user experience.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">For the most desirable product, it is possible for the user to be proud of it and create a desire for other users.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">It simply means using an image, brand, product type, and other design elements to evoke emotion and appreciation for your product.</font></p><h2 style="box-sizing: inherit; clear: both; font-size: 3.125rem; font-weight: 500; line-height: 1.1; margin-bottom: 0.5em;"><span style="box-sizing: inherit; font-weight: 700;"><font color="#444444" face="arial">Accessible</font></span></h2><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Information intended for everyone should be accessible to everyone. In fact, content needs to be available to people with disabilities also.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">The more user-friendly your site is, regardless of age or ability, the more effective it will be. </font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">One of the most easily accessible opportunities in app development and website development is to embrace UX-enhancing features for those with visual impairments.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">It is about providing an experience that is not available to full-time users – this includes those with disabilities such as hearing loss, blurred vision, impaired mobility or impaired function.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Accessibility is often seen by companies as a waste of money because of the idea that people with inabilities make up a small fraction of the population. But think that if 1 in 4 people in your audience will not be able to use your product only because it is not available for them then 25% of your total market will be lost by you.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">It is also important to remember accessibility when you design a product.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Do not ignore access to the user experience. Unlocking an accessible user experience also shows that you care about everyone and that will help you to elevate your brand reputation.</font></p><h2 style="box-sizing: inherit; clear: both; font-size: 3.125rem; font-weight: 500; line-height: 1.1; margin-bottom: 0.5em;"><span style="box-sizing: inherit; font-weight: 700;"><font color="#444444" face="arial">Valuable</font></span></h2><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">The product must bring the value of the business it affects to the user who purchases or uses it. Without value, it is possible that any initial product extension will eventually be limited.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">The value of a design can be measured by the price of problem-solving solutions. Nothing works like a less expensive design to solve the problem of expensive costs.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Whenever you bring a product or service, make sure it delivers the best results that add value to your product. </font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">The product should not affect the usefulness of your company and customers over time. Lack of value can damage your business reputation.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">In addition, you can improve the user experience or value factor by providing opportunities for customers to express their feedback on your website through reviews.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">To sum up things, we have observed seven factors that play a key role in determining the performance of user experience. Adopt these seven factors and improve your product user experience successfully.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em;"><font color="#444444" face="arial">Product success depends on Useful, Usable, Findable, Credible, Desirable, Accessible, Valuable.</font></p><p style="box-sizing: inherit; font-size: 18px; margin-bottom: 1.5em; outline: none;"><font color="#444444" face="arial">Having these 7 features in the products is likely to be successful in the market place.</font></p>Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-55415027905542269822020-07-23T10:36:00.001+05:302020-07-23T10:37:01.078+05:30Accessibility and Interface design<h2 style="text-align: left;"><font face="helvetica" size="2" style="font-weight: normal;">We should take accessibility more seriously. </font></h2><div><h4 style="text-align: left;"><font face="helvetica" size="2"><span class="ih jx" style="box-sizing: inherit; font-weight: normal;">One billion people</span><span style="font-weight: normal;">, or 15% of the world’s population, experience some form of disability, and disability prevalence is higher for developing countries. One-fifth of the estimated global total, or between </span><span class="ih jx" style="box-sizing: inherit; font-weight: normal;">110 million and</span><span style="font-weight: normal;"> </span><span class="ih jx" style="box-sizing: inherit; font-weight: normal;">190 million people</span><span style="font-weight: normal;">, experience significant disabilities. (<i>Source - World Bank Group</i>) </span></font></h4><h4 style="text-align: left;"><span style="font-weight: normal;"><font face="helvetica" size="2">In 2019 in France, disabled people were estimated at <span class="ih jx" style="box-sizing: inherit;">12 millions with 1,5 millions suffering from vision Impairment and 850 000 from physical disability. </span>The rest of the disabilities are related to hearing, mental or intellectual disability as well as autism and other minor disabilities.</font></span></h4><h4 style="text-align: left;"><span style="font-weight: normal;"><font face="helvetica" size="2">Also, the number of disabilities is expected to rise with time as younger generations age and are prone to visual and hearing impairment due to excessive use of screens and earphones.</font></span></h4><h4 style="text-align: left;"><span style="font-weight: normal;"><font face="helvetica" size="2">Simply put, people with disabilities are a user base that is as valuable for every business as any user bases. Seeing these numbers, we are talking about millions of unaddressed users that could use your services and products.</font></span></h4><h4 style="text-align: left;"><span style="font-weight: normal;"><font face="helvetica" size="2">Taking accessibility more seriously in your product and service design could allow any business to grow its user base right now but also adapt to a certain future where these needs will be even more in demand.</font></span></h4></div><div><span style="font-weight: normal;"><font face="helvetica" size="2"><br /></font></span></div><div><section class="dk dl dm dn do" style="box-sizing: inherit; word-break: break-word; word-wrap: break-word;"><div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"><div class="z ab ac ae af dp ah ai" style="box-sizing: inherit; margin: 0px 64px; max-width: 680px; min-width: 0px; width: 680px;"><h1 class="ko kp as ar kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg ej" data-selectable-paragraph="" id="07a9" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.022em; line-height: 40px; margin: 1.25em 0px -0.28em;"><font face="helvetica" size="2">What are the different disabilities and their needs?</font></h1><p class="if ig as ih b ii lh ik il li in io lj iq ir lk it iu ll iw ix dk ej" data-selectable-paragraph="" id="f3c0" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 0.86em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">Today we can observe five types of disabilities that need to have their needs addressed digitally:</font></p><font color="#292929" face="helvetica" size="2"><span style="caret-color: rgba(0, 0, 0, 0.8); letter-spacing: -0.04800000041723251px;"><div class="z ab ac ae af dp ah ai" style="box-sizing: inherit; margin: 0px 64px; max-width: 680px; min-width: 0px; width: 680px;"><font color="#292929" face="helvetica" size="2"><span style="caret-color: rgba(0, 0, 0, 0.8); letter-spacing: -0.04800000041723251px;"><br /></span></font></div></span></font><ul class="" style="box-sizing: inherit; list-style: none none; margin: 0px; padding: 0px; text-align: left;"><li><font color="#292929" face="helvetica" size="2"><span style="caret-color: rgba(0, 0, 0, 0.8); letter-spacing: -0.04800000041723251px;">Vision Impairment, Deaf or hard of hearing, Autism spectrum disorder and Physical & Learning disability </span></font></li><li><span style="caret-color: rgba(0, 0, 0, 0.8); color: #292929; font-family: helvetica; font-size: small; letter-spacing: -0.003em;"><br /></span></li><li><span style="caret-color: rgba(0, 0, 0, 0.8); color: #292929; font-family: helvetica; font-size: small; letter-spacing: -0.003em;">Each of these disabilities have different sets of needs but most of these needs can be addressed the same way. Let's go over these needs and how to address them!</span></li><li><span style="caret-color: rgba(0, 0, 0, 0.8); color: #292929; font-family: helvetica; font-size: small; font-style: italic; letter-spacing: -0.003em;"><br /></span></li><li><span style="caret-color: rgba(0, 0, 0, 0.8); color: #292929; font-family: helvetica; font-size: small; font-style: italic; letter-spacing: -0.003em;">NB: This post does not take into consideration the needs of other disabilities that are not listed here.</span></li></ul></div></div></section><hr class="kd cl ke kf kg kh ki kj kk kl km kn" style="border: none; box-sizing: inherit; color: #080808; margin-top: 30px; text-align: center;" /><section class="dk dl dm dn do" style="box-sizing: inherit; word-break: break-word; word-wrap: break-word;"><div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"><div class="z ab ac ae af dp ah ai" style="box-sizing: inherit; margin: 0px 64px; max-width: 680px; min-width: 0px; width: 680px;"><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="9912" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;"><font face="helvetica" size="2">Vision impairment & its needs:</font></span></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="b26c" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">Vision impairment concerns people who suffer from total blindness to people who simply wear glasses. However, some people have severe vision impairment (low vision, astigmatism, cataracts…) that despite corrective glasses or surgery aren't able to read small text or identify small details unless enlarged.</font></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="ea0e" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">Vision impairment also concerns people with colourblindness.</font></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="fdfc" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">Today a few websites provide some tools to assist people with visual disabilities:</font></p><ul class="" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8); list-style: none none; margin: 0px; padding: 0px;"><li class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix jq jr js ej" data-selectable-paragraph="" id="6ea6" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 2em; padding-left: 0px;"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;"><font face="helvetica" size="2">Text enlargement tool:</font></span></li></ul><div style="caret-color: rgba(0, 0, 0, 0.8);"><font color="#292929" face="helvetica" size="2"><span style="letter-spacing: -0.06300000101327896px;"><b><br /></b></span></font></div><div style="caret-color: rgba(0, 0, 0, 0.8);"><font color="#292929" face="helvetica" size="2"><span style="letter-spacing: -0.06300000101327896px;"><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDI5osA9fj7QdFi3isFSdfx9bBi0ZqfSlaX7L489RrmczxBvyKLmtva4N1Kl7Uq391akErnpWpimxg9UtP17JBrMcm_ex2ogF7PGRE_hRPZRSWPhJNbrypE4XGOM-WyUaPZB6VBdQS9Q/s1000/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="734" data-original-width="1000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDI5osA9fj7QdFi3isFSdfx9bBi0ZqfSlaX7L489RrmczxBvyKLmtva4N1Kl7Uq391akErnpWpimxg9UtP17JBrMcm_ex2ogF7PGRE_hRPZRSWPhJNbrypE4XGOM-WyUaPZB6VBdQS9Q/s320/1.png" width="320" /></a></div></span></font></div><div style="caret-color: rgba(0, 0, 0, 0.8);"><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="d05e" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">This tool allows people to enlarge the text in order to read more easily small text. However, if your website contains a lot of information, enlarging the text will completely disturb the structure of your website and thus render your UX useless. ( see example below) This text enlargement is even more disturbing on mobile…</font></p><font face="helvetica" size="2"><br /></font></div><div style="caret-color: rgba(0, 0, 0, 0.8);"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0WRJF7apg6AUWn8N_TyYsFWoLiuQdIXjB48cx84PN2lItJMYosR-faiH0IJ8q78n9ZfxjQ6P_NJVSqKIZ551TLH5QFO2tFd4tETCelnYZTBle6OmPvDF4Wyiq3mKHMI4EL6JZcWpPqw/s1038/2.png" imageanchor="1" style="font-family: helvetica; letter-spacing: -0.06300000101327896px; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1038" data-original-width="1000" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0WRJF7apg6AUWn8N_TyYsFWoLiuQdIXjB48cx84PN2lItJMYosR-faiH0IJ8q78n9ZfxjQ6P_NJVSqKIZ551TLH5QFO2tFd4tETCelnYZTBle6OmPvDF4Wyiq3mKHMI4EL6JZcWpPqw/s320/2.png" /></a></div><div><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="8bea" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">In order to avoid using this type of tool, there are some alternatives such as using <span class="ih jx" style="box-sizing: inherit; font-weight: 700;">bigger typography size (at least 19px) as well as a font that has sharp and spaced letters (Verdana and Arial are good examples.)</span></font></p><ul class="" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8); list-style: none none; margin: 0px; padding: 0px;"><li class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix jq jr js ej" data-selectable-paragraph="" id="daf2" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 2em; padding-left: 0px;"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;"><font face="helvetica" size="2">Tools for testing your website to be colourblindness compliant:</font></span></li></ul><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="acb5" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">Regarding colourblindness, it is best to avoid clear text & elements and work on contrast. There is a lot of website where you can test your colour palette and visualise how a colourblind person will see it.</font></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="ad5b" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">You can use <a class="cq ge jt ju jv jw" href="https://www.toptal.com/designers/colorfilter/" rel="noopener nofollow" style="background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(41, 41, 41, 1)\" /></svg>"); background-position: 0px calc(1em + 1px); background-repeat: repeat no-repeat; background-size: 1px 1px; box-sizing: inherit; color: inherit; text-decoration: none;" target="_blank">toptal</a> for example to test your website renders depending on colourblindness types! There are also other tools to test unique colors, you can find out more <a class="cq ge jt ju jv jw" href="https://css-tricks.com/accessibility-basics-testing-your-page-for-color-blindness/" rel="noopener nofollow" style="background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(41, 41, 41, 1)\" /></svg>"); background-position: 0px calc(1em + 1px); background-repeat: repeat no-repeat; background-size: 1px 1px; box-sizing: inherit; color: inherit; text-decoration: none;" target="_blank">here.</a></font></p><ul class="" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8); list-style: none none; margin: 0px; padding: 0px;"><li class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix jq jr js ej" data-selectable-paragraph="" id="b0ce" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 2em; padding-left: 0px;"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;"><font face="helvetica" size="2">Voice over tool:</font></span></li></ul><font color="#292929" face="helvetica" size="2"><span style="caret-color: rgba(0, 0, 0, 0.8); letter-spacing: -0.04800000041723251px;"><b><br /></b><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKrbNHdQak1ixXO0sC-5fsUzYuZqMA7z3HskXGzl1szGkrtDtIyRe2KKoxqgDZMADyWPe3Tos03bWXliRghb7Mvfzjc6jIwDanar3PYtmlbd3O6oM1A69ZNcP4pf8UQC9gCh_p1vv-7g/s874/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="340" data-original-width="874" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKrbNHdQak1ixXO0sC-5fsUzYuZqMA7z3HskXGzl1szGkrtDtIyRe2KKoxqgDZMADyWPe3Tos03bWXliRghb7Mvfzjc6jIwDanar3PYtmlbd3O6oM1A69ZNcP4pf8UQC9gCh_p1vv-7g/s320/3.png" width="320" /></a></div><b><br /></b></span></font><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="2bee" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">This is an interesting tool for people with reduced vision and total blindness. It consist of a button on a website page to activate a voice over that will read or describe whatever that person will hover on. However, so far, I haven't found a good example on a website that uses that feature correctly. All I could find was an indicator that we can listen to a website content, but this feature didn't work properly.</font></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="0258" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">However, I recently discovered Apple's VoiceOver for IOS and I was impressed by everything it could do! You can learn more about it here: <a class="cq ge jt ju jv jw" href="https://www.apple.com/accessibility/mac/vision/" rel="noopener nofollow" style="background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(41, 41, 41, 1)\" /></svg>"); background-position: 0px calc(1em + 1px); background-repeat: repeat no-repeat; background-size: 1px 1px; box-sizing: inherit; color: inherit; text-decoration: none;" target="_blank">Apple VoiceOver (OS X) </a>.</font></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="dcf7" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">I find this tool incredible however some of its use requires third party objects such as refreshable braille table for people who want to read normally instead of listening. (Let's not forget people who are deaf & blind at the same time!)</font></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="2445" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">However I wonder, why is this app not an API? This way every website & app on every device would be fully equipped!</font></p><ul class="" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8); list-style: none none; margin: 0px; padding: 0px;"><li class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix jq jr js ej" data-selectable-paragraph="" id="5a66" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 2em; padding-left: 0px;"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;"><font face="helvetica" size="2">Full content personalisation filters tool:</font></span></li></ul><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="2dbf" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Z5O56sT1poPvQF6YD_27hOzo3vkb_BokCRFEVOvm55pPwQU9h__5EsCfYZBZ7Q6s0eD8nEBjwS63pMN1VRdkLP5_LzdkJf0S8Q3_2FtXXEhoQuKHIy1Qkx7md4Keas9J4XYRryZJ-Q/s1400/4.png" imageanchor="1" style="font-family: helvetica; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="138" data-original-width="1400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Z5O56sT1poPvQF6YD_27hOzo3vkb_BokCRFEVOvm55pPwQU9h__5EsCfYZBZ7Q6s0eD8nEBjwS63pMN1VRdkLP5_LzdkJf0S8Q3_2FtXXEhoQuKHIy1Qkx7md4Keas9J4XYRryZJ-Q/s320/4.png" width="320" /></a></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="2dbf" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">This is a unique case so far, wasn't able to find another example but a certain website implemented an incredible filters tool to allow various profiles of vison impairment to personalise the website to their needs! You can check it out here: <a class="cq ge jt ju jv jw" href="https://www.jobinlive.com/" rel="noopener nofollow" style="background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(41, 41, 41, 1)\" /></svg>"); background-position: 0px calc(1em + 1px); background-repeat: repeat no-repeat; background-size: 1px 1px; box-sizing: inherit; color: inherit; text-decoration: none;" target="_blank">jobinlive.com</a> (see images bellow to find the filters).</font></p><section class="dk dl dm dn do" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8); word-break: break-word; word-wrap: break-word;"><div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"><div class="z ab ac ae af dp ah ai" style="box-sizing: inherit; margin: 0px 64px; max-width: 680px; min-width: 0px; width: 680px;"><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="7f79" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">To sum it up, vision impairment is the hardest disability to provide for, but with the advances of voiceover technologies as well as speech controls, providing for these needs will be easier than ever.</font></p></div></div></section><hr class="kd cl ke kf kg kh ki kj kk kl km kn" style="border: none; box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #080808; margin-top: 30px; text-align: center;" /><section class="dk dl dm dn do" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8); word-break: break-word; word-wrap: break-word;"><div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"><div class="z ab ac ae af dp ah ai" style="box-sizing: inherit; margin: 0px 64px; max-width: 680px; min-width: 0px; width: 680px;"><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="1cc2" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;"><font face="helvetica" size="2">Deaf & Hard of hearing & its needs:</font></span></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="00f9" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">This is one of the easiest disability to provide for:</font></p><ul class="" style="box-sizing: inherit; list-style: none none; margin: 0px; padding: 0px;"><li class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix jq jr js ej" data-selectable-paragraph="" id="2182" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 2em; padding-left: 0px;"><font face="helvetica" size="2"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;">If your website has music, provide a way to signal the user that the website has music as well as an option to turn it off or modify the volume.</span> Today, Google chrome already indicate that sound is coming from a specific page by placing a speaker icon on the website's tab in the navigator.</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="0559" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;">Always provide subtitles on your videos!</span> I cannot stress this enough, but there are still many businesses who overlook the importance of subtitles. Also, subtitles doesn't only serve deaf or hard of hearing people but also people with normal hearing who need to view the video in public spaces and don't have earphones! Many business missed a lot of opportunities to retain users by lacking subtitles on their product's video presentation.</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="2fbe" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;">Provide multiple ways to contact the client service.</span> Many client services today are only reachable by phone and some of them have really long response time regarding emails. Please train your client service to respond faster to emails or provide a live chat or video chat fit for people with hearing disabilities. Another alternative is to have a super detailed FAQ page with a lot of answers for many possible questions.</font></li></ul></div></div></section><hr class="kd cl ke kf kg kh ki kj kk kl km kn" style="border: none; box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #080808; margin-top: 30px; text-align: center;" /><section class="dk dl dm dn do" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8); word-break: break-word; word-wrap: break-word;"><div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"><div class="z ab ac ae af dp ah ai" style="box-sizing: inherit; margin: 0px 64px; max-width: 680px; min-width: 0px; width: 680px;"><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="67ec" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;"><font face="helvetica" size="2">Autism spectrum disorder & its needs:</font></span></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="51e5" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">Like deaf people, people on the autism spectrum are quite easy to design for:</font></p><ul class="" style="box-sizing: inherit; list-style: none none; margin: 0px; padding: 0px;"><li class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix jq jr js ej" data-selectable-paragraph="" id="410c" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 2em; padding-left: 0px;"><font face="helvetica" size="2"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;">Avoid web pages that are too cluttered with elements. </span>Many people with autism have heightened sensory awareness and can be distracted by crowded pages. In this case you should prioritise white spaces.</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="430d" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2">People with autism also tend to prefer <span class="ih jx" style="box-sizing: inherit; font-weight: 700;">consistency and dependability,</span>including web pages with a predictable layout and navigation.</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="7b67" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;">The text should be as simple as possible, while providing definitions for any non-standard terms, such as idioms, jargon, and abbreviations and acronyms. Correct grammar and spelling are important.</span> People with autism can fixate on things they don't understand or loose concentration.</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="afab" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;">Users should have as much control as possible over the site’s behaviour. </span>Avoid time limits on content or automatic refreshes whenever possible. Provide clear instructions and error messages when filling out forms.</font></li></ul><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="febe" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">For more information you can consult this <a class="cq ge jt ju jv jw" href="https://www.boia.org/blog/how-web-accessibility-affects-people-with-autism#:~:text=The%20Importance%20of%20Web%20Accessibility%20for%20People%20with%20Autism&text=However%2C%20web%20accessibility%20is%20no,cognitive%20disabilities%2C%20such%20as%20autism.&text=For%20example%2C%20many%20people%20with,are%20too%20cluttered%20with%20elements." rel="noopener nofollow" style="background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(41, 41, 41, 1)\" /></svg>"); background-position: 0px calc(1em + 1px); background-repeat: repeat no-repeat; background-size: 1px 1px; box-sizing: inherit; color: inherit; text-decoration: none;" target="_blank">site</a>.</font></p></div></div></section><hr class="kd cl ke kf kg kh ki kj kk kl km kn" style="border: none; box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #080808; margin-top: 30px; text-align: center;" /><section class="dk dl dm dn do" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8); word-break: break-word; word-wrap: break-word;"><div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"><div class="z ab ac ae af dp ah ai" style="box-sizing: inherit; margin: 0px 64px; max-width: 680px; min-width: 0px; width: 680px;"><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="d9c6" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;"><font face="helvetica" size="2">Physical disability & its needs:</font></span></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="590e" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">People with physical disabilities requires mainly gesture accommodations on digital products & services.</font></p><ul class="" style="box-sizing: inherit; list-style: none none; margin: 0px; padding: 0px;"><li class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix jq jr js ej" data-selectable-paragraph="" id="3fc7" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 2em; padding-left: 0px;"><font face="helvetica" size="2"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;">Large "tap-able" areas</span> ( CTAs buttons, search bars, tabs etc…), since their motor skills are limited and it requires more effort to aim small targets, it is best to enlarge the most important interactions.</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="e9df" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;">Prioritise most important content first to avoid long scrolling or swiping.</span> Some people use another part of their bodies to scroll (a foot, an elbow, chin, mouth with tactile pen…) to scroll or swipe on their device. Long scrolling could be tiring especially if that person use her chin. Also, provide a way to adjust scrolling sensitivity.</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="140e" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;">Find better alternatives than drop downs to enter informations on forms</span>. While drop-downs are a good way to enter information by taping on the screens, they often requires long scrolling (when you enter your birth date or birth year for example). There are better alternative such as a full calendar. You can refer to this site for more examples: <a class="cq ge jt ju jv jw" href="http://www.fuckdropdowns.com/" rel="noopener nofollow" style="background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(41, 41, 41, 1)\" /></svg>"); background-position: 0px calc(1em + 1px); background-repeat: repeat no-repeat; background-size: 1px 1px; box-sizing: inherit; color: inherit; text-decoration: none;" target="_blank">www.fuckdropdowns.com</a></font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="b343" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;">Prioritise step by step tunnels / processes.</span> By doing so, you reduce scrolling and prioritise taping. for example for subscriptions forms. Doing so, allows to use larger CTAs buttons and raise the possibility to introduce more white spaces.</font></li></ul></div></div></section><section class="dk dl dm dn do" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8); word-break: break-word; word-wrap: break-word;"><div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"><div class="z ab ac ae af dp ah ai" style="box-sizing: inherit; margin: 0px 64px; max-width: 680px; min-width: 0px; width: 680px;"><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="147d" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><span class="ih jx" style="box-sizing: inherit; font-weight: 700;"><font face="helvetica" size="2">Learning disabilities & its needs:</font></span></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="f1ce" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">This might surprise you, but Dyslexia is considered a "Learning disability"and not a "visual impairment"! This is due to the source of dyslexia coming from the way our brain analyses text.</font></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="a030" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">For dyslexic people, there is a <a class="cq ge jt ju jv jw" href="https://www.dyslexiefont.com/en/typeface/" rel="noopener nofollow" style="background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(41, 41, 41, 1)\" /></svg>"); background-position: 0px calc(1em + 1px); background-repeat: repeat no-repeat; background-size: 1px 1px; box-sizing: inherit; color: inherit; text-decoration: none;" target="_blank">particular font</a> that allows them to read with ease. This is the only need this disability has. However the hardest part is to implement it seamlessly on your product. So far the best example i found was with <a class="cq ge jt ju jv jw" href="https://www.jobinlive.com/" rel="noopener nofollow" style="background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(41, 41, 41, 1)\" /></svg>"); background-position: 0px calc(1em + 1px); background-repeat: repeat no-repeat; background-size: 1px 1px; box-sizing: inherit; color: inherit; text-decoration: none;" target="_blank">job in live</a> preference filters (mentioned above).</font></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="7f67" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">However sometimes, larger fonts allow them to read easily but this is not always the case and requires training.</font></p></div></div></section><hr class="kd cl ke kf kg kh ki kj kk kl km kn" style="border: none; box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: #080808; margin-top: 30px; text-align: center;" /><section class="dk dl dm dn do" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8); word-break: break-word; word-wrap: break-word;"><div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"><div class="z ab ac ae af dp ah ai" style="box-sizing: inherit; margin: 0px 64px; max-width: 680px; min-width: 0px; width: 680px;"><h1 class="ko kp as ar kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg ej" data-selectable-paragraph="" id="72e2" style="box-sizing: inherit; color: #292929; letter-spacing: -0.022em; line-height: 40px; margin: 1.25em 0px -0.28em;"><span class="be" style="box-sizing: inherit; font-weight: inherit;"><font face="helvetica" size="2">How to design for everyone the same experience?</font></span></h1><p class="if ig as ih b ii lh ik il li in io lj iq ir lk it iu ll iw ix dk ej" data-selectable-paragraph="" id="e603" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 0.86em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">To me, addressing accessibility on digital products isn't necessarily cramming all possible tools and accommodation on your digital interface! But finding a middle ground that could suit more than half the different profiles as well as adding an option in the footer for profiles that need more personalisation (similar to job in live) .</font></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="d92c" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">Here is a list of "must have" on any digital products to meet more than the average accessibility standards and the disabilities who will be affected by these changes:</font></p><ul class="" style="box-sizing: inherit; list-style: none none; margin: 0px; padding: 0px;"><li class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix jq jr js ej" data-selectable-paragraph="" id="a955" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 2em; padding-left: 0px;"><font face="helvetica" size="2">Larger texts ( Vision impairments, autism, dyslexia)</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="fa93" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2">Larger CTAs (Physical disability, vision impairments)</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="70dc" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2">Step by step tunnel ( Physical disability)</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="d9d8" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2">Subtitles (Deafness, Autism)</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="3f0d" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2">Sound indicators & controls (Deaf, Autism)</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="86c7" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2">More White spaces ( Vision impairments, autism, dyslexia, physical)</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="5375" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2">Usage of sharp & spaced lettering ( Vision impairments, Autism, Dyslexia)</font></li><li class="if ig as ih b ii jy ik il jz in io ka iq ir kb it iu kc iw ix jq jr js ej" data-selectable-paragraph="" id="d451" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; list-style-type: disc; margin-bottom: -0.46em; margin-left: 30px; margin-top: 1.05em; padding-left: 0px;"><font face="helvetica" size="2">Client service Chat or Detailed FAQ ( Deafness, Autism)</font></li></ul><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="25f4" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">You can also check a small UI exercice for the 100 days UI challenge I did where I redesigned the sign up page of an organisation that aims to provide jobs for people with disabilities by taking into considerations all their needs : <a class="cq ge jt ju jv jw" href="https://dribbble.com/shots/13641508-Friendly-sign-up-page-for-people-with-disabilities" rel="noopener nofollow" style="background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(41, 41, 41, 1)\" /></svg>"); background-position: 0px calc(1em + 1px); background-repeat: repeat no-repeat; background-size: 1px 1px; box-sizing: inherit; color: inherit; text-decoration: none;" target="_blank">Friendly sign up page for people with disabilities.</a></font></p></div></div></section><section class="dk dl dm dn do" style="box-sizing: inherit; caret-color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8); word-break: break-word; word-wrap: break-word;"><div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"><div class="z ab ac ae af dp ah ai" style="box-sizing: inherit; margin: 0px 64px; max-width: 680px; min-width: 0px; width: 680px;"><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="6b5c" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">As you can see, designing for multiple types of disability isn't that hard and requires only a little of your attention during the usability testing of your product! Test it with disabled people if you can or refer to this guide!</font></p><p class="if ig as ih b ii ij ik il im in io ip iq ir is it iu iv iw ix dk ej" data-selectable-paragraph="" id="18f5" style="box-sizing: inherit; color: #292929; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><font face="helvetica" size="2">However, this article addresses only a portion of digital accommodation while there is still a lot to be done especially in gaming, AR & new products that requires specific interactions but nothing is impossible!</font></p></div></div></section></div><div style="caret-color: rgba(0, 0, 0, 0.8);"><font color="#292929" face="medium-content-serif-font, Georgia, Cambria, Times New Roman, Times, serif"><span style="font-size: 21px; letter-spacing: -0.06300000101327896px;"><b><br /></b></span></font></div></div></div></section></div>Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-60257105882827200582018-01-09T14:36:00.003+05:302018-01-09T14:36:45.939+05:30Principles of Design<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="background-color: white; box-sizing: border-box; color: #333333; font-family: system-ui, Helvetica, "Helvetica Neue", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 4.21053em; line-height: 1.0875em; margin: 0.6em 0px 0.725em;">
Principles of Design</h1>
<div>
<ol class="principles" style="background-color: white; box-sizing: border-box; color: #333333; font-family: system-ui, Helvetica, "Helvetica Neue", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 19px; margin-bottom: 1.52632em; margin-top: 0em; padding-left: 1em;">
<li id="simplicity" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Simplicity</h2>
<div style="box-sizing: border-box; margin-bottom: 1.52632em; margin-top: 0em; max-width: 40em;">
Simplicity is easily to quote but often ignored in strange ways. Perhaps this is because it is the eye of the beholder.<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />A language which uses fewer basic elements to achieve the same power is simpler.<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />Sometimes simplicity is confused with 'easy to understand". For example, a two-line solution which uses recursion is a pretty simple, even though some people might find it easier to work though a 10-line solution which avoids recursion.<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />In XML, "Processing Instructions", those things which start with "</div>
</li>
<li id="modular-design" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Modular Design</h2>
<div style="box-sizing: border-box; margin-bottom: 1.52632em; margin-top: 0em; max-width: 40em;">
When you design a system, or a language, then if the features can be broken into relatively loosely bound groups of relatively closely bound features, then that division is a good thing to be made a part of the design. This is just good engineering. It means that when you want to change the system, you can with luck in the future change only one part, which will only require you to understand (and test) that part. This will allow other people to independently change other parts at the same time. This is just classic good software design and books have been written about it. The corollary, the TOII is less frequently met.<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />Modular design hinges on the simplicity and abstract nature of the interface definition between the modules. A design in which the insides of each module need to know all about each other is not a modular design but an arbitrary partitioning of the bits.</div>
</li>
<li id="being-part-of-a-modular-design" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Being part of a Modular Design</h2>
<div style="box-sizing: border-box; margin-bottom: 1.52632em; margin-top: 0em; max-width: 40em;">
Its is not only necessary to make sure your own system is designed to be made of modular parts. It is also necessary to realize that your own system, no matter how big and wonderful it seems now, should always be designed to be a part of another larger system.<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />This is often much more difficult than modularity.</div>
</li>
<li id="tolerance" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Tolerance</h2>
<div style="box-sizing: border-box; margin-bottom: 1.52632em; margin-top: 0em; max-width: 40em;">
Be liberal in what you require but conservative in what you do.<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />This is the expression of a principle which applies pretty well in life, (it is a typical UU tenet), and is commonly employed in design across the Internet.<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />Write HTML 4.0-strict. Accept HTML-4.0-Transitional (a superset of strict).<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />This principle can be contentious. When browsers are lax about what they expect, the system works better but also it encourages laxness on the part of web page writers. The principle of tolerance does not blunt the need for a perfectly clear protocol specification which draws a precise distinction between a conformance and non-conformance. The principle of tolerance is no excuse for a product which contravenes a standard.</div>
</li>
<li id="decentralization" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Decentralization</h2>
<div style="box-sizing: border-box; margin-bottom: 1.52632em; margin-top: 0em; max-width: 40em;">
This is a principle of the design of distributed systems, including societies. It points out that any single common point which is involved in any operation tends to limit the way the system scales, and produce a single point of complete failure.<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />Centralization in social systems can apply to concepts, too. For example, if we make a knowledge representation system which requires anyone who uses the concept of "automobile" to use the term "http://www.kr.org/stds/industry/automobile" then we restrict the set of uses of the system to those for whom this particular formulation of what an automobile is works. The Semantic Web must avoid such conceptual bottlenecks just as the Internet avoids such network bottlenecks.</div>
</li>
<li id="test-of-independent-invention" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Test of Independent Invention</h2>
<div style="box-sizing: border-box; margin-bottom: 1.52632em; margin-top: 0em; max-width: 40em;">
If someone else had already invented your system, would theirs work with yours?<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />Does this system have to be the only one of its kind? This simple thought test is described in more detail in "Evolution" in these Design Issues. It is connected to modularity inside-out, designing a system not to be modular in itself, but to be a part of an as-yet unspecified larger system. A critical property here is that the system tries to do one thing well, and leaves other things to other modules. It also has to avoid conceptual or other centralization, as no two modules can claim the need to be the unique center of a larger system.</div>
</li>
<li id="principle-of-least-power" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Principle of Least Power</h2>
<div style="box-sizing: border-box; margin-bottom: 1.52632em; margin-top: 0em; max-width: 40em;">
In choosing computer languages, there are classes of program which range from the plainly descriptive (such as Dublin Core metadata, or the content of most databases, or HTML) though logical languages of limited power (such as access control lists, or conneg content negotiation) which include limited propositional logic, though declarative languages which verge on the Turing Complete (Postscript is, but PDF isn't, I am told) through those which are in fact Turing Complete though one is led not to use them that way (XSLT, SQL) to those which are unashamedly procedural (Java, C).<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />The choice of language is a common design choice. The low power end of the scale is typically simpler to design, implement and use, but the high power end of the scale has all the attraction of being an open-ended hook into which anything can be placed, a door to users bounded only by the imagination of the programmer.<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />Computer Science in the 1960s to 80s spent a lot of effort making languages which were as powerful as possible. Nowadays we have to appreciate the reasons for picking not the most powerful solution but the least powerful. The reason for this is that the less powerful the language, the more you can do with the data stored in that language. If you write it in a simple declarative form, anyone can write a program to analyze it in many ways. The Semantic Web is an attempt, largely, to map large quantities of existing data onto a common language so that the data can be analyzed in ways never dreamed of by its creators. If, for example, a web page with weather data has RDF describing that data, a user can retrieve it as a table, perhaps average it, plot it, deduce things from it in combination with other information. At the other end of the scale is the weather information portrayed by the cunning Java applet. While this might allow a very cool user interface, it cannot be analyzed at all. The search engine finding the page will have no idea of what the data is or what it is about. This the only way to find out what a Java applet means is to set it running in front of a person.<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />I hope that is a good enough explanation of this principle. There are millions of examples of the choice. I chose HTML not to be a programming language because I wanted different programs to do different things with it, present it differently, extract tables of contents, index it, and so on.</div>
</li>
</ol>
</div>
</div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-38944279290809211662018-01-08T16:50:00.002+05:302018-01-08T16:50:52.019+05:30The Ten Principles of Interaction Design<div dir="ltr" style="text-align: left;" trbidi="on">
<ol class="principles" style="background-color: white; box-sizing: border-box; color: #333333; font-family: system-ui, Helvetica, "Helvetica Neue", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 19px; margin-bottom: 1.52632em; margin-top: 0em; padding-left: 1em;">
<li id="equitable-be-welcoming" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Equitable: Be welcoming.</h2>
</li>
<li id="flexible-provide-options" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Flexible: Provide options.</h2>
</li>
<li id="straightforward-be-obvious-and-not-ambiguous" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Straightforward: Be obvious and not ambiguous.</h2>
</li>
<li id="perceptible-don-t-assume-anything" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Perceptible: Don’t assume anything.</h2>
</li>
<li id="informative-be-timely-predictable-uncomplicated-and-precise" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Informative: Be timely, predictable, uncomplicated and precise.</h2>
</li>
<li id="preventative-provide-easy-to-follow-instructions-and-gently-guide-users" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Preventative: Provide easy to follow instructions and gently guide users.</h2>
</li>
<li id="tolerant-handle-errors-respectfully" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Tolerant: Handle errors respectfully.</h2>
</li>
<li id="effortless-don-t-make-demands-or-place-restrictions-on-your-users" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Effortless: Don’t make demands or place restrictions on your users.</h2>
</li>
<li id="accommodating-be-approachable-uncluttered-and-give-people-room-to-manoeuvre" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Accommodating: Be approachable, uncluttered and give people room to manoeuvre.</h2>
</li>
<li id="consistent-follow-standards-guidelines-conventions-and-best-practices" style="box-sizing: border-box;"><h2 style="box-sizing: border-box; font-size: 2.63158em; line-height: 1.16em; margin-bottom: 0.58em; margin-top: 0.58em;">
Consistent: Follow standards, guidelines, conventions and best practices.</h2>
</li>
</ol>
</div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-20899653616296829752017-08-17T15:04:00.000+05:302017-08-17T15:04:06.043+05:30Icon Hollow vs. Solid<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">In UI design, what scenario should hollow icons and solid icons be applied to? Some believe that the hollow icons are visually more complex than the solid icons, while the solid icons are in fact more recognizable.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif; margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="900" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDuCkamKA2h8iT3eHVoXrI-KDLqTVsddg9FfL4f8p3sXt7OITS2biUAGglaniiMTmJV0em9sGs4C-InB15pmlVSVmhV1X_9wxCh7XxoWyijHG_-yWXvHjzzeQ-W2PG3eBilJ2EUsBIKA/s320/1.png" width="320" /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
</div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<br /></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">The opinions of designers on this topic varies. Some designers think that the hollow icons is made by lines, as a result of which, they are more difficult to recognize. However, they gives users a feeling of ease and exquisiteness. Others deem that the recognizability has nothing to do with this topic, but depends on the shape, color and other factors of the icon.</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<h2 style="background-color: white; list-style: none; margin: 0px; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif; font-size: small;">1. The function of icons.</span></h2>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, "Times New Roman", serif;">First, this topic focuses on a specific type of icons: functional icon. Let’s take a look at the basic functions of this type of </span><span style="color: #444444; font-family: Georgia, "Times New Roman", serif;">icons</span><span style="color: #444444; font-family: Georgia, "Times New Roman", serif;">.</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, "Times New Roman", serif;">Functional icons are common in life, usually seen in the airport, stations, hotels, shopping malls and other large public places, providing guidance to people, as shown below:</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif; margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="900" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC4GXRaoRY3zEk0JWRfTF6Nbjb-Ic3fvLy1Uf4T4gXGG808vtBFNnvHUVI6DZMb77blbCx5842etwAQrXkoBdKdZzp3DHTuQRSdo6RLLE-fX6ChVDdn3k1hsaG8cCenMN2sU7v9xENGg/s400/2.png" width="400" /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
</div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">In UI design, icons are one of the most common elements. The use of the icon originated in the Macintosh 1.0, even in the earlier Xerox graphical interface began. They are often given functions like action, description and so on.</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif; margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="900" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM8kTICw42hGNclmTP1jlm3eaHdQPtLL_Si8ugdciochY-I4ySDfHzOa9ZWZSekU0Hs3QdBeAVh9cHDEfe745Yd96OFyYV-OyoBHCtHv_T5XbJyY-S4rRPLDsxqAQ0WeoXLbfk4luu1w/s640/3.png" width="640" /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
</div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">Since the release of the smart phone system so far, the style of graphical interface has completed the transformation from the material design to the flat design evolution. With the introduction of ios7, almost all of the icons in Apps are becoming more and more flat and slim. The reason of it is that the over-eye-catching icons usually reduce the readability of the contents.</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><strong>In general, the most basic function of the icons is to convey the information quickly.</strong><strong></strong></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<strong><span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></strong></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">In today's design work, the matching of icons and texts has reached a point of obsession. In fact, it is enough to express some abstract concepts with text. Putting an icon aside actually helps nothing about making users build connections between the icon and its function.</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif; margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="900" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzanyZSJR2KIZ6R1k2f4waln-NI9qfz4fOyLcnYipRO0zx1AJNz8FE4qAF31pB-DbIVWjCeyQqSapy4ccyAfJ6NDlQNsRPDtaYXREJAj2OSy79u_LVn78HEPS54-y1xJs3524pehPFUQ/s640/4.png" width="640" /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
</div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">Nevertheless, icons are still relatively important. The function of icons is far more than“telling users the meaning at the first sight”. In addition, there are also many important features like immediate locating, content layer distinguishing and interface rhythm increasing.</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">Take a prototype example on Mockplus for example, if you just see the icons without the texts, the meaning of them is quite obscure. However, the functions of icons are more than that. The icons in the prototype is solid. The icons and the text together form a unity, in which the icons plays a role of alignment. If you remove the icons, the information in the list will be indistinguishable and there will be a visual confusion. Users will face more difficulty when focusing on the options on a line.</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<h2 style="background-color: white; list-style: none; margin: 0px; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif; font-size: small;">2. Are solid icons more recognizable?</span></h2>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">Given that you were summoned by the call of nature and rushed into the big mall to find the rest room. Solid icons or hollow icons? Which can be recognized more quickly?</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif; margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="900" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdX2GhIiG0JTUtVW6nrC4vPgvTb0dik3of1W3n_ZVBb75xjVOVce0v4NWwXWnbWGd_5P5hDqBbdN9_QvODvmpkgLPe6O71XwN6VpbxmYw9NHpVQtBoOHhyXy85lP_UjTEIPqXZp7QLgQ/s640/5.png" width="640" /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
</div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">Solid icons are indeed more recognizable in the perspective of visual attraction. The following picture shows the influence of the elements that are attractive to the human eye (sorted from left to right):<span class="redactor-invisible-space"><br /></span></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span class="redactor-invisible-space"><span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif; margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="900" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbuojUhxquiDf_uqbfwt441F5kCJ_vzDJescyH3Hy0u3wXGm7k7Y0DMOanJHKvIE9cUOkkXpMGtVFkNN3nX2DGP-xlgwO-1tprxdJK7NI7yKf5iALwzbmhV6pWqwQ4yJ1HkEDtCeyZ8A/s400/6.png" width="400" /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span class="redactor-invisible-space"></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span class="redactor-invisible-space"><span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">Hollow icons attract the eye by their shapes while the solid ones do the same by their color. As a result, hollow icons are more difficult to recognize.</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span class="redactor-invisible-space"><span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><span class="redactor-invisible-space"></span></span></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">As early as the iOS7 system was introduced, there have been some discussion about this topic. Curt Arledge, an experienced designer who graduated from Viget, wrote an APP specifically, and did 1260 recognition tests for solid and hollow icons [1], look at the test results:</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif; margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="172" data-original-width="900" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi93x7hRwWDh_lysDd2GHOIeZKXUTpHLsrI40jiyhdQCrTR93t31d5ykZmtAS1311neYlHM447Us6vnxj5Ma7AiFLAcc2INuKAUK8FoyGbKf-bltTyXEgNsBWbdVHdZ_hYNHZk0y-_ANQ/s640/7.png" width="640" /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">The results found that the difference of the speed of recognizing these two types of icons is just 0.1 seconds.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif; margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="186" data-original-width="897" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3GNX6Nl1Mq-ofzmZ7F9HLLe_CBP3Bpo3NOutdgQRyTaDkN96UDZfOOeBp18pLVlMHUFZirz9YObjT3bh4gkAGup6spfyju9byaS_hYgvwL2S0iCQ4ogw96my6eNvfLtQg0OpYa867IQ/s640/8.png" width="640" /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">In the first group, the solid icons won. These icons are derived from life, the icons kept their original meanings. The recognition speed depends on how much the color and shape attract the eyes. So the solid icons are easier to recognize.</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiADawUarlu33baSu-pX-1QpqNeI-11USgoS3_83e_SFQM3yq788ABMG_wP4l8gBcjNitmXO08SHs5YIGRclZQWY5Q-ZVsxEo4GH5f3iqhZLCjqHrFpczu7r9HD5tSGJ2595z9k5EUTVg/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="139" data-original-width="902" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiADawUarlu33baSu-pX-1QpqNeI-11USgoS3_83e_SFQM3yq788ABMG_wP4l8gBcjNitmXO08SHs5YIGRclZQWY5Q-ZVsxEo4GH5f3iqhZLCjqHrFpczu7r9HD5tSGJ2595z9k5EUTVg/s640/9.png" width="640" /></a></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">It is worth noting that the three hollow icons are more recognizable in the second group.</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">These three icons are abstracted from subjects in real life, among which the speech bubble does not exists at all. Designers create this icon in the graphical interface and endow it with a meaning; The forms of garbage bin and keys are various in life, so the icons of them are abstract summaries of them. In this case, the shape of the icons allows users to quickly identify the meaning of the icons, while the colors has become a factor of interference.</span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="background-color: white; line-height: 28.8px; list-style: none; padding: 0px; position: relative;">
<span style="color: #444444; font-family: Georgia, Times New Roman, serif;">So, for icons expressing the same meaning of the original subjects, solid icons are more recognizable. For icons that endowed with abstract meanings, hollow icons are better.</span></div>
</div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-39333999017635703942017-07-21T18:11:00.000+05:302017-07-21T18:11:07.538+05:30A List of User Experience Goals That UX Designers Should Set<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">User experience design plays an important role in product design process. But what is good user experience on earth? Is there any criterion? The following 5 user experience goals, listed in a logical order, may help you to find the right direction of user experience design ASAP and make you an excellent UX designer.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Goal 1: “I got what I need”</span></h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">To give users what they need is the first goal of user experience design. Before using a product, people are mostly concerned about “whether it is useful?” “Will this product solve my problems?” So a product should meet the functional demands of users first (not only those existed demands, but also potential ones). Doing user research is a good way to find out users’ demands, but objectively, it’s hard to measure users’ needs precisely, even if it was huge company which has advanced user survey technologies.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">For example, Facebook at the beginning didn’t take “making friends with strangers (say, a friend’s friend)” seriously as they believed that people only have curiosities on their surroundings; social network is essentially “a game among acquaintances”. However the data show that most of users like to expand their circles by adding strangers as their friends. Now social platform also contributes a lot to companies and brands who want more influence online. They put money and energy on operating an official page to promote their products. All of these are unexpected demands for the early designers. Thus, collecting users’ feedback constantly and make use of data or other materials to follow your users’ activities is also a key to meet users’ demands. If UX designers don’t give users what they want, the users will give a shit.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiNmqNS6FPrdIqACQSD4TJxUanLQj0QDAjTqxRNQt7yZZT6mgrLaYncU5_HE2shCKm3mjW-ZL7h8PYXTTUlUQcbQSDsMHyL13C9pueWEVqjEndxhikH6ZhTo18MF0pMw2_fTc3wN3jDw/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="900" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiNmqNS6FPrdIqACQSD4TJxUanLQj0QDAjTqxRNQt7yZZT6mgrLaYncU5_HE2shCKm3mjW-ZL7h8PYXTTUlUQcbQSDsMHyL13C9pueWEVqjEndxhikH6ZhTo18MF0pMw2_fTc3wN3jDw/s400/1.jpg" width="400" /></a></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Goal 2: “Don’t make me think”</span></h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">“Will I get what I want in a most simple, direct and quick way?” It would be better if you “Don’t make me think”.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">The top-download games in app store are always those like “Don't Tap the White Tile”, which people can play without brains. This shows the laziness nature of human beings. But laziness is also an important drive of technology development. As a UX designer, we have no reason to go against it unless we want to make products that are “anti-human”.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"></span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">How to design to give users what they want in the easiest way? First UX designers should be a mastery of the user stories & scenario of products. Which are important things that users pay much attention to? Which are secondary? How to simplify the operations by taking advantage of users’ habits? As to user interface, whether the flat design method should be adopted to enable users to get most information at the first sight. Besides, the usability of products also depends on the design tools you choose. A complicated-to-use prototype/wireframe tool is a bad design itself, so how can we make good UI or product prototype with it?</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRckU9GGG3qQrY_sP8VU77pWJr4BWSGOtRQDp8WbC0MSXu8uGSc2S9J8U9quhtDnvMnHmdXV8GLZd4Axu8OS_eaaPjfBpaOO43Fyq0Pw8WKy-0OVA8ci6BrnpfH-Z1CHoh9TA-1ULNlg/s1600/2.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="900" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRckU9GGG3qQrY_sP8VU77pWJr4BWSGOtRQDp8WbC0MSXu8uGSc2S9J8U9quhtDnvMnHmdXV8GLZd4Axu8OS_eaaPjfBpaOO43Fyq0Pw8WKy-0OVA8ci6BrnpfH-Z1CHoh9TA-1ULNlg/s400/2.jpeg" width="400" /></a></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<h3 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Goal 3: “I really enjoy using it”</span></h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Many products have similar functions, which can all meet the users’ needs to some extent. But only few of them are favored by users, why? As a music lover, I go to a concert at least once a month. Among these concerts of any scale, there are some which thrilled me from start to finish. It seems that the design of a music concert has nothing to do with product design, but as I have been immerging in design circle for many years I gradually found that an exciting concert is just like a product offering good user experience, both of them give you the right thing at the right time.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"></span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">At an evening dinner, the starter is always delicate but of low volume. Gradually, under the influence of some spirits, the main course was served, at this moment the light is warmest and the atmosphere is the best. The ending part is usually made easy. This is a very good example to explain that “UX Designers should have a sense of rhythm (of product)”. When designing video player software, how many “ss” should the “black screen” last to draw the users’ attention, but never make them feel impatient? Why some social platforms only allow its users to access more functions after a period of time? Those are all questions that user experience designers should concern about.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhrF3Q2PwfEHX9nifzAWuXpbwUS6qA-aJkBFIDGaS1pLy8KfE5aPnaokBPtqn6t7hkomdmzQzeIcY8yaaDZqO6A-0xbAoBmBP2bgh02tFY2y4VGzo5HBl2DebO5NJWzLEkeF21WzotKQ/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="900" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhrF3Q2PwfEHX9nifzAWuXpbwUS6qA-aJkBFIDGaS1pLy8KfE5aPnaokBPtqn6t7hkomdmzQzeIcY8yaaDZqO6A-0xbAoBmBP2bgh02tFY2y4VGzo5HBl2DebO5NJWzLEkeF21WzotKQ/s400/3.jpg" width="400" /></a></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<br />
<h3 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Goal 4: Habit is a second nature</span></h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">“Whether the product is attractive enough for me to use it for a long term?”, and even “becomes part of my life” and “makes me addicted to it”.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">In the article “UX/UI Designer Skills Valued by Facebook” I mentioned that one important reason that Facebook became a huge social platform with over 200 million users is that FB knows the mental & psychological needs of users: people win others’ attention on Facebook, which they didn’t get in real life. “Helping people to build a strong connection with external world; enabling them to follow and be followed, these are what a social platform was born for.” A functionally powerful product will no doubt be favored by people. But a product which forms a new habit has immeasurable potential. Electric light, mobile phones, new transportations; Wechat, Whatsapp, these are all among the latter.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Goal 5: Make users your promoters</span></h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">“Whether the product is good enough to motivate me to become one of its promoters?”</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"></span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">If a designer set the above 4 user experience goals when designing a product, he would be an excellent designer. The last goal, as far as I can see, is the inherent property of an excellent design: to mobilize its users. As we all know, users are the best spokesmen of your products. Companies may seek help from all kinds of resources to promote their products: KOL, famous blogger, web celebrities. However, none of them is as powerful as users. You may ask: why does product promotion has something to do with designers? If UX designers can build a relationship between the users and potential users, for example, put a “sharing on Twitter” button on the right place, there might be more people will join in (this is a method of most basic level). For another example, users need to cooperate with others when using the product (like game products). In short, to mobilize your users and make them your promoters is also an important user experience goals that good UX designers should set.</span></div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-21060435733710879812017-07-20T12:59:00.002+05:302017-07-20T12:59:41.174+05:304 Common UX Challenges and How to Find Them<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">User Experience design is all about getting people to use our products. We’re not so much concerned with people buying our products, that’s sales and marketing’s focus, we’re concerned with the way that people adopt our products into their lives. We want to create lasting relationships that create brand loyalty, repeat business and word-of-mouth referrals and recommendations.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">There are four areas of user perception that can encourage or discourage adoption of our products. Let’s take a look at each of them and how we might be able to examine them in our UX research:</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Perception of Value</span></h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">In order for customers to adopt a product; they need to see the value in that product. Products can deliver positive impacts but if they’re not seen to deliver positive impacts; the perception of value is low or non-existent.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">It’s also possible to produce products without such an impact that customer’s perceive to have value anyway. The entire homeopathic health industry relies on this to generate billions in revenue each year. Sugar pills are sugar pills and their benefits are pure placebo (there are much cheaper ways to buy sugar than through a homeopathic practitioner) but customers of homeopaths perceive a benefit and thus keep buying that sugar at incredibly inflated prices.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">We begin examining the perception of value with the product’s value proposition. If the value cannot be clearly articulated in house – it seems unlikely that it’s going to be easy for a user to articulate the value. We can test that by seeing if, after reviewing our marketing material or website, the potential user can articular the value.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Then we need to examine two other perceptions – the first is the question of utility; “Is this product useful to you?” but we should also remember that people buy plenty of things that aren’t useful so much as they are enjoyable (think computer games or novelty products) and we should ask; “Is this product fun to use?” too.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ZM8pmZf3PkDJkIXnRcNCscDcWiuICNIlsov1Ld2YX22UN8PXppeqJdoS92VoY431otxNT-D_9W-66Ye0epiWGF75ZmodHxtladSyVs5pTnR9WfX7Laktam2VOX4sy1pxn-NrwOTdlw/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="428" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ZM8pmZf3PkDJkIXnRcNCscDcWiuICNIlsov1Ld2YX22UN8PXppeqJdoS92VoY431otxNT-D_9W-66Ye0epiWGF75ZmodHxtladSyVs5pTnR9WfX7Laktam2VOX4sy1pxn-NrwOTdlw/s1600/1.jpg" /></a></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Level of Certainty</span></h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">We move on from perception of value to the level of certainty that our product delivers on its perceived value. Is it as fun or as useful as it appears to be at first glance? More importantly do customers believe that you can deliver on that perceived value before they even touch the product?</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMAXX_kzKmYdthVhSrA-faSUtkwkqACQezfZAeQQ8zaOB_C_BWNBn2Uq5LAlPwYcKZau2jbCOqv8p4-yWx_FxYEqPQEu2wdak9_EyN8D2WUbr_GYm03CCoSvc3idlhD9Ys0-kLgrhkOQ/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="185" data-original-width="566" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMAXX_kzKmYdthVhSrA-faSUtkwkqACQezfZAeQQ8zaOB_C_BWNBn2Uq5LAlPwYcKZau2jbCOqv8p4-yWx_FxYEqPQEu2wdak9_EyN8D2WUbr_GYm03CCoSvc3idlhD9Ys0-kLgrhkOQ/s1600/2.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">New technologies can often find themselves caught between a rock and a hard place. Driverless cars, which are currently in development, may sound fantastic but the true test of their staying power will be – do people trust cars to drive them from A to B in a safe and reliable manner?</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">If the level of certainty when responding to that question is low… there’s a major mountain to climb to convince people to become users in the first place. A lack of user confidence in the product is going to be a huge barrier to their adopting that product.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">For driverless cars that certainty may come from the power of the brands developing them – people tend to trust names like Google because they see them as capable of delivering technologically advanced solutions, they might be less trusting if the driverless car came from a brand new startup with no track record in the market.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">You can measure the level of certainty by asking your users what they think the chances of a successful product are, or what problems they anticipate with a product.</span><br />
<h2 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Is the Product Accessible?</span></h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Accessibility is a measure of two separate components. The first is convenience, how convenient is the product to use? Why are bicycles so unpopular for short journeys – when it’s clear they’re so easy to use for this purpose? Well, there’s the weather, the lack of bicycle parking in many places, the behaviour of other drivers, the likelihood of theft, etc. it turns out that while bicycles have usability in spades – they often lack convenience.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">The second component is usability and that’s something that most UX designers will be intimately familiar with. Usability is a part of UX rather than the whole of it but we all know that if a product is hard to use – adoption is hard to win.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">It’s important to examine both convenience and usability during testing and to measure them as early as possible. An inaccessible product won’t find it easy to keep users in the long-term.</span><br />
<h3 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Does the Product Engender Trust?</span></h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Users are concerned for their safety, their privacy, their financial security, etc. If your product raises concerns – you need to work out how to address these with your users in order to get them to adopt the product. You cannot ignore the need for users to trust a service, you need to bridge the gap.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">For example, internet banking still has large amounts of resistance, despite its convenience because in many places – people aren’t convinced of the security aspects of the system. They may not have their own computers at home and working in an internet café can leave someone quite apprehensive about accessing their financial accounts.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Or imagine that you want to use geo-locations in a mobile application. Will you users be OK with you sharing that data with others? If not, how can you ensure that data is held securely without impinging on functionality?</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">There are many ways that a user may not trust a product and the UX researcher’s job is to work out where these pain points lay.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">You may also want to ensure that you under-promise and over-deliver in your marketing materials rather than vice-versa. There’s no quicker way to kill someone’s trust than to promise something that seems “too good to be true”. Again you can test marketing collateral with users before you put it out in the wider world.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYj0w0vdvbi8TrNkip0dr3IZ_Jxw_q1m7iji0xjWuE4jCt_HDpa4dYqfOk1-hnA9gYH_mBf1VDD3XMp-sq_GDoWst1ln-wGsRI76JuBDl9kGYN6fJkXg7lYciEDm2J6U8gXQ-vrpC0HQ/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="640" data-original-width="480" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYj0w0vdvbi8TrNkip0dr3IZ_Jxw_q1m7iji0xjWuE4jCt_HDpa4dYqfOk1-hnA9gYH_mBf1VDD3XMp-sq_GDoWst1ln-wGsRI76JuBDl9kGYN6fJkXg7lYciEDm2J6U8gXQ-vrpC0HQ/s320/3.jpg" width="240" /></a></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<h3 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Summary</span></h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Ensuring that users adopt our products for long-term use is part of designing a great user experience. The four areas discussed above are critical for this. Fortunately, they’re all things we can examine in our research and resolve before we go to market – as long as we’re looking for them in the first place.</span></div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-12832616492412489892016-11-24T16:38:00.002+05:302017-07-20T13:10:48.663+05:305 IoT innovations that can’t advance without wireless power<div dir="ltr" style="text-align: left;" trbidi="on">
Until wireless power goes mainstream, the Internet of Things (IoT) will fail to reach its potential. And by “wireless power,” I don’t mean the power pads that masquerade as wireless chargers. True wireless power eliminates the need for all power cables and contact. It resembles Wi-Fi in its ubiquity, safety, and range.<br />
<br />
Essentially, there’s a conflict between the proliferation of IoT and our ability to power it. In five areas of innovation, wireless power could enable dozens of technologies that are otherwise unfeasible:<br />
<br />
1. Home<br />
Question: how many devices in your home require power? Count up everything that has batteries or power cables.<br />
<br />
At my home, I count 130 devices, 90 of which are sensors in the security system. For comparison, as a kid in the 1970s, my home had two such devices: a transistor radio and flashlight. As innovators put computing in every “dumb” device, from , my 130 count is going to skyrocket.<br />
<br />
That sounds like good news for companies that make surge protector power strips and batteries. In reality, it’s bad news for IoT innovators because consumers won’t bother with powering 500 devices – unless they can do it wirelessly, with zero effort.<br />
<br />
2. Industrial<br />
In a modern factory, loss of power to a single sensor can shut down the plant. Currently, factories power thousands of sensors with wires, but this has two shortcomings.<br />
<br />
First, industrial-grade sensors cost roughly $50 while the wiring job can easily cost $1,000. Thus, installing and reconfiguring sensors is a heavy expense. Second, wired sensors don’t have backup power. If the wire fails, the sensor fails. These sensors are considered “wireless” since they communicate wirelessly, but nevertheless, they still need wired power today.<br />
<br />
Wireless power would slash the installation cost and introduce redundancy. You can put two wireless power transmitters in range of each sensor, and if one transmitter fails, the sensor could switch to the backup. The cost of the transmitters would be a fraction of the cost of the wiring that’s installed today.<br />
<br />
3. Retail<br />
Today, the aisles in most stores are low-tech. Employees manually change paper price tags and post specials. In the few stores that use digital price tags, you can only modify them once or twice a day for one year before the battery dies (and again, wires would be impractical for a constantly shifting product positioning in the store).<br />
<br />
Wireless power solves the problem. IoT price tags could automatically change as often as is optimal, and the staff wouldn’t need to constantly replace batteries as price tags black out. On wirelessly powered price tag screens, retailers could offer personalized ads and deals to create a new revenue stream.<br />
<br />
4. Healthcare<br />
Hospitals are starting to swap old-school stethoscopes and thermometers for mobile, IoT equivalents. Frankly, smart stethoscopes can tell doctors more about your heart than ears and intuition, and such devices can automatically transfer readings to patient records. Handheld ultrasound scanners, too, can capture information that used to require more time and expense.<br />
<br />
But, if IoT medical devices can conk out, their use is limited. Healthcare organizations can’t risk leaving their staff underequipped to treat patients. Wireless power would eliminate that risk.<br />
<br />
5. Wearables<br />
Some entrepreneurs would like to create IoT wardrobes. Watches, shirts, hats, and socks are just the beginning. Today though, all wearables need to be charged with a power cord. Charging a single IoT smartwatch is one thing. Charging 50 wearables without wireless power is unviable.<br />
<br />
This is especially true if people use wearables for health purposes. Most diabetics manually draw blood to test their glucose levels and then use a needle and syringe to inject insulin. While it would nice to switch to an IoT glucose monitor and automated insulin pump, who would risk their life on AAs or a rechargeable battery?</div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-16305537417465242402016-11-24T16:38:00.001+05:302016-11-24T16:39:14.481+05:305 IoT innovations that can’t advance without wireless power<div dir="ltr" style="text-align: left;" trbidi="on">
Until wireless power goes mainstream, the Internet of Things (IoT) will fail to reach its potential. And by “wireless power,” I don’t mean the power pads that masquerade as wireless chargers. True wireless power eliminates the need for all power cables and contact. It resembles Wi-Fi in its ubiquity, safety, and range.<br />
<br />
Essentially, there’s a conflict between the proliferation of IoT and our ability to power it. In five areas of innovation, wireless power could enable dozens of technologies that are otherwise unfeasible:<br />
<br />
1. Home<br />
Question: how many devices in your home require power? Count up everything that has batteries or power cables.<br />
<br />
At my home, I count 130 devices, 90 of which are sensors in the security system. For comparison, as a kid in the 1970s, my home had two such devices: a transistor radio and flashlight. As innovators put computing in every “dumb” device, from , my 130 count is going to skyrocket.<br />
<br />
That sounds like good news for companies that make surge protector power strips and batteries. In reality, it’s bad news for IoT innovators because consumers won’t bother with powering 500 devices – unless they can do it wirelessly, with zero effort.<br />
<br />
2. Industrial<br />
In a modern factory, loss of power to a single sensor can shut down the plant. Currently, factories power thousands of sensors with wires, but this has two shortcomings.<br />
<br />
First, industrial-grade sensors cost roughly $50 while the wiring job can easily cost $1,000. Thus, installing and reconfiguring sensors is a heavy expense. Second, wired sensors don’t have backup power. If the wire fails, the sensor fails. These sensors are considered “wireless” since they communicate wirelessly, but nevertheless, they still need wired power today.<br />
<br />
Wireless power would slash the installation cost and introduce redundancy. You can put two wireless power transmitters in range of each sensor, and if one transmitter fails, the sensor could switch to the backup. The cost of the transmitters would be a fraction of the cost of the wiring that’s installed today.<br />
<br />
3. Retail<br />
Today, the aisles in most stores are low-tech. Employees manually change paper price tags and post specials. In the few stores that use digital price tags, you can only modify them once or twice a day for one year before the battery dies (and again, wires would be impractical for a constantly shifting product positioning in the store).<br />
<br />
Wireless power solves the problem. IoT price tags could automatically change as often as is optimal, and the staff wouldn’t need to constantly replace batteries as price tags black out. On wirelessly powered price tag screens, retailers could offer personalized ads and deals to create a new revenue stream.<br />
<br />
4. Healthcare<br />
Hospitals are starting to swap old-school stethoscopes and thermometers for mobile, IoT equivalents. Frankly, smart stethoscopes can tell doctors more about your heart than ears and intuition, and such devices can automatically transfer readings to patient records. Handheld ultrasound scanners, too, can capture information that used to require more time and expense.<br />
<br />
But, if IoT medical devices can conk out, their use is limited. Healthcare organizations can’t risk leaving their staff underequipped to treat patients. Wireless power would eliminate that risk.<br />
<br />
5. Wearables<br />
Some entrepreneurs would like to create IoT wardrobes. Watches, shirts, hats, and socks are just the beginning. Today though, all wearables need to be charged with a power cord. Charging a single IoT smartwatch is one thing. Charging 50 wearables without wireless power is unviable.<br />
<br />
This is especially true if people use wearables for health purposes. Most diabetics manually draw blood to test their glucose levels and then use a needle and syringe to inject insulin. While it would nice to switch to an IoT glucose monitor and automated insulin pump, who would risk their life on AAs or a rechargeable battery?</div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-23799876787957155192016-06-27T20:28:00.002+05:302016-06-27T20:28:49.230+05:30UX vs CX: Which is more important?<div dir="ltr" style="text-align: left;" trbidi="on">
You’ve probably heard the terms UX and CX, and how they’re the key to your company’s success. Many still aren’t clear, however about what the difference is between the two concepts. Perhaps you’re under the impression that only one of them is worth investing in, or that they’re both the same thing. Do you need to put more focus on one over the other? It’s an important question to ask – I mean, why waste resources on something irrelevant? For this reason, we wanted to give you a clear overview of the concepts and help you determine which is more important: UX or CX?<br />
<br />
<h3 style="text-align: left;">
What’s the Difference?</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmTFEXdTrnWKpikkNLCBFBl6Zy_0jlX-u4YH_LJDlGiUHGtY1i9LKXBz8gQwS-_FaFzFGe0mz1a1ZuzH3Okd0YuAtJl02f3bv4gukZEJ-gET2CRZUWuCdbL4JTPgK_Ek0IeWUt6A87jw/s1600/1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmTFEXdTrnWKpikkNLCBFBl6Zy_0jlX-u4YH_LJDlGiUHGtY1i9LKXBz8gQwS-_FaFzFGe0mz1a1ZuzH3Okd0YuAtJl02f3bv4gukZEJ-gET2CRZUWuCdbL4JTPgK_Ek0IeWUt6A87jw/s400/1.png" width="400" /></a></div>
<br />
<br />
<br />
While UX and CX are very similar concepts, the terms are not interchangeable. UX is a specific component within CX that concerns the usability of your product or site. CX, on the other hand encompasses the end-to-end customer interactions and deals with many touch points including web, mobile, brochures, and human contact (support and service). <br />
<br />
<br />
<h3 style="text-align: left;">
Why is UX Important?<br /></h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJung2V-nrBVaO6YcsNAFz4d1U8952wObVtUu8I4aNkIudnMD7ybNAKl7v5xGEYcXNpDEpvMmM1ztNj2XYg9p0WHdDw25D_d58kW4mvQjT-Y_Ekscf2DlZ1W2yfAfW_lppe3gHcezQVQ/s1600/2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJung2V-nrBVaO6YcsNAFz4d1U8952wObVtUu8I4aNkIudnMD7ybNAKl7v5xGEYcXNpDEpvMmM1ztNj2XYg9p0WHdDw25D_d58kW4mvQjT-Y_Ekscf2DlZ1W2yfAfW_lppe3gHcezQVQ/s200/2.png" width="200" /></a>A good user experience gives your customers the ability to find information quickly and easily. It is the totality of your end users’ perceptions while they interact with your product or service. This includes the effectiveness, efficiency, emotional satisfaction, and the quality of the relationship with the organisation that provides the product or service.<br />
UX is important for any digital product. No matter how beautifully designed your site may be, if your users don’t know how to navigate and find what they’re looking for, they simply won’t come back. By designing an experience rich with interactions that’s simple and easy to use, your users will have a positive experience that’ll keep them coming back. Users decide within only a few seconds whether your site or app is worth their time and this is where UX becomes vital.<br />
<br />
<h3 style="text-align: left;">
Why is CX Important?</h3>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpxJfxVwQURtKW3TmAMoUfkAW0UYlw8bWIacBF4EHK0BvmZJuhjWL5XYFX-GZcpwgoJ19LET1L4NCXdfwIDizRhlLfClfFzREUZuTgKV9AlQ_OLnLTPwnGuyAGHgCJZUkBxz6DozzcyQ/s1600/3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpxJfxVwQURtKW3TmAMoUfkAW0UYlw8bWIacBF4EHK0BvmZJuhjWL5XYFX-GZcpwgoJ19LET1L4NCXdfwIDizRhlLfClfFzREUZuTgKV9AlQ_OLnLTPwnGuyAGHgCJZUkBxz6DozzcyQ/s200/3.png" width="200" /></a></div>
Customer experience involves designing and reacting to a customer’s interactions in order to either meet or exceed their expectations. In doing so, the objective is to increase customer satisfaction, loyalty, and advocacy. This includes your customer’s ability to have a helpful, pleasant, and positive total experience with your organization.<br />
CX is important because whether it’s positive or negative influences the likelihood that your customers will round off or repeat transactions with your company. This is especially important as your customers are tech savvy and have the power to choose between a multitude of competitors. Differentiating your product or service by offering a great CX could not only help increase your revenue and sales, but also help you gain competitive advantage. After all, studies have shown that 86% of your customers would be willing to pay more for a better CX.<br />
<br />
<h3 style="text-align: left;">
To Wrap Up</h3>
User Experience is the foundation of a good customer experience. These fields are very much intertwined and one isn’t necessarily more ‘important’ than the other. UX and CX professionals have complementary skills, but currently are not working as closely together as they should be. UX doesn’t always deal with the customer specifically but with the product. Whereas, CX addresses the multichannel interactions that a user has with your company and ought to be consistent at each touchpoint, both online and offline.<br />
So, it’s possible to have many customers who are generally unhappy with your UX. Similarly you can have the best UX possible but then your CX might be terrible. At the end of the day, the most important thing is that you put your customer (or user) first. It’s all about finding the balance that works for your business, neither areas are necessarily more important than the other (not yet anyway).</div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-33578087633067776892015-12-04T19:20:00.000+05:302015-12-04T19:20:08.321+05:304 Common UX Challenges and How to Find Them<div dir="ltr" style="text-align: left;" trbidi="on">
<h4 style="text-align: left;">
User Experience design is all about getting people to use our products. We’re not so much concerned with people buying our products, that’s sales and marketing’s focus, we’re concerned with the way that people adopt our products into their lives. We want to create lasting relationships that create brand loyalty, repeat business and word-of-mouth referrals and recommendations.</h4>
<div style="text-align: left;">
There are four areas of user perception that can encourage or discourage adoption of our products. Let’s take a look at each of them and how we might be able to examine them in our UX research:</div>
<h2 style="text-align: left;">
Perception of Value</h2>
<div style="text-align: left;">
In order for customers to adopt a product; they need to see the value in that product. Products can deliver positive impacts but if they’re not seen to deliver positive impacts; the perception of value is low or non-existent.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
It’s also possible to produce products without such an impact that customer’s perceive to have value anyway. The entire homeopathic health industry relies on this to generate billions in revenue each year. Sugar pills are sugar pills and their benefits are pure placebo (there are much cheaper ways to buy sugar than through a homeopathic practitioner) but customers of homeopaths perceive a benefit and thus keep buying that sugar at incredibly inflated prices.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
We begin examining the perception of value with the product’s value proposition. If the value cannot be clearly articulated in house – it seems unlikely that it’s going to be easy for a user to articulate the value. We can test that by seeing if, after reviewing our marketing material or website, the potential user can articular the value.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Then we need to examine two other perceptions – the first is the question of utility; “Is this product useful to you?” but we should also remember that people buy plenty of things that aren’t useful so much as they are enjoyable (think computer games or novelty products) and we should ask; “Is this product fun to use?” too.</div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUYnZYs8nXd1Y0xLK4RFseezrwxg5lm9K0LUypAzhm1JQdpFNGevm2BseoDWrxGr0eciOTNGtfU-H0rnRC3qwcE2KMa3kGP91tib-wi9Ki6YKpWZFivawE1WGfoFV3CeUI8Dqtrv8PlA/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUYnZYs8nXd1Y0xLK4RFseezrwxg5lm9K0LUypAzhm1JQdpFNGevm2BseoDWrxGr0eciOTNGtfU-H0rnRC3qwcE2KMa3kGP91tib-wi9Ki6YKpWZFivawE1WGfoFV3CeUI8Dqtrv8PlA/s400/1.jpg" width="400" /></a></div>
<h2 style="text-align: left;">
<br />Level of Certainty</h2>
<div style="text-align: left;">
We move on from perception of value to the level of certainty that our product delivers on its perceived value. Is it as fun or as useful as it appears to be at first glance? More importantly do customers believe that you can deliver on that perceived value before they even touch the product?</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4Xq70piJwXeMz8Qqp4bkrRbcoM62a0loaYVu3CW8EjsOVocujrRvuwPkzCzdv0K7TxXt2rWyZ78ozp-EmXbOM_AEfv7sUUVm-80PQlD1xpQAwtIryKEWUZnZMLW6V8nr794EE2QC_w/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4Xq70piJwXeMz8Qqp4bkrRbcoM62a0loaYVu3CW8EjsOVocujrRvuwPkzCzdv0K7TxXt2rWyZ78ozp-EmXbOM_AEfv7sUUVm-80PQlD1xpQAwtIryKEWUZnZMLW6V8nr794EE2QC_w/s400/2.jpg" width="400" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
New technologies can often find themselves caught between a rock and a hard place. Driverless cars, which are currently in development, may sound fantastic but the true test of their staying power will be – do people trust cars to drive them from A to B in a safe and reliable manner?</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
If the level of certainty when responding to that question is low… there’s a major mountain to climb to convince people to become users in the first place. A lack of user confidence in the product is going to be a huge barrier to their adopting that product.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
For driverless cars that certainty may come from the power of the brands developing them – people tend to trust names like Google because they see them as capable of delivering technologically advanced solutions, they might be less trusting if the driverless car came from a brand new startup with no track record in the market.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
You can measure the level of certainty by asking your users what they think the chances of a successful product are, or what problems they anticipate with a product.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Is the Product Accessible?</div>
<div style="text-align: left;">
Accessibility is a measure of two separate components. The first is convenience, how convenient is the product to use? Why are bicycles so unpopular for short journeys – when it’s clear they’re so easy to use for this purpose? Well, there’s the weather, the lack of bicycle parking in many places, the behaviour of other drivers, the likelihood of theft, etc. it turns out that while bicycles have usability in spades – they often lack convenience.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
The second component is usability and that’s something that most UX designers will be intimately familiar with. Usability is a part of UX rather than the whole of it but we all know that if a product is hard to use – adoption is hard to win.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
It’s important to examine both convenience and usability during testing and to measure them as early as possible. An inaccessible product won’t find it easy to keep users in the long-term.</div>
<div style="text-align: left;">
<br /></div>
<h2 style="text-align: left;">
Does the Product Engender Trust?</h2>
<div style="text-align: left;">
Users are concerned for their safety, their privacy, their financial security, etc. If your product raises concerns – you need to work out how to address these with your users in order to get them to adopt the product. You cannot ignore the need for users to trust a service, you need to bridge the gap.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
For example, internet banking still has large amounts of resistance, despite its convenience because in many places – people aren’t convinced of the security aspects of the system. They may not have their own computers at home and working in an internet café can leave someone quite apprehensive about accessing their financial accounts.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Or imagine that you want to use geo-locations in a mobile application. Will you users be OK with you sharing that data with others? If not, how can you ensure that data is held securely without impinging on functionality?</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
There are many ways that a user may not trust a product and the UX researcher’s job is to work out where these pain points lay.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
You may also want to ensure that you under-promise and over-deliver in your marketing materials rather than vice-versa. There’s no quicker way to kill someone’s trust than to promise something that seems “too good to be true”. Again you can test marketing collateral with users before you put it out in the wider world.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQ3BRKHeArK2CyRYMXXRMWMkX-QbUMhlF1X-cdzegpL9XqdOIR3ec5opR4UEr7BVcROK7rBWEmBseh2ulUysyjjzzgXSst3Tkaemk6ej6u_H7vk2ffbJ1wSyT51yH0TMG_qvYqYFvBw/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQ3BRKHeArK2CyRYMXXRMWMkX-QbUMhlF1X-cdzegpL9XqdOIR3ec5opR4UEr7BVcROK7rBWEmBseh2ulUysyjjzzgXSst3Tkaemk6ej6u_H7vk2ffbJ1wSyT51yH0TMG_qvYqYFvBw/s400/3.jpg" width="300" /></a></div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
Summary</h3>
<div style="text-align: left;">
Ensuring that users adopt our products for long-term use is part of designing a great user experience. The four areas discussed above are critical for this. Fortunately, they’re all things we can examine in our research and resolve before we go to market – as long as we’re looking for them in the first place.</div>
<br /></div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-57488941750995764582015-08-04T13:40:00.001+05:302015-08-04T13:40:37.603+05:30UX Principles for designing Virtual Reality<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif; font-size: small;">1. Everything Should Be Reactive.</span></h3>
<span style="font-family: Trebuchet MS, sans-serif;">Every interactive object should respond to any casual movement. For example, if something is a button, any casual touch should provoke movement, even if that movement does not result in the button being fully pushed. When this happens, the haptic response of the object coincides with a mental model, allowing people to move their muscles to interact with objects. When designing a button: use a shadow from the hand to indicate where the user’s hand is in relation to button, create a glow from the button that can be reflected on the hand to help understand the relationship, use sound to indicate when the button has been pressed (“click”)</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlhbcRqDYSIVKTqQwDl_44t2GIRgmkZr7gLeMeBvuY7tfk75SSfpMDcpQgDmiISxZANpdNn3Dhwlaxh8WWCvtXNj-dJqbTTAW3FIbK51XbLfWTEeeYs0hPy9E34mLXlQcXWMcxNukQcA/s1600/1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlhbcRqDYSIVKTqQwDl_44t2GIRgmkZr7gLeMeBvuY7tfk75SSfpMDcpQgDmiISxZANpdNn3Dhwlaxh8WWCvtXNj-dJqbTTAW3FIbK51XbLfWTEeeYs0hPy9E34mLXlQcXWMcxNukQcA/s400/1.gif" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif; font-size: small;">2. Restrict Motions to Interaction</span></h3>
<span style="font-family: Trebuchet MS, sans-serif;">The display should respond to the user’s movements at all times, without exception. Even in menus, when the game is paused, or during cut scenes, users should be able to look around. Avoiding Simulator Sickness and slowness is the key part of improving the UX in Virtual Reality Applications. Do not instigate any movement without user input. Reduce neck strain with experiences that reward a significant degree of looking around. Try to restrict movement in the periphery.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uCGhqYGRwrMWNGzm4cZ0bwn0Pe8xvBNChs7g11wyJJ8fmSHMSkaojXzzbBLD27XBeFml5PGOjfZtjBi-TcP8xtjf2VQq62X9FYXteTLeQ2WcM7ssc3VW_9AtWSqsdZyTgPJGCgH6ZQ/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uCGhqYGRwrMWNGzm4cZ0bwn0Pe8xvBNChs7g11wyJJ8fmSHMSkaojXzzbBLD27XBeFml5PGOjfZtjBi-TcP8xtjf2VQq62X9FYXteTLeQ2WcM7ssc3VW_9AtWSqsdZyTgPJGCgH6ZQ/s400/2.jpg" width="400" /></a></div>
<br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif; font-size: small;">3. Text and Image Legibility</span></h3>
<span style="font-family: Trebuchet MS, sans-serif;">Bigger, brighter and bold texts should be used to indicate widgets. Images should be realistic and appealing to the user. The mind of the user is going to be entirely mapped into the virtual reality for a prolonged amount of time. Texts should be readable and legible for unstrained viewing of the user. Brighter and vivid the colors are, more involved the users will be.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7NTkosORjZh3ScF2YW0XjPUICSWfik5QRx52YN8gtCVmigZ7zWh1fy-LrKsZHp3Byy25c9EDDY3m6ZlCFBLk4EAsGU99huvocDnYzc0hwA3Zpe1mC3245h_jbKj-bhtL5aNM3IIcYQ/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="307" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7NTkosORjZh3ScF2YW0XjPUICSWfik5QRx52YN8gtCVmigZ7zWh1fy-LrKsZHp3Byy25c9EDDY3m6ZlCFBLk4EAsGU99huvocDnYzc0hwA3Zpe1mC3245h_jbKj-bhtL5aNM3IIcYQ/s400/3.png" width="400" /></a></div>
<br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif; font-size: small;">4. Ergonomics</span></h3>
<span style="font-family: Trebuchet MS, sans-serif;">Designing based on how the human body works is an essential to bringing any new interface to life. Our bodies tend to move in arcs, rather than straight lines, so it’s important to compensate by allowing for arcs in 3D space.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4eF4FCd8rMCojzT5v3iHUi4ljmmhHxwNht-BOx5kjGorgtq-6qTGov0f5Cib02zkTtbf5j_SqjVZ_G_o9jC6m1POrXvscWp2Nesp8zpwev8sPp3BVOYobGVDM6-1WtVssshzMADtDEA/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4eF4FCd8rMCojzT5v3iHUi4ljmmhHxwNht-BOx5kjGorgtq-6qTGov0f5Cib02zkTtbf5j_SqjVZ_G_o9jC6m1POrXvscWp2Nesp8zpwev8sPp3BVOYobGVDM6-1WtVssshzMADtDEA/s400/5.jpg" width="400" /></a></div>
<br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif; font-size: small;">5. Sound Effect</span></h3>
<span style="font-family: Trebuchet MS, sans-serif;">Sound is an essential aspect of truly immersive VR. Combined with hand tracking and visual feedback, it can be used to create the “illusion” of tactile sensation. It can also be very effective in communicating the success or failure of interactions.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFuapdMkUST5yecXvW4KdnsfjPMPja0Sb9ll5NVj11jbAekUB-GOhY6RVUK5iNgyEAO_QZ9Cb24Mfm4Q8BsCgZASr-KAEhjd9rJOUL1BwkdNXT3ynZRAGvx8qWvWNOsSmj58sKyg-sRQ/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFuapdMkUST5yecXvW4KdnsfjPMPja0Sb9ll5NVj11jbAekUB-GOhY6RVUK5iNgyEAO_QZ9Cb24Mfm4Q8BsCgZASr-KAEhjd9rJOUL1BwkdNXT3ynZRAGvx8qWvWNOsSmj58sKyg-sRQ/s400/4.jpg" width="400" /></a></div>
<br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif; font-size: small;">Google’s Design Guidelines for Virtual Reality</span></h3>
<span style="font-family: Trebuchet MS, sans-serif;">Google has listed some key principles involving physiological and ergonomics consideration to be noted while designing for Apps that can run on Google Cardboard. They are pretty much straight-forward for the designers to understand. </span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<ol style="text-align: left;">
<li><span style="font-family: Trebuchet MS, sans-serif;">Using a Reticle</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">UI Depth & Eye Strain</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">Using Constant Velocity</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">Keeping the User Grounded</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">Maintaining Head Tracking</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">Guiding with Light</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">Leveraging Scale</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">Spatial Audio</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">Gaze Cues</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">Make it Beautiful<br /></span></li>
</ol>
<br />
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Should UX Designers start learning about Virtual Reality?</span></h3>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">When the Technology giants Facebook, Google and Microsoft are spending a huge amount of money in Virtual Reality and Augmented Reality, they are definitely the potential areas of development and future. UX Designers should definitely start practicing and start adapting the principles of Virtual Reality during the design process. User Experience will play a major role in the success of this entire concept as this is going to have a emotional bonding with the users throughout the journey. </span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">It’s especially exciting to work in experience design right now. The problems are all new — we’re not bound by old interaction models. We can and will fail, but the successes will change how we experience the world.</span></div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-79663828782831793732015-04-28T15:19:00.002+05:302015-04-28T15:59:07.970+05:30How to Improve Website Usability: Top Guidelines<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Who said it is that easy to design, craft and maintain great websites that are both beautiful and effective? Surely, there is a million ways to do that, but also a million ways to fail.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">Let's see what to do to achieve the desired result!</span></div>
<h3 style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">
Generally, websites come in 3 types:</span></h3>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">1. The main feature of the 1st type is a creative and stunning design. Websites like this will make you say “Wow”. But, unfortunately, sometimes, they have nothing more to offer.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">2. Websites of this type may lack in creativity and design, but they will give you what you’re looking for in less than a minute! Don’t you agree that’s a good reason to close your eyes on the fact they don’t attract you visually?</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">3. And here go the winning ones. Websites, creators of which managed to combine usability and eye-catching design. The best type, especially from a marketing perspective. Websites like this will keep users coming back again. In short: they work.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">BUT: Who actually should be the winner in this everlasting battle of Usability vs Creativity? To answer this question you should go deep in user’s psychology.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">Good-looking websites cost nothing if they don’t help to get leads, increase conversion, or sell.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">You should do something more than just causing aesthetic pleasure to your users, if you want them to come back, not to just admire and leave. (Surely, not counting the case when what you provide is design service or anything related).</span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Hence, if your aim is to keep users coming back and staying loyal, you should consider the key principles of good website usability and user-centred design. This means focusing on users’ needs, providing them with products that are efficient and easy to use. If your website meets these requirements, you’ll gain trust. Simple, isn’t it? Also note that usability is not user-experience, though is correlated with it. The latter is about the positive feelings of the user. Nevertheless, making the website easy-to-use will make users happy, thus leading to better UX.</span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">So let us start with simple key principles on increasing usability.</span></div>
<h4 style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">
#1. Don’t Make Users Think</span></h4>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">We didn’t invent a new bicycle. This is the most important usability rule, formulated by <a href="http://www.sensible.com/about.html" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Steve Krug</a>. (BTW, his famous book <a href="http://www.sensible.com/dmmt.html" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">''Don't Make Me Think!'' </a>served as an inspiration for this post.)</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">The idea here is to make the web-page understandable on intuitive level, without conscious reasoning. Users should guess where to click and where to navigate to get what they want instinctively, without much thinking.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">This is what inevitably makes them feel happy about your website. As an epic example we picked the website of <a href="http://mailchimp.com/" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">MailChimp</a></span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;"><img alt="" data-loading-tracked="true" height="332" src="https://media.licdn.com/mpr/mpr/shrinknp_750_750/p/8/005/09c/3e8/1b3487c.jpg" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: auto; line-height: inherit; margin: 0px 0px 15px; max-width: 100%; padding: 0px; vertical-align: baseline;" width="588" /></span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Focused on simplicity and perfectly usable, it proves that to succeed you don’t have to do anything groundbreaking. The right things in the right places (where users expect them to be) make it all.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">Another thing which is amazing about this website is that it sets the users free of such an awful thing like "Paradox of choice". So, we are slightly going to the next must-know principle.</span></div>
<h4 style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">
#2. Avoid "The Paradox of Choice"</span></h4>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">When somebody is faced with too many options, he/she can end up not making a decision or just choosing something already familiar. This paradox can be faced not only on web-pages offering too many options but anywhere in life, for example in a cafe with a broad menu. Paradox of choice can really annoy and make users leave or look for other more familiar options somewhere else.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">To set users free of struggling to decide where to click on the website, <a href="http://mailchimp.com/" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">MailChimp </a>made it maximally easy.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">Note, that only the essential options are offered and the right emphasises are made on call-to-actions, like SIGN-UP-FREE. The secondary options can be found in MORE, preventing the users of being paralysed by too many suggested options.</span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;"><img alt="" data-loading-tracked="true" height="352" src="https://media.licdn.com/mpr/mpr/shrinknp_750_750/p/6/005/09c/3e8/307b66c.jpg" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: auto; line-height: inherit; margin: 0px 0px 15px; max-width: 100%; padding: 0px; vertical-align: baseline;" width="588" /></span></div>
<h4 style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">
#3. Give Users What They Need Right Away</span></h4>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Users, navigating on the web-site, usually behave themselves just like in an ordinary store, where buyers don’t examine absolutely everything in details, they are just looking for the exact things they need. Similarly users are not reading, but just scanning the website. As soon as something matches their requirement, they are ready to click.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">Lesson learned: Don’t make users think “This looks like too much reading.’’</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">Go visual to meet the needs of speed readers.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">Here’s a good example of nicely visualized <a href="http://www.bang2joom.com/pricing" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Pricing Plans of Bang2Joom </a>.</span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;"><img alt="" data-loading-tracked="true" height="299" src="https://media.licdn.com/mpr/mpr/shrinknp_750_750/p/5/005/09c/3e8/3c01773.jpg" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: auto; line-height: inherit; margin: 0px 0px 15px; max-width: 100%; padding: 0px; vertical-align: baseline;" width="588" /></span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Without making hard efforts the user can learn the advantages of each pricing plan, choosing the most suitable. No need to read extra texts and to try to compare. Everything is clean and simple!</span></div>
<h4 style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">
#4 Include "SEARCH"</span></h4>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">BUT: do it with caution if your website has limited content which isn’t frequently updated.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">It’s better not to have SEARCH form, than to disappoint the user, who didn’t find what he/she was looking for.</span><br />
<span style="color: #f3f3f3;">However, in case of the websites with a lot of different content, like <a href="https://www.wikipedia.org/" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Wikipedia </a>, SEARCH form is a must.</span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;"><img alt="" data-loading-tracked="true" height="394" src="https://media.licdn.com/mpr/mpr/shrinknp_750_750/p/7/005/09c/3e9/088f782.jpg" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: auto; line-height: inherit; margin: 0px 0px 15px; max-width: 100%; padding: 0px; vertical-align: baseline;" width="588" /></span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">In addition, check the best-practice for Search Form:</span></div>
<ul style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin: 0px 0px 30px 40px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Search-box is set up on all the pages, not only the home-page.</span></li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Search box is long, just like on Google, in order to make it easy for users to review or edit what they typed.</span></li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Search should have logic. Offer your users an autofill for similar common searches. Besides, if users search the word "help", you may additionally offer some "Recommended Results" to support the users in need.</span></li>
</ul>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;"><a href="http://www.apple.com/" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Apple’s </a>website is one of the best examples of this practice.</span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;"><img alt="" data-loading-tracked="true" height="378" src="https://media.licdn.com/mpr/mpr/shrinknp_750_750/p/5/005/09c/3e9/2bd9fc1.jpg" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: auto; line-height: inherit; margin: 0px 0px 15px; max-width: 100%; padding: 0px; vertical-align: baseline;" width="588" /></span></div>
<h4 style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">
#5 Know Your User</span></h4>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Young geeks love to explore new things. A bit complicated website, in case of a good content, may seem extremely interesting for youngsters. They may even love the challenge of discovering its options with curiosity while navigating through it. Just take a look on<a href="http://www.gamestop.com/" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Gamestop. </a>There was a time I spent hours on this website and never even considered the fact that it is a little bit difficult to navigate through.</span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;"><img alt="" data-loading-tracked="true" height="428" src="https://media.licdn.com/mpr/mpr/shrinknp_750_750/p/8/005/09c/3e9/33fc367.jpg" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: auto; line-height: inherit; margin: 0px 0px 15px; max-width: 100%; padding: 0px; vertical-align: baseline;" width="588" />In case of adults, situation is not the same. They are more conservative. They love simplicity and are getting used to new things with unwillingness sometimes.</span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Hence, keeping the target auditory in mind while designing the website is essential.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">Take <a href="http://www.google.com/" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Google </a>for an example. Its users' age groups are extremely broad, but no one actually faces difficulties due to the right balance between simplicity and functionality.</span></div>
<h4 style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">
Now let’s go through some more quick tips as a bonus!</span></h4>
<ul style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin: 0px 0px 30px 40px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Always consider "Banner Blindness" - the fact, that users usually ignore anything that looks like an advertisement. They notice ads, but still ignore it. Try to avoid any elements on website, which look like an ad (for example, boxes of info on the right of the page).</span></li>
</ul>
<ul style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin: 0px 0px 30px 40px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">If you require registration, value the time of users. Minimize the number of fields to be filled, leaving the essential ones.</span></li>
</ul>
<ul style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin: 0px 0px 30px 40px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Allow to UNSUBSCRIBE with one click. (And try to craft such valuable content, so that your users never even know, that UNSUBSCRIPTION was that easy).</span></li>
</ul>
<ul style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin: 0px 0px 30px 40px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Never forget mobile users. Go responsive!</span></li>
</ul>
<ul style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin: 0px 0px 30px 40px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Don’t make users use browser’s features to navigate. If they need to go “Back”, let them do it with using the option on the website, not on browser.</span></li>
</ul>
<ul style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin: 0px 0px 30px 40px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Match the design and the content.</span></li>
</ul>
<ul style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin: 0px 0px 30px 40px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Emphasize links. Never expect users to search for them hovering on words till the cursor changes to a pointer.</span></li>
</ul>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
</div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Hopefully, you’re now armed and willing to start improving your website usability to make visitors have a much more enjoyable experience browsing it next time.</span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Just keep in mind that these principles don’t pretend to be one-size-fits-all rules. Everything depends on details.</span><br />
<span style="color: #f3f3f3;"><br style="box-sizing: border-box;" /></span>
<span style="color: #f3f3f3;">Summing up, we left one thing that actually works in any case. The last, but the most important one.</span></div>
<h4 style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">
#6 Test!</span></h4>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Testing - this is the key to your next project success. As said above, there is a million of ways to design, build and maintain a great website! Just try to find yours. And, after taking any actions, be sure to check the efficiency and improve your strategy to achieve the better results! Good luck!</span></div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
</div>
<div style="border: 0px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">/Note: This article was originally published on <a href="http://www.bang2joom.com/blog/how-to-improve-website-usability-top-6-guidelines" rel="nofollow" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Bang2Joom's Blog</a>/</span></div>
</div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-37455484710903401852015-04-28T15:17:00.002+05:302015-04-28T16:03:30.419+05:30Lessons in Hospitality and User Experience Design<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">My team and I traveled to a satellite office this past week. Like many companies, our company has a list of preferred hotels that it recommends employees stay at when traveling for business. For the first time, I booked a hotel not included in this list. Ignoring the adage of, “if it ain’t broke, don’t fix it,” I decided to give the new Hyatt Place in town a chance. One by one, my teammates followed suit, until all seven of us were staying at Hyatt Place. Primed by positive reviews on TripAdvisor and Yelp, and the beautiful, high-definition website photos, I walked in through the automatic doors with high expectations.</span></div>
<h3 class="graf--h4" style="border: 0px; box-sizing: border-box; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Act like you want to help me.</span></strong></h3>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">After checking in and settling into my room — suitcase unpacked, HBO movie on the television — I decided I needed a shower to wash away the long travel day. That was when things began to fall apart. After three or four unsuccessful attempts to turn on the shower, I phoned the lobby. No one answered my first call. On my second attempt, the front desk answered with a hurried:</span></div>
<div class="graf--p graf--startsWithDoubleQuote" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<em class="markup--em markup--p-em" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">“Um, yes.”</span></em></div>
<div class="graf--p graf--startsWithDoubleQuote" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<em class="markup--em markup--p-em" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">“Oh, hi. I think my shower is broken.”</span></em></div>
<div class="graf--p graf--startsWithDoubleQuote" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<em class="markup--em markup--p-em" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">“Um, fine, I’ll send someone up.”</span></em></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">This threw me off. First, I’d expected to be greeted with a professional welcome, a rendition of the standard but comforting, “My name’s Jennifer, how can I help you?” Second, I’d expected some form of an apology for the inconvenience.</span></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<img alt="" class="left" data-loading-tracked="true" height="195" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAGzAAAAJDdlYjdiY2Y1LWZkOGQtNDIzOC1hNGEwLWNkZWM0OWVkMGMzMg.png" style="border: 0px; box-sizing: border-box; float: left; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: auto; line-height: inherit; margin: 0px 30px 15px 0px; max-width: 100%; padding: 0px; vertical-align: baseline;" width="288" /><span style="color: #f3f3f3;">When designing an e-commerce website for an information design class, we were instructed to be careful to ensure that the path to finding help was frictionless, and that entry points were plentiful. <strong class="markup--strong markup--p-strong" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">I should never be at a loss for where to turn for help, nor should I be made to feel like I’m inconveniencing you when I ask for it. </strong>This design principle extends beyond e-commerce, into any experience that involves a user interacting with a product or a service.</span></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">The above can be broken down into three simple guidelines:</span></div>
<ol class="postList" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin: 0px 0px 30px 40px; padding: 0px; vertical-align: baseline;">
<li class="graf--li" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Make it easy for me to find help.</span></li>
<li class="graf--li" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Apologize for the fact that I need help.</span></li>
<li class="graf--li" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 0px 5px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Do not convey that my cries for help — however exaggerated — are insignificant. The need that the user is expressing is coming from some place, regardless of whether it’s ‘right,’ and that place needs to be traced and surveyed.</span></li>
</ol>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Hyatt Place struck out on all three.</span></div>
<h3 class="graf--h4" style="border: 0px; box-sizing: border-box; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Take me where I want to go.</span></strong></h3>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Minutes later, I opened the door to a woman dressed in the hotel’s signature seasonal red. I described what was happening and, uncertainly, she asked if she could take a look at my shower. Once there, she began fiddling with the shower, retracing the movements that I had just gone through and aimlessly pulling on handles and pushing on buttons. At one point, she began turning the temperature control from hot to cold and then from cold to hot again:</span></div>
<div class="graf--p graf--startsWithDoubleQuote" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<em class="markup--em markup--p-em" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">“So, this just turns it on?”</span></em></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Cue sinking feeling. <strong class="markup--strong markup--p-strong" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">This was not the right path to solving my problem.</strong></span></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Everyone has had the experience of calling customer service and being bounced from one person to another, with an eternity of hold music in between. It is an experience of surreal, sublime torture; panic expands in your heart as you wait, listening to Sheryl Crowe and thinking “is this really my life?”</span></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">When a user needs to solve a problem, there is nothing worse than following a series of misplaced signs into a labyrinth, past mirages and promises that never materialize. There is nothing like the blood-pressure-raising frustration that comes with reliving a Groundhog’s Day of the same conversations and the same steps, yet no closer to solving your problem. <strong class="markup--strong markup--p-strong" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">This is an insult to my time. More than anything else does, this tells me — in the loudest of volumes — that you don’t care.</strong></span></div>
<h3 class="graf--h4" style="border: 0px; box-sizing: border-box; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">If the first impression isn’t a good one, do everything you can to ensure that the second one is.</span></strong></h3>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Unsurprisingly, she was unable to fix the shower. Instead, she decided to put me in another room. I agreed amiably, though mildly annoyed at having to re-pack and re-locate.</span></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Thankfully, the second room was just across the hall. However, I noticed immediately that the room was frighteningly cold — despite the thermostat’s 75°F setting. I asked whether the heat was working and she assured me that it was, but would take a couple minutes to heat up.</span></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Thirty minutes later, it was still cold. I once again phoned the lobby.</span></div>
<div class="graf--p graf--startsWithDoubleQuote" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<em class="markup--em markup--p-em" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">“I don’t think the heat is working.”</span></em></div>
<div class="graf--p graf--startsWithDoubleQuote" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<em class="markup--em markup--p-em" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">“It takes time…it’ll take at least half an hour.”</span></em></div>
<div class="graf--p graf--startsWithDoubleQuote" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<em class="markup--em markup--p-em" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">“Ok, thanks.”</span></em></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Another thirty minutes passed. Still cold. It was now almost midnight and I was beginning to feel desperate for sleep before our first day at the office.</span></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">This was strike two. <strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">When a user first encounters a snafu in their experience — an error message, a broken interaction, a page that takes too many seconds to load — the situation is still salvageable.</strong> There’s a second chance waiting to be taken. It would be foolish to miss or misuse this opportunity to remedy the relationship. Whether it’s ensuring that the rest of the experience is impeccable or demonstrating a little extra TLC — a strategy that Lyft and Uber have mastered — the objective is to kiss and make up. How can I stay mad at a company that not only refunded my ride and ensured that I would never get the same driver again, but also added $5 credit to my account?</span></div>
<h3 class="graf--h4" style="border: 0px; box-sizing: border-box; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Devil (and delight) in the details.</span></strong></h3>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">The fun wasn’t quite over yet.</span></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;"><strong class="markup--strong markup--p-strong" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Get the basics right. </strong>A teammate mentioned that after returning to her room that evening, she’d noticed a towel strewn on the floor. When I returned to mine, I saw that the pajamas that I’d folded on my bed were inexplicably left on the television stand. My 3/4 empty shampoo and conditioner had not been replenished. My bathtub had been sloppily cleaned, and a clump of hair (mine, I hope) remained in the center. These are the ABCs of hospitality; I’m not sure you can get anymore fundamental than clean towels. There are similar basics in web and app design — a (largely) error-free experience, an onboarding experience that sets expectations, orients and guides you, familiar design patterns, and an effortless way to contact support — that are the foundation of the user experience.</span></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;"><strong class="markup--strong markup--p-strong" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">The delight of everyday things.</strong> In the words of designer <a class="markup--anchor markup--p-anchor" href="http://lawsofsimplicity.com/about/" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">John Maeda</a>, <em class="markup--em markup--p-em" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">“When a small, unassuming object exceeds our expectations, we are not only surprised but pleased.”</em> This is the philosophy behind ‘delightful’ moments, such as those documented in <a class="markup--anchor markup--p-anchor" href="http://littlebigdetails.com/" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Little Big Details</a>. In the hospitality industry, the possibilities for <a class="markup--anchor markup--p-anchor" href="http://andrewchen.co/easter-egg-marketing-how-snapchat-apple-and-google-hook-you/" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">easter eggs</a> are endless. At the Dylan in Dublin, Ireland, guests receive chocolate truffles from a local chocolatier and bottles of water every evening. My travel companion and I would sometimes skip dessert in anticipation of the truffles. “I’m so looking forward to those chocolates!” She once exclaimed laughingly during a cab ride home after dinner. Similarly, at The Element in Omaha, trays of fruit, disposable headphones, magazines, and towels welcome you at the the fitness center, silently saying, “we’re here to take care of you.” Such gestures create the impression of not only warmth and welcome, but also luxury and leisure. Isn’t that how a hotel stay is supposed to feel?</span></div>
<h3 class="graf--h4" style="border: 0px; box-sizing: border-box; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; line-height: 26px; margin: 0px 0px 30px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">Find a sustainable solution.</span></strong></h3>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">It was my third call (fourth if you count the time no one picked up) to the lobby and I was beginning to feel frustrated.</span></div>
<div class="graf--p graf--startsWithDoubleQuote" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<em class="markup--em markup--p-em" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">“So…it’s still cold here.”</span></em></div>
<div class="graf--p graf--startsWithDoubleQuote" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<em class="markup--em markup--p-em" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #f3f3f3;">“Oh…so what do you want to do? I can have my security guard bring you blankets?”</span></em></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Blankets. Was this the solution we were looking for, an ingenious old-school solution to a unnecessarily technological new-world problem?</span></div>
<div class="graf--p graf--startsWithDoubleQuote" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;"><em class="markup--em markup--p-em" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">“I didn’t think you’d want to move again…” </em>she went on.</span></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">What I didn’t want was to continue to follow a winding rabbit hole wildly chasing the baseline amenities necessary for a pleasant week-long stay. I wanted to settle into a room that worked — shower, heat, the whole shebang — once and for all.</span></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">Unless absolutely necessary, the answer shouldn’t be a bandaid solution. In the age of minimum viable products and failing fast, it’s easy for ‘this will do’ to become the default. To be sure, there are times when workarounds are necessary, as work behind-the-scenes moves toward the right answer, the final answer. But, careful to avoid becoming a patchwork, Frankensteinian version of yourself.</span></div>
<div class="graf--p" style="border: 0px; box-sizing: border-box; color: #4d4f51; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 24px; margin-bottom: 30px; padding: 0px; vertical-align: baseline;">
<span style="color: #f3f3f3;">One of the enduring lessons in product management is that trade-offs are an emblem of creating. Think about problems in terms of their importance and urgency, and about solutions in terms of feasibility and effort. In the end, I accepted the blankets, because, well, at 1am, the ease of the solution was perfect for the urgency of the situation</span></div>
</div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-82013326784805956872014-10-08T18:00:00.002+05:302014-10-08T18:15:29.131+05:30The tyranny of testing over design<div dir="ltr" style="text-align: left;" trbidi="on">
<h2>
<div class="graf--p" name="4a7b" style="background-color: white; margin-bottom: 30px;">
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">There’s a great debate about processes and methodologies that are considered to be effective, but they aren’t. While plenty of blog posts, workshops, public talks celebrate the triumph of continuous testing, we seem to forget about the good old principles of design. Continuous experimentation and branding advocacy are sometimes working together to hold back not just design, but also common sense.</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<br />
<h3 style="text-align: left;">
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Experiments at Airbnb… what’s the point?</span></span></h3>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">On May 2014, on Airbnb’s techy blog an article appeared called Experiments at Airbnb, where they provide useful examples of how to run split testing, alias A/B testing. They make controlled experiments — they say, that are very important in shaping the user experience on their site. The tips themselves seem to be rather sensible, but I’d be really grateful if someone could be so kind to explain to me what the practical achievements of these experiments are in terms of design.</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">The post illustrates two examples related to the price filter:</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">A feature that was rejected.</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6P63yAceCxOYaTslSi6L-vc9-NwKOnaHVLDScV0Lc9TlATusDL6JSV_j33B-cOzUlyJJFilGfUp6rL2-nQTSSOaN_tSnCp8ACgMNSPv940JjPvhUoIgoDP2RqYGmFdnq94qg8VzcSNQ/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6P63yAceCxOYaTslSi6L-vc9-NwKOnaHVLDScV0Lc9TlATusDL6JSV_j33B-cOzUlyJJFilGfUp6rL2-nQTSSOaN_tSnCp8ACgMNSPv940JjPvhUoIgoDP2RqYGmFdnq94qg8VzcSNQ/s1600/1.png" height="128" width="400" /></a></div>
<div style="text-align: center;">
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif; font-size: xx-small;"><span style="font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Two variations that were split tested.</span></span></div>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Let’s now look at what has been implemented on the current site, and try to book a place for 2 nights on the current site:</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhwIxI4IdZZeaVgoVn4_ujwuEUcrhJOSTSdlgK-z2TG_2KdEsCHx6DBivRVqYN-HzI9mMjcgHeXwQkJvQ02-q-xemduVMMHgMRtptEzB0xFNmskYt1yePGPD2gmJCCueCocXxDFtHlA/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhwIxI4IdZZeaVgoVn4_ujwuEUcrhJOSTSdlgK-z2TG_2KdEsCHx6DBivRVqYN-HzI9mMjcgHeXwQkJvQ02-q-xemduVMMHgMRtptEzB0xFNmskYt1yePGPD2gmJCCueCocXxDFtHlA/s1600/2.png" height="151" width="400" /></a></div>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">As you can see, not only is the currency not there (and yes, people nowadays travel a lot and they need to see it), but even worse, the label on the price filter does not communicate whether the price is per night or per number of nights booked. That would be a legitimate question wouldn’t it? Good luck with finding the answer, the obscure label “Price Range” certainly is not there to help. You’ll have to select one of the properties to find out that the price displayed in the filter is per night. One might argue that during some (badly run?) usability testing nobody raised this issue. Or that most people would understand the meaning (arguably not), or that it’s still better than calling it just “price”, but for God’s sake, why can’t they just put a clear label where it’s needed? That’s what they do on Booking.com, or in a different way, on Way to stay:</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjujFnNhmBZ0g6HryZOP9L58sGjuE0PupIlgDQwEXZA0TTU0xBSirh6GwFLTi7UvQGP46dP0sHYFR-Ve_30KUJyyrbjmqDghGJtVdHM3TFo-Un4E7OppdZOJvlb6XoFykudAG-q99W7pQ/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjujFnNhmBZ0g6HryZOP9L58sGjuE0PupIlgDQwEXZA0TTU0xBSirh6GwFLTi7UvQGP46dP0sHYFR-Ve_30KUJyyrbjmqDghGJtVdHM3TFo-Un4E7OppdZOJvlb6XoFykudAG-q99W7pQ/s1600/3.png" height="192" width="400" /></a></div>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">That would be a bullet-proof way of making it work for everybody, without the need for any A/B testing or usability testing whatsoever.</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">The point here is, the price filter on Airbnb contains a fundamental design flaw, as a very established and quite obvious design principle is to label things properly in order to avoid misunderstandings.</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">This specific example clearly shows how the outcome of the split test can get invalidated by the fact that the design solution does not meet the design heuristics in the first place.</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">As a side note, there was no need for A/B testing to come up with very obvious conclusions such as:</span></span><br />
<br />
<ol style="text-align: left;">
<li><span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Why would people ever prefer a generic quantitative indicator instead of actual figures?</span></li>
<li><span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">There is no point in showing the highest price on the slider, a plus sign is enough to let people know that the top prices are higher than the displayed value, as soon as the algorithm behind is accurate enough to include only a range of prices that is statistically significant.</span></li>
</ol>
<br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">While focusing on these minor details, how many users chose to leave Airbnb because they could not understand clearly how much they would have to pay?</span></span><br />
<h3 style="text-align: left;">
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Do you really need to test that? And what if testing turns into a hurdle to design?</span></span></h3>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">The second example described in the post is about the fully revamped interface that was released in July 2014:</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh47ZcC9iLuJ-bVYoOR25-Voz6WlSyQk143ZJh8w03tx3MpaUEacsHXFEU8iJHiUKlDe07jvH-9ezxFB4_S_vxLNmjKJIBlwjDOikJJvmxjjVZmsFNB6Uh8KJvqbqHPtUmpNixLI-OqKg/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh47ZcC9iLuJ-bVYoOR25-Voz6WlSyQk143ZJh8w03tx3MpaUEacsHXFEU8iJHiUKlDe07jvH-9ezxFB4_S_vxLNmjKJIBlwjDOikJJvmxjjVZmsFNB6Uh8KJvqbqHPtUmpNixLI-OqKg/s1600/4.png" height="125" width="400" /></a></div>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">The new design is a neat improvement, as users can now see images of the properties without loading a new page, and see the location of the properties on an interactive map. It took a long time to get there, but it looks nice. Was there any need to carry out A/B testing to confirm which design was better? As a designer I would say of course not. But let’s say that the A/B test results pointed to a drop in KPIs on the redesigned version, what would the next steps be? There are so many differences between the new and the old version that identifying the culprit would be utterly impossible. This reminds me of another similar example. In his 2012 presentation called Design for continuous experimentation, Dan McKinley, engineer at Etsy, shares the story of how continuous testing lead the design team to abandon certain design proposals, such as opening an item on a new tab or adopting endless pagination. While going through the presentation, I thought it contained a fundamental flaw. Unlike usability testing, which should also be treated with great caution, an A/B testing does not give much insight into what exactly made users prefer one version over the other. Maybe the implementation of version B was not good enough?</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Whatever the reason, the main point here is aren’t we going towards a trend where testing dictates design solutions just because there’s no time during a design meeting to come up with a solution that is accurate? Are we dropping design thinking in favour of the cult of statistics?</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">In my experience as a designer performing plenty of usability testing sessions, most of the times I can foresee what the outcome of the testing will be, and that’s probably because I am quite good at doing what I do. Of course testing always provides useful insights on underrated issues, but I know what the heuristic and principles are and I never lose sight of them. But in many of the design-related discussions that I’ve been involved in over the years, these principles are not even taken into consideration most of the time.</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Let’s go back to Airbnb. Here is the search widget on the homepage, after the major redesign they carried out recently:</span></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxCsxWhWRFhRFIS-1hAZYk5eyr8-E72An7k5JUEr0jrtMPXgh1o5ldv3yICZMCjTnsmmVo-p9eTBEmSZ5aZjYeUsDTcfJPNQ6_dUfv7goDgGXuDw3sMDtABCuEsT3l-Q3LE4UiTpqUYQ/s1600/5.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxCsxWhWRFhRFIS-1hAZYk5eyr8-E72An7k5JUEr0jrtMPXgh1o5ldv3yICZMCjTnsmmVo-p9eTBEmSZ5aZjYeUsDTcfJPNQ6_dUfv7goDgGXuDw3sMDtABCuEsT3l-Q3LE4UiTpqUYQ/s1600/5.png" height="33" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">On Firefox (Mac OS X)</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI7CZw1RcXvhiTCqCOxNrWRIgoYijoyG90XPgydg5AnE_2F4qJmxJReBkSk09y-ZYxJt4yDokfYb2y3RG2FdNHYUDGhccWwssfHp3r8sR2GTIqoroxEKvia_7ROTDVOHVnFMFSQ5sC5g/s1600/6.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI7CZw1RcXvhiTCqCOxNrWRIgoYijoyG90XPgydg5AnE_2F4qJmxJReBkSk09y-ZYxJt4yDokfYb2y3RG2FdNHYUDGhccWwssfHp3r8sR2GTIqoroxEKvia_7ROTDVOHVnFMFSQ5sC5g/s1600/6.png" height="33" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">On Chrome (Mac OS X)</td></tr>
</tbody></table>
<br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">See the ugly rounded corners? See how the controls are not the same height? It’s a one or two pixel difference, but enough to make it look not alright. And why cram all controls together like that?</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">If we look at the search results page, it gets even worse. Here is how it looks on my large screen, after I click on “More filters”:</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBOaWsb0QgsAg8WL44Ig-teYbs2vsygXTtd05hlg2Kh9azj7bo-JxaT-cBQOUgRoTANtsNtChr-9ZgA2hyNjK3aMjWatILg6YOhM5d5l9obv3h0t63z6vNvnr2UtooHbRcMGr__IM_TA/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBOaWsb0QgsAg8WL44Ig-teYbs2vsygXTtd05hlg2Kh9azj7bo-JxaT-cBQOUgRoTANtsNtChr-9ZgA2hyNjK3aMjWatILg6YOhM5d5l9obv3h0t63z6vNvnr2UtooHbRcMGr__IM_TA/s1600/7.png" height="386" width="400" /></a></div>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Issues I found here, after looking at this for about a minute (from top to bottom):</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<br />
<ol style="text-align: left;">
<li><span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Under ‘Room type’, the three check boxes are too far from the text and icons they apply to, up to the point of being almost in the middle between one item and the one next to it. If at least they kept the border… but no, everything has to be flat now, because Apple did.</span></li>
<li><span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">When moving the slider on the price filter, the maximum amount updates on the right hand side instead of following the pin (where I would expect it to be), and the maximum price is not visible anymore — small details, maybe, but still…</span></li>
<li><span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Large amounts of white space between filter labels and filter values. A boldface could be used as a better way to differentiate between headers and values.</span></li>
<li><span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">From ‘Neighbourhoods’ to ‘Host language’, the carets pointing down on the right hand side are out of alignment, and even though there could be a reason for such a choice, there’s a certain ambiguity as to whether they refer to the item on the right or to the whole category. Wouldn’t it be better to position them next to the labels?</span></li>
<li><span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">The text box on ‘Keywords’ does not align with any other element on that page.</span></li>
<li><span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">The ‘Show listings’ button is so massive that it doesn’t even look like a button, it actually scares me a bit.</span></li>
</ol>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYYmU6EFtAni1_UcBovgLbRgQZj-vcMXiXHHcYJhe0Ygsa1A2WZXv5XqSimia0bSyHQtwzhwhPS92My2Eu_W5dPgpqcPtyq0G_71CwurVjA9C3nVUljjJ14TI3YdKKuKsq-KGPaW9jLA/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYYmU6EFtAni1_UcBovgLbRgQZj-vcMXiXHHcYJhe0Ygsa1A2WZXv5XqSimia0bSyHQtwzhwhPS92My2Eu_W5dPgpqcPtyq0G_71CwurVjA9C3nVUljjJ14TI3YdKKuKsq-KGPaW9jLA/s1600/8.png" height="226" width="400" /></a></div>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Here is another screenshot that includes the map, taken during a different session on a different day. Some more points here:</span></span><br />
<br />
<ol style="text-align: left;">
<li><span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">The buttons to zoom in/zoom out on the map are really small.</span></li>
<li><span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">No currency displayed on price range, and again, unclear “Price range” label.</span></li>
<li><span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, 'Times New Roman', Times, serif; font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">The ‘Options’ section features a really flashy indent overseeing a variety of picturesque font colours, and post-atomic, genetically-modified check boxes.</span></li>
</ol>
<br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Want some more interaction? A small and cute help overlay opens when you click on the small question mark, but the pointer is displaced quite a bit from the icon:</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPvOGZ-JJqMnMiJ2XPOyrVBLvoe4rRGuW97x_0AAe9is7-r0bMAq4fn75_4ueBs0opRIvtpkEfMSX3QNbvgvG9GDch71lvEIOh3mDNGElPetGedbxiSWRG2_Nc0JOD-GRpyGdck_oR4w/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPvOGZ-JJqMnMiJ2XPOyrVBLvoe4rRGuW97x_0AAe9is7-r0bMAq4fn75_4ueBs0opRIvtpkEfMSX3QNbvgvG9GDch71lvEIOh3mDNGElPetGedbxiSWRG2_Nc0JOD-GRpyGdck_oR4w/s1600/9.png" height="177" width="400" /></a></div>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">By the way, you might have noticed that the currency was displayed in one of the two versions and not in the other. I wonder if this is because they were playing the multi-variance game to decide if designers should include the currency?</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwWNN-anKm6ZZyyFQSIIsHiaYef1yEdWBby7ehKdnqSAIQQEBZRUmLkNXcSXjlDo22cRZYGBEL1gpmXnqsYyeQQMeFHJwszIN6Xe-Qy5wm64-cCgPd7z8qOEo4EJFnU-QHEpRxh6NMuw/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwWNN-anKm6ZZyyFQSIIsHiaYef1yEdWBby7ehKdnqSAIQQEBZRUmLkNXcSXjlDo22cRZYGBEL1gpmXnqsYyeQQMeFHJwszIN6Xe-Qy5wm64-cCgPd7z8qOEo4EJFnU-QHEpRxh6NMuw/s1600/10.png" height="48" width="400" /></a></div>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Price filter showing currency (and displacement of pin and number).</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">I had a similar issue when Google was testing two variations of search results pages on Google Images, and until they finally opted for the version where images open as inlays instead of new pages, it was a real pain if you happened to fall under the wrong user group.</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">The point here (despite the fact that they seem to have done a very good job with rebranding and the emotional impact of the site is quite effective) is there are so many issues that could have been addressed by just paying attention to detail, as you would expect from a site with millions of visitors. Visual design in particular requires being fastidious about the choices that are made. Alright is just not alright. You can’t limit yourself to dropping graphic assets into that slick and modern collection of widgets that you call GUI.</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Let’s carry on with Airbnb. It’s hard to believe, but there is no way to sort the results. I suspect they must have done it for strategic reasons, but from a design perspective, this does not make sense to me, and I am sure that thousands if not millions of users have been swearing out loud because of this.</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;"><br /></span></span>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">The old style pagination is one more burden to explore results and get what you want. Despite the fact that there’s plenty of space available, at least on my screen, if I want to jump to page number 5 I can’t, but hey, I can jump directly to page 56! And why would I ever do that, considering the listing seems to be totally random, with prices shuffling up and down without a criteria?</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTY0sPqLGSPyHrajscZaaYoB90KvW2Wvb0yDUz2J52t-EV9K0GQBSD_QIVKAAgcsH5k4MLzo9v607foRWxSWQprR8qoG9K5cfbH7T3ydP7U8Eb2nv4WfU5-lN3JARZtsnnWcm0mSNIrQ/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTY0sPqLGSPyHrajscZaaYoB90KvW2Wvb0yDUz2J52t-EV9K0GQBSD_QIVKAAgcsH5k4MLzo9v607foRWxSWQprR8qoG9K5cfbH7T3ydP7U8Eb2nv4WfU5-lN3JARZtsnnWcm0mSNIrQ/s1600/11.png" height="190" width="400" /></a></div>
<br />
<h3 style="text-align: left;">
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Conclusions, and a few notes</span></span></h3>
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Designers should have the authority to lead decisions about how an interface should work and what it should look like, without a need to prove that what they say is right or wrong every time there is disagreement in the team. They are supposed to have the experience and knowledge to make the right choices.</span></span><br />
<span style="color: #444444; font-family: freight-text-pro, Georgia, Cambria, Times New Roman, Times, serif;"><span style="font-size: 22px; font-weight: normal; letter-spacing: 0.159999996423721px; line-height: 33px;">Usability metrics, multi-variance testing and usability testing should all be adopted with great care. Continuous testing can be useful in many ways, but it should not replace informed design decisions.</span></span></div>
</h2>
<h2>
</h2>
</div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-41209320225169857062014-05-27T14:54:00.000+05:302014-05-27T14:54:24.734+05:30USER EXPERIENCE GUIDELINES YOU’RE OVERLOOKING<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">The success of a business will majorly depend on the user experience guidelines that have been set in order to improve its prosperity. This is because the business must ensure the clients are not experiencing difficulty when they try to get access to whichever information or perform a certain function in the company’s interface. If you follow the paramount principles of user experience clearly, you will be sure of an increased satisfaction of users in relation to your company’s interface. </span></div>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<h2 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">USER EXPERIENCE GUIDELINES</span></h2>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">1. UTILIZE FORM LABELS ABOVE THE FIELD</span></h4>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">The perfect place to place a form label in is above the fields, according to a study carried out. Too many people place forms on the left of part of the field, thus, creating a layout of 2 columns. This may seem appealing, but on the other hand, it is difficult to use. The reason behind this is because the form is usually vertically oriented, thus, users fill them from top to bottom. It would be easier to follow the label downwards than is sideways. </span></div>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">2. Have Clearly Displayed Faces</span></h4>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">On a Web page, the user will normally focus on people’s eyes and faces, which should be a great way to attract the attention of many users. Another interesting aspect is that users focus on the direction of the face, that is, where the person on the image is looking at. If the face is looking sideways, the user will also change directions and be less interested. Always consider a clear face image that faces at the user directly to draw more attention.</span></div>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">3. The Design Quality</span></h4>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">The quality of the design is a clear sign of the web’s credibility. Like the saying, user will judge the ‘book’ by its ‘cover’. Your Book (website) will determine on how people will be attracted to its cover (design). Aspects like the typography, layout, color, consistency and style will determine how the users will notice and judge your website. The images you display will also determine majorly. Ensure everything, including the images are relevant to your audience. </span></div>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">4. Avoid too Much Scrolling</span></h4>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Most of the users do not like too much scrolling. Studies show that around 70% of the visitors will not scroll down your page, all they do is view the content in the visible part on the screen. For that reason, always keep your principal content on the upper fold of your page. Nevertheless, don’t jut pile all the content in the above page fold because over-crowding content can also keep users bored. The name of the website and what will benefit the users should be placed on the main page and upper fold.</span></div>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">5. Let Your Links Be Blue</span></h4>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">It’s good to be unique when you are designing your business website, nevertheless, it is important to follow the user experience guidelines. This is because people tend to follow the same process they used in another website to get to a certain destination. They also expect that something should be default, things like link colors, the website’s logo location and others. The link color should be darker or lighter than the background color. They should also be different from the rest of the text. Research shows that a blue link is easier to view and use than other colors. This is because many people are used to blue links.</span></div>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">6. The Best Search Box Should be 27 Characters wide</span></h3>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Some people tend to use shorter search boxes, which only display a section of a long inputted text in the box. It is recommended that you employ a search box of 27 characters, which according to the study, contained around 90% of the searched queries. You can set the width using Ms and not just points and pixels. A wider search box is better than a shorter one and has many advantages.</span></div>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">7. White Space Enhances More Understanding</span></h4>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">A lot of web designers understand how important white space is, that is the space between pictures, paragraphs or buttons in the page. The space between items shows the relationship between the two and the items can be grouped by either increasing or reducing the spaces. The white space also enhances the readability of content, therefore, utilize them well. </span></div>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">8. The User Testing Should Be Short Enough</span></h4>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">A study showed that best number of tests that users carry out should be short enough, to increase the feedback positivity. If the test is extra detailed, there are chances that most of your website problems will be indicated in the tests. Always stick to none or just a single test for your users.</span></div>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">9. An Educational Product Page Is An Added Advantage</span></h4>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">If you have a product page website, many people will surf through them, nevertheless, there are some sites that lack enough information on the products being sold. This is bad since the information on the products will lure customers more than just a product with prices and contact information. The information should also be easy to read and educational enough.</span></div>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">10. Avoid Too Much Advertising</span></h4>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Evidently, many people hate destructions and some are just not attracted to that extra flashy stuff. If you have a website that is flocked with ads of all sorts of banners and flash images, it will actually chase away your users. Users also tend to ignore anything that looks like an ad, therefore, as you design your website, consider the user viewpoint. </span></div>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Conclusion</span></h3>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Generally, as you are trying to design your website to be captivating enough, always remember that it is not a photograph that you will hang on your wall at home or a profile picture that you wouldn’t mind whom it pleases. A web page should be captivating and in addition to that, it should focus on the user. If you put too much stuff, it may be difficult to follow, if you put too little, it may be so cheap and empty, always be informative in whatever you post in your site. These user experience guidelines should help you come up with an eye-catching website that will satisfy your user and make them always want to visit again for another time.</span></div>
</div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-74197217000843732982014-05-22T11:40:00.002+05:302014-05-22T11:53:30.852+05:30Building User Confidence with User Experience (UX) Design<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2MzCNnhj7Eg1m-AEOrHd5_34Y0McS2l_E7oVL2jjYm0rhyZUBRyBgjQpLA4dTRfuOrU95kbsWWFNrkmDxDqaX5z1JJFUOYG_b_AGPsG-zJEsun1-WshpwUwK8E3ddnmGZVDX2ov16EA/s1600/building-user-confidence-user-experience-design.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2MzCNnhj7Eg1m-AEOrHd5_34Y0McS2l_E7oVL2jjYm0rhyZUBRyBgjQpLA4dTRfuOrU95kbsWWFNrkmDxDqaX5z1JJFUOYG_b_AGPsG-zJEsun1-WshpwUwK8E3ddnmGZVDX2ov16EA/s1600/building-user-confidence-user-experience-design.jpg" height="218" width="400" /></a></div>
<span style="font-family: Georgia, Times New Roman, serif;">Increasing user confidence online is a constant challenge that both website owners and entrepreneurs face. With the prevalence of scams and frauds in the online community, creating an environment where users feel comfortable interacting, using and buying from a website is essential. User Experience (UX) design is an essential step towards building user confidence and increasing both sales and your user base. <i><span style="color: #cccccc; font-size: x-small;">(Lead image source: Intel Free Press)</span></i></span><br />
<h2 style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">Make it Easy</span></h2>
<span style="font-family: Georgia, Times New Roman, serif;">Website owners have less time than ever to impress and entice potential customers to learn more about their site. While some insist that tech savvy users require different interfaces than casual Internet users, a frustrating design is still a frustrating design. Users of varying technical abilities want a system that works smoothly and seamlessly.</span><span style="font-family: Georgia, 'Times New Roman', serif;"><br />Creating a site that is intuitive for new users but complex enough to engage experienced users is a difficult tightrope to walk. Facebook is a textbook example of how a user friendly website can become unfriendly and unresponsive to new users through continual updates. What was once a very easy to navigate site is now covered in strange icons, making it nearly impossible to navigate paths to gather information. On the other hand, sites like Reddit and Gmail have continually worked to gather new users while increasing the usability and utility of the site for experienced users. Rather than making the sites more complicated to engage seasoned users, both sites expanded on the base options to make their sites more immersive instead. Users want to feel engaged and confident in site navigation, regardless of experience.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Using user experience to build user confidence doesn’t just encourage users to become frequent visitors and customers of the interface, it also gives them the confidence to recommend the system to others. Regardless of the features, a site that is difficult to use will never become the go-to recommendation for anyone other than hardcore users. Use user experience design to ensure both seasoned and new users feel comfortable in their ability to gather information and use the site properly.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<h2 style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">Provide Clear Information</span></h2>
<span style="font-family: Georgia, Times New Roman, serif;">Internet users are warier than ever about disclosing personal information and data. With widespread data breaches in personal email accounts and state governments alike, being transparent with user information and accessibility to that information is imperative for building user trust. Luckily for us, finding a balance between User Experience and Security is possible.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Providing a disclosure policy on a website that is easy to find provides users with a degree of trust. Rather than digging through fine print or scouring the site’s policies, this transparency and openness with the distribution (or lack thereof) of data contributes to user confidence in both the developer and the site. Sites like Zappos even go so far as to disclose their privacy policy and safeguards against consumer identity theft on a separate ‘Shop with Confidence’ page to assure customers of their online safety before they put a single item in their cart. Clear information boosts the credibility of websites – something which is essential especially in e-commerce.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<h2 style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">Prioritize User Testing</span></h2>
<span style="font-family: Georgia, Times New Roman, serif;">It’s said that the closer you are to a project, the harder it is to view it objectively. UX is no different. User confidence is reliant on a working system. Often, users don’t blame the system for their troubles, they blame themselves. A poorly executed error message will have users reassessing their own use rather than blaming coding errors. These users will become frustrated and ultimately leave the site entirely, never realizing a quick email or call to the company could yield the desired results.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Even more damaging is when users associate a site or interface with computer crashes or consistent errors. While small hiccups in programming may seem innocuous, they degrade any trust or respectability in a site to a regular online user, losing sales and users. Consistent error messages or an inability to use the features of a site send a red flag to users. This alerts them that the developers didn’t care enough to present a completed project, creating a breach of trust when disclosing new data.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">User testing is by far the best and easiest way to ensure users are getting a positive experience. While a developer may never think to enter a symbol into a search function, a user with limited online experience may accidentally do just that, alerting developers to a flaw in the usability. This testing ensures that users of all abilities can successfully navigate the site.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<h2 style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">Pay Attention to the Details</span></h2>
<span style="font-family: Georgia, Times New Roman, serif;">Often, high arching goals like creating a smooth interface or providing clear sight lines cause developers to lose sight of the basics. No matter how quickly a site loads or how nicely it is laid out, a site riddled with spelling errors or broken buttons will stand out for all the wrong reasons. Simple spelling mistakes drastically undermine user confidence in the business, product or site and lead to a decrease in sales and use. According to eConsultancy, up to 18% of revenue can be put at risk due to website errors. This impact on the bottom line makes attention to detail a first priority when developing a positive user experience.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">While user testing may unearth some missed details, a full appraisal of a site and its content is important before going live. Whether it’s hiring a full-time editor or a part-time auditor for content error, catching and preventing these nuanced mistakes that crush user confidence is pivotal. Large online retailers may be able to absorb or overcome misspelled descriptions or broken links, but a smaller website simply doesn’t have the clout or proven track record to risk disclosing personal information. Double and triple checking content and site usability is a simple way to increase user confidence, no redesign necessary.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<h2 style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">In Conclusion</span></h2>
<span style="font-family: Georgia, Times New Roman, serif;">UX doesn’t just create a pretty way for users to see and interact with a website. It provides an invaluable service for businesses by providing an attractive and respectable platform that encourages use, sells product sand gathers customer information. Creating a user experience bent towards improving user confidence in the brand, business or website enhances the user experience while strengthening the business it represents.</span></div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-11681594920482232702014-05-20T11:56:00.002+05:302014-05-20T11:57:31.972+05:302014 MOBILE UX DESIGN TRENDS: EMBRACING MINIMAL<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;">For the past few years we’ve experienced a steady lean toward minimalist design of digital space. As new technologies, such as higher screen resolutions and faster networks, influence the aesthetics of digital surface, our decisions in choosing the right approach for designing mobile interfaces will further shape user interactions and behaviors.</span><br />
<h2 style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif;">Living the flat world</span></h2>
<span style="font-family: Georgia, Times New Roman, serif;">Flat design is based on the principal of: “focusing on simplicity and clarity to ease functionality and emphasize usability”. Popularity of flat user interfaces (UI) emerged recently with Windows metro style and iOS 7. In a series of minimalist trends that rose during the past couple of years, 2014 seems to be the year that Flat UI will mature and become even more ubiquitous.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">The basic influence of this approach on the graphical user interface (GUI) was the departure from skeuomorphism and elimination of gradients, shadows, textures, reflections and beveled edges. With all these limitations, the question is raised: how is dimension or depth implemented in flat UI design?</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">The answer goes back to the original principal of Flat design: embracing the strength of digital interface. In Flat design, depth is simulated with the combination of two main qualities:</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">1. Interactions such as parallax scrolling and behavior-learning responses</span><br />
<span style="font-family: Georgia, Times New Roman, serif;">2. Visual clarity such as contrast in monochromatic themes, minimal use of colors, big font and less text, use of spaces and blocks instead of lines, and blurring backgrounds</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPs_vo_yTQo3V8uNf6PF3fEPQhaZe4CADSe_hSalpYZz1-EtZWxLJ_qE_0nilhFceISD0i7SnqzeXwf85wh9Zduo4VcSjWoMkXTtaBzRHtC6vDt6kU1FUNVXAwHecH5o3y8pivrouINg/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPs_vo_yTQo3V8uNf6PF3fEPQhaZe4CADSe_hSalpYZz1-EtZWxLJ_qE_0nilhFceISD0i7SnqzeXwf85wh9Zduo4VcSjWoMkXTtaBzRHtC6vDt6kU1FUNVXAwHecH5o3y8pivrouINg/s1600/1.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i style="font-size: medium;"><span style="font-family: Georgia, Times New Roman, serif;">Flat Icons (TriplAgent) are quick to design, scale well and blend with any visual design theme.</span></i></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRmaO0idXKrnpz-D5x-Z_0G82SJnko0iO8IFmOrIAyawvCrowKDGOCmX76cQtnmjLqmj1jAG1VAUw0XQvXESvA1Z-MiNoJ6AgstKcBKk3jAobj561ObvwAngaETbzMCgq3dE_WzuiyYQ/s1600/2.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRmaO0idXKrnpz-D5x-Z_0G82SJnko0iO8IFmOrIAyawvCrowKDGOCmX76cQtnmjLqmj1jAG1VAUw0XQvXESvA1Z-MiNoJ6AgstKcBKk3jAobj561ObvwAngaETbzMCgq3dE_WzuiyYQ/s1600/2.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i style="font-family: Georgia, 'Times New Roman', serif; font-size: medium;">Sherpa, a personal assistant app that learns user habits, behaviors, and provides information that is of interest to the user.</i></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRK2DflHnIjob6zBIN0JElFyiDWJkQN7-X48z1aDDECw4td-jCVh-7vDx3MohprqJ41aZaXBTwczdQeO0urFuq6gVNG5pJFMMmlrEwPXTo_S6zVK4f0QVCIIjBm5g3X0bMgshQQlY2aA/s1600/3.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRK2DflHnIjob6zBIN0JElFyiDWJkQN7-X48z1aDDECw4td-jCVh-7vDx3MohprqJ41aZaXBTwczdQeO0urFuq6gVNG5pJFMMmlrEwPXTo_S6zVK4f0QVCIIjBm5g3X0bMgshQQlY2aA/s1600/3.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i style="font-size: medium;">Monochromatic or minimal use of colors (Univit) along with use of blocks and spaces instead of lines make the tap zones very clear to the user while providing a good look.</i></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5rVfPQExYpLh6RRCnWUBXmY_-RgbL_qzU5bh0wr-jDcg_vriXtaOmeXClmJDu2CmOCFybClIJDiJkaNIaUq5c7QQXI1SHGFMyY-uFy53un_QsMam8ojcPaG6BH4k6nDPooz8krkL82g/s1600/4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5rVfPQExYpLh6RRCnWUBXmY_-RgbL_qzU5bh0wr-jDcg_vriXtaOmeXClmJDu2CmOCFybClIJDiJkaNIaUq5c7QQXI1SHGFMyY-uFy53un_QsMam8ojcPaG6BH4k6nDPooz8krkL82g/s1600/4.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="background-color: white; color: #222222; font-family: InsightWebRegular, Arial; font-size: 14px; line-height: 20px; text-align: start;"><i>Blurred background used to set context and draws the user’s attention to focused content.</i></span></td></tr>
</tbody></table>
<h2 style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif;">Making BIG impressions</span></h2>
<span style="font-family: Georgia, Times New Roman, serif;">Today, capturing a moment is a tap away. Quality photos are everywhere and taste in aesthetics is changed to own the accessible, resulting in more pleasing images on apps and mobile websites.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></span>
<span style="font-family: Georgia, Times New Roman, serif;">Higher-screen resolutions brought the affordance to go big on fonts and images. With new technologies designers are able to play more with contrast and crisp visual effects.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></span>
<span style="font-family: Georgia, Times New Roman, serif;">Last year we saw the design of websites gravitate towards single-page websites, full-screen images, and HTML video streams on landing pages, similar to Nike’s Jordan website. These designs aim to make a big first impression upon website arrival. Carrying over the same effects to mobile platforms is challenging, but doing so becomes imperative as the use of responsive design becomes more common. As a result, this year we will experience a smooth translation of same effects on mobile platforms where we’ll see more of:</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></span>
<span style="font-family: Georgia, Times New Roman, serif;">Full-screen quality photo backgrounds</span><br />
<span style="font-family: Georgia, Times New Roman, serif;">Big fonts as well as combinations of font sizes and font types</span><br />
<span style="font-family: Georgia, Times New Roman, serif;">Single-page apps and sites that focus most user interaction on one screen</span><br />
<span style="font-family: Georgia, Times New Roman, serif;">A mobile-first design sensibility (more on mobile-first & responsive design)</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjxiFMto9-k_6eYIR7fUHRKXQP23BcflLOwkmFVIFU_-pAEJ5JGb4YqYzTJeBefegZUoHy1eps28DKLRrJiojKDTT9h1Eg_jjCfyTGjdFRRTz3_JacyeyhIXZaqD8AfVX4RjNL42VsAw/s1600/5.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjxiFMto9-k_6eYIR7fUHRKXQP23BcflLOwkmFVIFU_-pAEJ5JGb4YqYzTJeBefegZUoHy1eps28DKLRrJiojKDTT9h1Eg_jjCfyTGjdFRRTz3_JacyeyhIXZaqD8AfVX4RjNL42VsAw/s1600/5.jpg" height="160" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i style="color: #222222; font-family: InsightWebRegular, Arial; font-size: 14px; line-height: 20px; text-align: start;">Big fonts and font combinations</i></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyStXSdC-oZi88mbS2sxM2-pNPDxZlrB7rTKKgmZg6ovAeZ4yYCyXuwrx1peK3KjgI7XfeHpxba4zwKkr9HdgIVQIRxgnSlSZLG_R_x7jNVaIXMCD4rYn7fpNn6URC9x28oYF0gELC2Q/s1600/6.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyStXSdC-oZi88mbS2sxM2-pNPDxZlrB7rTKKgmZg6ovAeZ4yYCyXuwrx1peK3KjgI7XfeHpxba4zwKkr9HdgIVQIRxgnSlSZLG_R_x7jNVaIXMCD4rYn7fpNn6URC9x28oYF0gELC2Q/s1600/6.jpg" height="400" width="265" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i><span style="background-color: white; color: #222222; font-family: InsightWebRegular, Arial; font-size: 14px; line-height: 20px; text-align: start;">Full screen photos (</span><a href="https://itunes.apple.com/us/app/bloom*/id471389306?mt=8" style="background-color: white; border: 0px; color: rgb(153, 153, 153) !important; font-family: InsightWebRegular, Arial; font-size: 14px; line-height: 20px; margin: 0px; padding: 0px; text-align: start;" target="_blank" title="Bloom*">Bloom*</a><span style="background-color: white; color: #222222; font-family: InsightWebRegular, Arial; font-size: 14px; line-height: 20px; text-align: start;">) with condensed navigation menu</span></i></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc__5Yf83mpg2S3pLqI27kcYLPXH0uygCTBrG8vcP3Vx9xm0YGbyZGIewHZb8tX0lTT1QzITONywrYqkgKL_bj-0Di2DC32Y5fDTAmgfwwCzmY1ZQrPPj4eYl6g7M0S3JhE8l7h04UuA/s1600/7.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc__5Yf83mpg2S3pLqI27kcYLPXH0uygCTBrG8vcP3Vx9xm0YGbyZGIewHZb8tX0lTT1QzITONywrYqkgKL_bj-0Di2DC32Y5fDTAmgfwwCzmY1ZQrPPj4eYl6g7M0S3JhE8l7h04UuA/s1600/7.jpg" height="400" width="225" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Single Pages (Nike Training Club)</i></td></tr>
</tbody></table>
<h2 style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">Designing for short attention spans</span></h2>
<span style="font-family: Georgia, Times New Roman, serif;">Aside from games and other long engagement programs, mobile applications are mostly used for performing a series of quick and straightforward tasks, similar to the Move app that tracks daily activity. That pushes the interface to:</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></span>
<span style="font-family: Georgia, Times New Roman, serif;">1. Learn user behavior, predict and suggest the relevant content when it is needed and where it is appropriate.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;">2. Communicate the content visually with hierarchy so that the user spends the least amount of time possible in locating and performing a task.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;">A good example of communicating with a visual hierarchy is the concept of cards, which was introduced last year by Google Now. Even though the concept had been used before with window “live tiles” or in print magazines’ feature stories, popular apps like Evernote or Pinterest use a similar concept today. Cards design enables apps to provide separate, well-designed snippets of information or interactions for their users. Big photos catch their attention, while brief texts confirm that the interaction would interest the users and tapping the cards would engage them with more detail. Scanning content feels more relaxed as it appears more intuitive and in line with user behavior as opposed to purposeful searching of web content.</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD1C28dVZXythRikcWfz-xLP4xbdICyaWbQFLMu7KzeBpi976XnKSrOqG40Ee3naRtt-r1qiEsAWuf4ORjKjg_I9O-vR4BMHoYxh1CLDCumTo4be1xfuhm4uxtuTvDMFm6BoYf-QRRkA/s1600/8.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD1C28dVZXythRikcWfz-xLP4xbdICyaWbQFLMu7KzeBpi976XnKSrOqG40Ee3naRtt-r1qiEsAWuf4ORjKjg_I9O-vR4BMHoYxh1CLDCumTo4be1xfuhm4uxtuTvDMFm6BoYf-QRRkA/s1600/8.jpg" height="320" width="180" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Cards design (Evernote)</i></td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNsdDSREH660hknYUCbCLkSp4t4vvPVm8ZlS1jHgrVmtHgVIUPgsbMrQJZqNbBeym8p0CEtPm6ZfNf3iJk_XqDhuY_qBhzZcXt7fF78KyAAHGoCHwdflUir9Zrc38j1qe3K5vdpxswNg/s1600/9.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNsdDSREH660hknYUCbCLkSp4t4vvPVm8ZlS1jHgrVmtHgVIUPgsbMrQJZqNbBeym8p0CEtPm6ZfNf3iJk_XqDhuY_qBhzZcXt7fF78KyAAHGoCHwdflUir9Zrc38j1qe3K5vdpxswNg/s1600/9.jpg" height="226" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Cards design (Google Now)</i></td></tr>
</tbody></table>
<span style="font-family: Georgia, Times New Roman, serif;"></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></span>
<span style="font-family: Georgia, 'Times New Roman', serif;">The 2014 design aesthetic is about embracing minimalism beyond the surface aspect of user interface. It also involves designing for user interactions and optimizing those interactions visually and behaviorally to emphasize the functionality of the digital space in mobile platforms.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">As brands grow their mobile presence, the bar is raised for both aesthetics presentation and user experience of the mobile interface. It is important for businesses to evolve the mobile experience to meet expectations and crucial to keep an eye on how these trends develop.</span></div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-70150154424858298922014-02-11T18:51:00.000+05:302014-02-11T18:51:05.015+05:30Psychology of rewards in web design<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
<b>Rewards is a mechanism for telling users that they have done well – that their actions have been judged favorably.</b></h3>
<div style="text-align: left;">
There are two fundamental types of reward schedules which fundamentally change how rewards are experienced: fixed- and variable reward schedules.</div>
<br />
<h2 style="text-align: left;">
Fixed rewards</h2>
Fixed rewards are given out at a set time, amount, and type and are opposed to variable rewards, which feel more like random rewards.<br />
<br />
In computer games, fixed rewards are given out when you complete a level or achieve some other kind of clearly defined goal. Variable rewards are usually given out when killing monsters.<br />
<br />
In web applications fixed rewards are the most commonly used type of reward as they provide clear goals for users to strive for. At Hacker News, features such as voting on comments, or changing template colors are unlocked as you collect Karma points for your activities. At Stackoverflow.com, you receive a badge as you engage more and more in the community. Both provide clear set goals that users can strive for in order to climb up the ladder of status in the community.<br />
<br />
<h4 style="text-align: left;">
The right reward at the right time and amount</h4>
Everyone likes to be told they are doing a good job, but it is essential for rewards to work that they are given out at the right time, in the right amount, and that it is the right rewards that is being given. Ask these questions for each opportune moment to determine what is right1:<br />
<br />
<ul style="text-align: left;">
<li>What rewards is the system giving at the moment? Can it give out others as well?</li>
<li>Are users excited when they get rewards or bored by them? Why is this?</li>
<li>Do users understand the rewards they are given? Getting a reward you don’t understand is like getting no reward at all.</li>
<li>Are rewards given out on a too regular schedule? Can they be given out in a more variable way?</li>
<li>How are rewards related to one another? Is there a way that they can be connected?</li>
<li>How are the rewards of the system building? Too fast? Too slow? Or just right?</li>
</ul>
<br />
There is only one way to find out the right balance of time, amount, and kind of reward: through trial and error. Balancing rewards is often a question of “good enough”1.<br />
<br />
In behaviorism, the rate or probability of a behavior (“response”) is tried increased through stimulus (e.g. candy). The quality, or response strength, is assessed by measuring frequency, duration, latency, and accuracy2.<br />
<br />
<h4 style="text-align: left;">
Positive and negative rewards (and punishments)</h4>
There are two ways to strengthen behavior through rewards: bring pleasure or excuse from pain – positive or negative rewards (also called reinforcements). Opposite of rewards are punishments3.<br />
<br />
Positive rewards and punishments introduce stimuli to modify behavior where negative rewards and punishments take away stimuli to modify behavior. Rewards increase possibility of behavior while punishments decrease possibility of behavior.<br />
<br />
<h4 style="text-align: left;">
Primary and secondary rewards</h4>
A secondary reward are the stimuli we have come to associate with the primary reward. When we see the message number notification appear on facebook, we associate that number with the feeling of receiving a message from our friends, which is the primary reward.<br />
<br />
<h3 style="text-align: left;">
Variable rewards</h3>
Use variable rewards rather than fixed rewards when there is a chance that users will get acclimated to rewards the more they receive them1.<br />
<br />
The activity level of users is a function of how soon they expect a reward to be given. The more certain they are that something good or interesting will happen soon, the more activity they will produce. When users know a reward is a long way off, the motivation is low and so is user activity4. This reward schedule is called a fixed one, as users are rewarded again and again with a fixed ratio or interval. Variable ratios and intervals on the other hand randomize rewards around an average. The latter produce the highest activity in users.<br />
<br />
Read on to find out what variable reward ratios are and how they are different to fixed ratios and intervals.<br />
<br />
<h4 style="text-align: left;">
Why variable rewards work</h4>
As humans, and animals, we react differently to certain patterns of rewards. Behaviorism has studies these patterns4 and have come to the conclusion that variable reward schedules and contingencies motivate us more than fixed schedules and contingencies.<br />
<br />
Contingencies are rules or sets of rules defining when rewards are given out. There are two fundamental sort of contingencies: ratios and intervals. Ratios schedules provide a reward after a certain amount of actions have been carried out – the more you do, the more you get. Interval schedules provide a reward after a certain amount of time has passed.<br />
<br />
<h4 style="text-align: left;">
Fixed vs variable ratios</h4>
Rewards with a fixed ratio are given out again and again after completing the same action the same amount of times. It could be that you will receive 10 karma points every 5th time you reply to a comment or that you would increase your level every 10th time you uploaded a video.<br />
<br />
The problem with fixed ratios is that users distinctly pause completing actions when they receive a reward, as they know receiving a new reward will take a while. This creates an opportune moment for the user to walk away. However, the break in rewards caused by fixed reward ratios might also give the user an opportunity to explore different aspects the system.<br />
<br />
Variable ratios are rewarded after a specific number of actions have been carried out, but that number changes every time. A user might know to upload approximately 10 videos to rise in levels, but the precise number is randomly generated every time – everything has a chance of reward. Such variable ratios have proven to stimulate more activity than fixed ratios – even when on average the same amount of rewards are given out.<br />
<br />
Variable ratios are free from the pause in activity generated from fixed ratios. It’s important to note that users do not know how many actions are required this time, just the average number from previous experience4.<br />
<br />
Rewarding with fixed ratios produces a pause in activity after a reward has been given and a burst of activity just before being rewarded. While users typically respond at a higher rate in the fixed ratios bursts, variable reward ratios provide a more consistent rate free from pauses of the fixed ratios.<br />
<br />
<h4 style="text-align: left;">
Fixed vs variable intervals</h4>
Instead of providing a reward after a certain number of actions has been completed, interval schedules provide rewards after a certain amount of time has passed. Users being rewarded in fixed intervals will pause activity once an award has been given and wander around for a while. They will return frequently to check if their reward has been “refilled” or has reappeared. Gradually, checks will become more frequent as the proper time nears.<br />
<br />
Vimeo.com utilizes fixed reward intervals for its regular users, who are allowed to upload only 500 mb of video every week. After the fixed interval of one week, the user’s upload quota is refilled. As users reach their upload quota on vimeo.com, their activity will pause until its refilled next week. Vimeo hopes users will use the pause to consider buying a pro account with no upload quota.<br />
<br />
With variable reward intervals, the period of time changes after each reward as with the variable ratios. As with variable ratios, variable intervals also produce a steady and continuous flow of activity – there is always a reason to be active.<br />
<br />
<h4 style="text-align: left;">
Example: Lomography.com</h4>
Lomography.com sells retro analogue cameras on their website and in physical stores. To spark the enthusiasm of their lomographic society (fans taking pictures with lomography cameras), Lomography has created an online community for sharing pictures.<br />
<br />
Community activity is backed by a “piggie bank” system where users can earn piggie points by having their photos selected as “photo of the day”, by submitting reviews of cameras and accessories, by winning rumbles and competitions, by translating content, and much more. Piggie points, which have an expiration date, can be used in the online shop to by cameras and thus translate into cold cash. The piggie bank system utilizes a mix of fixed and variables ratios and intervals.<br />
<br />
At the retro camera company, Lomography, you can earn “piggie points” for your online activity, which translates to cold cash in the lomography online store. Piggy point rewards are given out both at fixed ratios and at variable intervals.<br />
<br />
<h3 style="text-align: left;">
What else?</h3>
Variable and fixed ratios and intervals can successfully be combined. Say that you need to upload 20 videos to become an elite member, where after you will have the chance of picking up a free pro-membership appearing at variable intervals.<br />
<br />
<h4 style="text-align: left;">
Extinction</h4>
Extinction is what happens when you stop providing a reward and will feel as a punishment that cause anger and frustration in the user. Behavior learned on the variable schedules are much harder to extinguish, as users will never know if what they are experiencing is just an unusually long run of misses and that next reward will justify their patience.<br />
<br />
<h4 style="text-align: left;">
Avoidance</h4>
The principle of avoidance uses the negative reward of decay, pain, or other forms of punishment to keep users active. An example could be to force users to revisit your site and log in once a week to avoid their “elite” status to be taken away.<br />
<br />
<h3 style="text-align: left;">
Sources</h3>
<div style="text-align: left;">
</div>
<ol style="text-align: left;">
<li>Jesse Schell, “The Art of Game Design – A Book of Lenses”, Carnegie Mellon University</li>
<li>Reinforcement at Wikipedia.org</li>
<li>Psychology is fun at gamasutra.com</li>
<li>Behavioral Game Design at Gamasutra.com</li>
<li>Only a game by Chris Bateman</li>
</ol>
</div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-12354455761152588272013-08-23T14:15:00.000+05:302013-08-23T14:28:47.493+05:305 Ways How Whitespace Affects The User Experience<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: #666666; font-size: 14px; line-height: 22px; text-align: left;">Whitespace is becoming an increasingly popular design element for websites. The </span><a href="http://desktoppub.about.com/od/glossary/g/whitespace.htm" style="border: 0px; color: #dd5e19; font-size: 14px; font-style: inherit; line-height: 22px; margin: 0px; outline: 0px; padding: 0px; text-align: left; text-decoration: none; vertical-align: baseline;">term</a><span style="color: #5e6066; font-size: 14px; line-height: 22px; text-align: left;">was originally coined in print design and describes “the absence of text and graphics”. At the same time, whitespace is more than an empty space. It’s also “the overall airiness or density of the page including space between lines of type (leading), text offset around graphics, size of margins, and heaviness or lightness of the fonts”.</span></span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">In web design, whitespace can be defined in a similar way. The only difference is that it doesn’t have to be white. Rather, whitespace comes in forms and colors. Consider it the opposite of your content. Whitespace can create a structure, carry meaning, and guide the user, but it doesn’t attract attention to itself.</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><span id="more-9223" style="border: 0px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">There are a lot of resources out there that <a href="http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it" style="border: 0px; color: #dd5e19; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">explain whitespace</a> in more detail, or bring together <a href="http://webdesignledger.com/inspiration/21-inspiring-examples-of-white-space-in-web-design" style="border: 0px; color: #dd5e19; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">inspiring designs</a> that use a lot of whitespace. Let’s not get stuck with the same questions.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">Instead, let’s take a look at just what it is that makes whitespace so special. Here are 5 key effects that whitespace can have on the user experience of your site:</span></div>
<h2 style="border: 0px; color: #666666; font-size: 24px; margin: 0px; outline: 0px; padding: 12px 0px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">
1. Whitespace makes your design usable</span></h2>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">First of all, whitespace is a great design principle to help you make your design more usable. It’s not a secret that <a href="http://blog.usabilla.com/5-design-mistakes-that-interfere-with-your-online-usability/" style="border: 0px; color: #dd5e19; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">good usability</a> is crucial for any successful site. So make sure you pay enough attention to your users and their goals: Who are the people that visit your site? Why do they visit? And what is it they do on your site?</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">Those are questions you need to answer before you even get started on your design. Once you have a clear design objective, you can use whitespace as effective tool to (1) guide your visitors through your site, (2) help them find what they are looking for, and (3) make interactions stand out.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm8cx0XPAYSNYr3q0_85ZCdR7BUg2scZ_m2sit_gEBifFpP3tEUqOHAF7B-h1w1eUgxZ8F2v2VCAwx03X7rxyt_cslSR4Uz1d-GqsNH6_11jvIHVtaGi2krc3N-evoDnPITgjvZiPSHw/s1600/1.jpg" imageanchor="1" style="font-size: medium; line-height: normal; margin-left: 1em; margin-right: 1em; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm8cx0XPAYSNYr3q0_85ZCdR7BUg2scZ_m2sit_gEBifFpP3tEUqOHAF7B-h1w1eUgxZ8F2v2VCAwx03X7rxyt_cslSR4Uz1d-GqsNH6_11jvIHVtaGi2krc3N-evoDnPITgjvZiPSHw/s1600/1.jpg" /></span></a></div>
<em style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-family: Arial, Helvetica, sans-serif;">The clean design with lots of whitespace allows you to effortless navigate the site and focus on the most important content.</span></em></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">The <a href="http://bree.com/men-s/business-bags/briefcase/Stockholm-12.html?id=000000000184750012&" style="border: 0px; color: #dd5e19; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">BREE</a> webshop perfectly demonstrates what it means to make a design usable by adding some whitespace. The site is very clean and minimalistic, while using a clear hierarchy for the presented content.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">On this detail view, clearly, the picture of the purse is most important to the user, followed by the name, description, price, and other product descriptions. Elements like the main site navigation are available, but stay in the background.</span></div>
<h2 style="border: 0px; color: #666666; font-size: 24px; margin: 0px; outline: 0px; padding: 12px 0px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">
2. Whitespace makes your content readable</span></h2>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">A key aspect of good usability is the <a href="http://blog.usabilla.com/8-guidelines-for-better-readability-on-the-web/" style="border: 0px; color: #dd5e19; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">readability</a> of your content. The readability is even so critical that it deserves to be mentioned separately.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">Whether your content is readable or not depends on many different factors. For example, it depends on the font you choose, the font size and color, the structure of your text, and whether or not you use highlights, images, and subheadings to make it scannable.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">At the same time, whitespace plays an important role for the readability. Whitespace defines how you arrange and align different text elements – from entire paragraphs down to the single letter. For example, aligned elements look much cleaner and are easier to digest. Also, let your content breathe and mind spaces between paragraphs, line heights, and even your letter spacing.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5SaE9ohU_6arT-2jH4JCrVrrPtRGMZjP2APUTnFe37ZbEQvZpkA0dq-KM219wk89sDJUfrblA167B3Y_ztco4t04yGmXr-AHFEVLgmthAKRV1z7o1jnhEH4aIiUIYTHm5wG7tZTyP_w/s1600/2.jpg" imageanchor="1" style="font-size: medium; line-height: normal; margin-left: 1em; margin-right: 1em; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5SaE9ohU_6arT-2jH4JCrVrrPtRGMZjP2APUTnFe37ZbEQvZpkA0dq-KM219wk89sDJUfrblA167B3Y_ztco4t04yGmXr-AHFEVLgmthAKRV1z7o1jnhEH4aIiUIYTHm5wG7tZTyP_w/s1600/2.jpg" /></span></a></div>
<em style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-family: Arial, Helvetica, sans-serif;">This text is highly readable, because it follows all the rules there are for readability.</span></em></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">Like mentioned before, whitespace doesn’t have to be white. Rather, it describes the spaces between your content on multiple levels. The site of <a href="http://worldwildlife.org/species/tiger" style="border: 0px; color: #dd5e19; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">WWF</a> offers us a very positive example of how whitespace – or in this case ‘negative space’, because it’s black – possitively affect your readability.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">Even though, there is quite a lot of text to read, the page doesn’t look packed. There is lot’s of space to the left and to the right of the content. Also, paragraphs are clearly separated from each other, and there is a generous space between the two columns. Besides, the line height is very user friendly, allowing you to quickly read through the text.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">Of course, whitespace is not everything. Other aspects of good readability, such as a readable font, high contrast, and a well-structured text are also in place here.</span></div>
<h2 style="border: 0px; color: #666666; font-size: 24px; margin: 0px; outline: 0px; padding: 12px 0px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">
3. Whitespace gives your visitors a break</span></h2>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">The web – like most other aspects in life – become more and more advanced. We are dealing with a constant overload of information and the choices that come with it. Sometimes, this can get overwhelming. Then, all we want is silence and a mental break.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">In case you haven’t noticed, the buzzword here is <em style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">simplicity</em>. There are countless websites out there and probably some of them are similar to yours. Why not stand out by spoiling your users with a break? Keep your design simple. Help your users make choices – or even better, make some of the choices for them.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">Whitespace is the perfect design element to focus on what’s most important. Don’t confuse your visitors, but present them with what matters most. Don’t distract them with unnecessary clutter, but help them focus on their goals.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWVI7JwlmcVdcQs9kdFnnHp5Whj1LOLjERD5Bpebe_OWJx5mzIxt4am5OujW9gX2Jp8nMi4i94KXHvQIUyBMKuooxad8kmOOsQcNcH-qSeofl-n6DWV4MsGP1LQRTdobOJ8g74ywgcwA/s1600/3.jpg" imageanchor="1" style="font-size: medium; line-height: normal; margin-left: 1em; margin-right: 1em; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWVI7JwlmcVdcQs9kdFnnHp5Whj1LOLjERD5Bpebe_OWJx5mzIxt4am5OujW9gX2Jp8nMi4i94KXHvQIUyBMKuooxad8kmOOsQcNcH-qSeofl-n6DWV4MsGP1LQRTdobOJ8g74ywgcwA/s1600/3.jpg" /></span></a></div>
<em style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-family: Arial, Helvetica, sans-serif;">Whitespace allows for a design no clutter, no distraction, no choices to make.</span></em></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">Whitespace can have a calming effect, drawing attention to a few key elements. <a href="https://www.dropbox.com/" style="border: 0px; color: #dd5e19; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Dropbox</a>has chosen for a very minimalistic landing page with looooots of whitespace. There is no clutter, no distraction, no choices to make.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">The website is very simple and refreshing. Only when scrolling down the page, you get some extra information. Basically, once the user is looking for more info, when they are willing to engage further with the site, they can. If they don’t want to, they don’t.</span></div>
<h2 style="border: 0px; color: #666666; font-size: 24px; margin: 0px; outline: 0px; padding: 12px 0px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">
4. Whitespace comes with a modern look & feel</span></h2>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">A simple design with lots of whitespace does not only add to the usability of your site, but also to its visual appeal. Minimalism is considered a modern style and sites that work with a lot of whitespace often look very professional and trustworthy – if well-designed, of course.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">Especially in e-commerce, giving products some extra space makes them look more exquisite. Not only do they get more screen real-estate, they also draw more attention, due to the lack of tangent elements.</span></div>
<div style="border: 0px; color: #5e6066; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeMyOX9ZaD-xFznJoyPELqwxBKwxVERCKgRfTZvac29VWmLr5BMulJwWmwC3XhcRDYKI3CuuPXSDj0kRtyXhRTfh65CxASM2gvlYeV7ME_szAmC4VjHItY-GpzG794Kzhng_RaRnU0jA/s1600/4.jpg" imageanchor="1" style="font-size: medium; line-height: normal; margin-left: 1em; margin-right: 1em; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeMyOX9ZaD-xFznJoyPELqwxBKwxVERCKgRfTZvac29VWmLr5BMulJwWmwC3XhcRDYKI3CuuPXSDj0kRtyXhRTfh65CxASM2gvlYeV7ME_szAmC4VjHItY-GpzG794Kzhng_RaRnU0jA/s1600/4.jpg" /></span></a></div>
<em style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Whitespace can put a single element into the focus of your users, making it more special than the rest of your content.</span></em></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">The <a href="http://www.rolex.com/" style="border: 0px; color: #dd5e19; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Rolex</a> website has a very exquisit look & feel. Of course, this didn’t happen by chance. The brand itself is very expensive and special. Using a lot of whitespace to design the website was therefore a smart choice.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">Once you open the homepage, the product is put right to the center of your attention. There is some text to accompany the image, but other than that, the page is very quiet – almost mysterious. Yet, the design is very well balanced and does not at all look empty.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">The shadow of the watch adds a small 3D effect to the site, creating a sense of depth. This subtle detail gives the product even more room, making it look even more important.</span></div>
<h2 style="border: 0px; color: ##666666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 24px; margin: 0px; outline: 0px; padding: 12px 0px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">
5. Whitespace makes your design emotional</span></h2>
<div style="border: 0px; color: #666666; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">Last but not least, whitespace can add an emotional touch to your design. Again, it doesn’t have to be white, but can be any color, shape, or pattern you want. Just like background images, background colors can have a big emotional effect on us.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">You can also use effects, such as parallax scrolling to make your whitespace interactive and more fun, or you simply use gradients or patterns to add some excitement. The tone you set with your whitespace – and that can be through the amount, or the design of it – affects how people will receive your content.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">Instead of seeing whitespace as the leftovers of your screen real estate after you have placed your content, you should see it as an autonomous design element. You decide where to put it and what effect it has on the rest of your design.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsYeCjikD8JbTgbWRSJkWwDxhKLdw5D_76TmDXvwa1Pba9hAuwvoQey7vvk9IW6LhgeiB8ciPBtF7zMX8bNYwt2pvW3v5YrAQHqFiocN-4CDftHcdHnunf1prv-eMHxHHvpaKoOLmkqA/s1600/5.jpg" imageanchor="1" style="font-size: medium; line-height: normal; margin-left: 1em; margin-right: 1em; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsYeCjikD8JbTgbWRSJkWwDxhKLdw5D_76TmDXvwa1Pba9hAuwvoQey7vvk9IW6LhgeiB8ciPBtF7zMX8bNYwt2pvW3v5YrAQHqFiocN-4CDftHcdHnunf1prv-eMHxHHvpaKoOLmkqA/s1600/5.jpg" /></span></a></div>
<em style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-family: Arial, Helvetica, sans-serif;">Whitespace can appeal to our emotions, and trigger us to think or feel certain things.</span></em></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.cirquedusoleil.com/en/welcome.aspx" style="border: 0px; color: #dd5e19; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Cirque du soleil</a> creates a magical and very inviting sphere on their international site – using a lot of whitespace and integrating that space with the main visual element of the site. The visual is appealing and very interesting, drawing your immediate attention.</span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif;">The design creates a very comfortable feeling of unity. At the same time, it makes you curious of what to expect once you have selected your continent. The quiet and warm background color invites you to dream away and leave room for a lot of own ideas and your own phantasy.</span></div>
<div style="border: 0px; color: #5e6066; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: xx-small;">Original : <a href="http://blog.usabilla.com/5-ways-how-whitespace-affects-the-user-experience/?utm_source=buffer&utm_campaign=Buffer&utm_content=bufferd6f1e&utm_medium=twitter" style="background-color: transparent;">http://blog.usabilla.com/5-ways-how-whitespace-affects-the-user-experience/?utm_source=buffer&utm_campaign=Buffer&utm_content=bufferd6f1e&utm_medium=twitter</a></span></div>
<div style="border: 0px; color: #5e6066; font-size: 14px; line-height: 22px; outline: 0px; padding: 10px 0px; vertical-align: baseline;">
<br /></div>
</div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-76034928943995774352013-02-13T16:29:00.002+05:302013-02-13T16:32:26.657+05:303 user experience resolutions for 2013<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h2 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">1. Refresh your understanding</span></h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">People change and businesses and brands change too, so refreshing your research to make sure you really do understand your current and future customers is a great place to start!</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br />Try to make sure you know their habits so you can match your brand to people’s underlying tendencies and wants. Analytics are good at showing you what is happening, but not why. We find that looking at the stories behind decisions and interactions can help you spot something key, giving you that extra edge this year!</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br />Good qualitative research bolstered by quantitative statistics and analytics will validate the decisions you are making, boost success and encourage innovation. We find diary studies give great insights, and are a good qualitative research method to start with.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<h2 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">2. Moving online offline (and vice-versa)</span></h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Last year, we did a lot of research into the merits of an omni-channel approach to business and customer experience. We found it to be extremely insightful - the things we took away from it in terms of quick wins and innovations is to look past the technology and observe the behaviours behind them is integral to omni-channel success.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJg7mG-QuFuo7bsagrZ1BnD73ZJcZOLdSysL9a8tYVlgBAIqKru1Fwcj0jcN_9_cHvHzKFWwVxamKk5lugVyHAl-TO9CYCPNG6BDJ9BWyFxUbyLn67QGVFhKpK-nDgeQvKVZRdR9L3dw/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJg7mG-QuFuo7bsagrZ1BnD73ZJcZOLdSysL9a8tYVlgBAIqKru1Fwcj0jcN_9_cHvHzKFWwVxamKk5lugVyHAl-TO9CYCPNG6BDJ9BWyFxUbyLn67QGVFhKpK-nDgeQvKVZRdR9L3dw/s400/1.jpg" width="400" /></span></a></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikVaLBwKYNov03HB3GxFhorbDYpDVB8R3BdCM-u8offyXH-_tRPifhMKgw_HB9RNzfpSbFNfRkds8xr8n4xbEuKmy9mBzz2OJWK0gKR0xTFyrw_f03iOnv7NOgxC7NkLP9t3YXDm3XVQ/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikVaLBwKYNov03HB3GxFhorbDYpDVB8R3BdCM-u8offyXH-_tRPifhMKgw_HB9RNzfpSbFNfRkds8xr8n4xbEuKmy9mBzz2OJWK0gKR0xTFyrw_f03iOnv7NOgxC7NkLP9t3YXDm3XVQ/s400/2.jpg" width="400" /></a></span></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">For instance, taking the drivers and benefits that customers really appreciate when shopping online at home and bringing similar conveniences and experiences in-store will support your customers needs much better. (Take a look at the Burberry flagship store for some inspiration!) I’m looking forward to seeing how brands continue to move the online experience offline and the offline experience online as the customer experience becomes smoother, easier and ultimately much more satisfying.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<h2 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">3. Get lean get agile</span></h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Two important approaches to user experience that have been gaining traction in recent years are agile and lean UX. Essentially, agile UX speeds up software development whereas Lean UX is an approach which speeds up the design process of new digital products.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">If you’re fighting for a user centered approach in your organisation and it isn’t moving as fast as you would like, then maybe adopting parts of these approaches will help – agile and lean UX promise quick sprint development, faster research, and overall less waste to get digital assets to market in a faster, more competitive time frame.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">There are a few steps to follow to get this going in your organisation:</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<ul style="text-align: left;">
<li><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">First, you need a good customer experience strategy to help guide the direction of faster developments, so get your vision together and documented with targets and objectives for your brand or business in relation to customer experience. (In true agile and lean style, this strategy can change along the way with new findings, but it is key to have it there at the beginning.)</span></li>
<li><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Next instil the agile culture in your teams. Get them to think about processes and break them down into outcomes and resources, rearrange them to see how agile or lean UX could look. Physically doing this with post-its or cutting up printed process diagrams might work best.</span></li>
<li><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Finally, get going. You need to try it and then adapt to make it work for your business. This is about streamlining the user experience design processes and making it faster and adaptable – so don’t take too long contemplating it when you could be designing something!</span></li>
</ul>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">What are your 2013 UX resolutions? We would love to know so please leave a comment below. If you are looking to give your customer experience new lease of life in 2013 but aren’t sure where to start, get in touch and we can help you have a great year!</span></div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-39882060227489627522013-01-21T12:45:00.000+05:302013-01-21T14:05:09.125+05:30Redesign Trend in Tech News Sites: Big, Responsive and Content Heavy<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h2 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif; font-size: x-large; font-weight: normal;">Redesign Trend in Tech News Sites: Big, Responsive and Content Heavy</span></h2>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">There’s a new trend in the redesign of technology news sites, which has emerged with the move towards responsive designs. The new wave of redesigns sees the old blog format being transformed into a full-screen, app-like experience, with multiple columns, fixed position elements and a global navigation bar at the top of the page.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">So let’s see some examples. Here is <a href="http://thenextweb.com/" target="_blank">The Next Web</a>:</span><br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgof5qMsDISKWBQS6RxSwmkbLt9tXn15STGKFDzWnXPY0XggkMPL07NMq7CQlfaYmmdegWXC2TycN9BWaX6_Pt7uFZ-aXGmbAum9cF7ax9UUHIZDf4YXkC3akHUPxm_V7zFUy8uTf52dw/s1600/1.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="277" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgof5qMsDISKWBQS6RxSwmkbLt9tXn15STGKFDzWnXPY0XggkMPL07NMq7CQlfaYmmdegWXC2TycN9BWaX6_Pt7uFZ-aXGmbAum9cF7ax9UUHIZDf4YXkC3akHUPxm_V7zFUy8uTf52dw/s400/1.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span><span style="font-family: Trebuchet MS, sans-serif;"><br /></span><span style="font-family: Trebuchet MS, sans-serif;"><br /><br /><br />Here’s <a href="http://mashable.com/" target="_blank">Mashable</a>:</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyoz8Zgi9vkgI8OY71jRsfjt5w_4grQ62gLEohx37dUbaFLVsZedWMX1dYSANgrcczv6ldK2rAgKP0Z1myYfo5ZBRqaAG4XRqf-Js-TX1geitrCYuGZwkFe0UzJqCuXNPbRMAKFm14SQ/s1600/2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyoz8Zgi9vkgI8OY71jRsfjt5w_4grQ62gLEohx37dUbaFLVsZedWMX1dYSANgrcczv6ldK2rAgKP0Z1myYfo5ZBRqaAG4XRqf-Js-TX1geitrCYuGZwkFe0UzJqCuXNPbRMAKFm14SQ/s400/2.png" width="400" /></a></div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span><span style="font-family: Trebuchet MS, sans-serif;"><br /><br /><br /></span>
<span style="font-family: 'Trebuchet MS', sans-serif;"><br /></span>
<span style="font-family: 'Trebuchet MS', sans-serif;"><br />And here’s <a href="http://readwrite.com/" target="_blank">ReadWrite</a>:</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0WZNkLoBtul70-k1TtvRwm3SbHMl-XSjhWEAQp_CA707tooicJaNPLTA6EfRgguUzxp1rn14ruXsmDV-4x3ovcQ_IWn1aJQXwVLIfYHBNpJyzmUxaZTCtGxO6N-ONk13B6G38_ZVm6w/s1600/3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0WZNkLoBtul70-k1TtvRwm3SbHMl-XSjhWEAQp_CA707tooicJaNPLTA6EfRgguUzxp1rn14ruXsmDV-4x3ovcQ_IWn1aJQXwVLIfYHBNpJyzmUxaZTCtGxO6N-ONk13B6G38_ZVm6w/s400/3.png" width="400" /></a></div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><b>Here are some of the shared attributes of these designs:</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Responsive design taking up the whole or most of the screen Wide, simplified navigation bar at the top of the page Navigation bar drop down menus on mouse hover Fixed sidebar columns, or columns that scroll independently Big typography, especially for headlines</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Most headlines coupled with images Flat style, and flat, single color icons</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">There’s a lot to like. The new designs are responsive, meaning that they adapt to the device that you happen to be using to view them, showing more content on larger screens, and collapsing the columns one by one for smaller devices. On a smaller screen the content is still there, it just gets moved down or gets put away in a drop down menu. The typography centered style is also a good change, pacifying the aesthetic eagerness of the early Web with the restrained elegance of print.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">But there are also things about this trend that I dislike. I don’t mean the concept of responsive websites, which is good, but rather the certain characteristics of the implementation that we see in the examples above.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">My main issue with these redesigns is that instead of building the site like a physical page, they treat it like a canvas for an app. Scrolling the page up or down does not guarantee that the whole of the page will move. Some columns are fixed and will remain where they are no matter how far you scroll. Some columns scroll independently, forcing you to move your cursor over them to scroll the content within them. It feels like the solid page that we’re all used to has been shattered into little pieces that may or may not behave the way you think they will.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">There are other annoyances. For whatever reason, scrolling is often laggy, which is made much worse on sites that load content as you scroll down. Most of these sites also choose to show up pop up menus on mouse hover, which are oftentimes fairly large. Should you accidentally move your mouse over the area you’ll see a portion of the page blocked by a menu item you never wanted to see. To fix the situation you’re forced to move the cursor outside the menu, all the while making sure you don’t accidentally move it over something else that will generate another pop up. It’s just plain annoying.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">While I like the style direction, I think these sites are trying a little too hard to work like apps, and in doing so, they surrender the strengths of the plain website, namely: simple, responsive navigation mechanisms. Simple sites don’t lag and don’t have any ambiguous navigation elements. They behave like a page, which, while being a constraint, is not necessarily a bad thing. The new wave of responsive redesigns in tech news sites certainly look good with their nice typography and healthy use of whitespace, but they feel heavy, they don’t feel right in the browser. They look more like apps but the speed and responsiveness of a native app just isn’t there.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">What do you think? Do you like these new designs, or do you agree with me that they’re trying a little too hard to break away from the physical page metaphor? Leave your comment below.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif; font-size: xx-small;"><b>by: Dmitry Fadeyev</b></span></div>
Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-64930513216212021642012-04-26T12:31:00.002+05:302012-04-26T12:41:26.404+05:30Goals of the Re-Design Process<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, 'Times New Roman', serif;">Re-designing a website is more than just giving it an improved new look. The successes and shortcomings of the existing site are invaluable in knowing how to truly improve the site and make the re-design worth the time, effort, and cost.<br /><br />Like any site design/development, a clear set of goals and purposes should be established to direct the project. Without knowing specifically why the site is being re-designed or what needs to be improved, you may wind up with a better looking design, but it is unlikely to be more effective for the business or for the users.<br /><br />I’m currently in the very early stages of re-designing a website for a client that needs a fresh look and some usability improvements. The client is a service provider and the existing site has been effective at attracting new business, but the site has grown and usability has suffered because the navigation can be difficult, and because the most important content isn’t consistently prioritized and featured throughout the site. In general, the site could be more effective for both users and for the business. The design needs to be updated and the income-generating services that drive the business need to clearly be the focal point of the website.<br /><br />This situation has led me to evaluate the re-design process and how it should be approached for both the designer and the client/website owner. Throughout the post we’ll look at some steps and key points in the process and why they have a big impact on the end result.<br /></span><h2 style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif; text-align: left;"><br /><span style="color: orange;">Goal Setting</span></span></h2>
<span style="font-family: Georgia, 'Times New Roman', serif;">Regardless of whether you’re creating a new website or re-designing an existing one, it’s critical to identify the purpose and the key factors for determining the success of the project. Part of a designer’s job is to make things look good, but the more important part is to make the site effective for the business owner and for visitors.<br />Before starting a re-design, take the time, preferably with the client, to list the specific goals of the project and what needs to be accomplished. Once clarity is established in this area you’ll be able to work towards achieving the goals with confidence that the job is being done well.<br />Part of the goal setting process involves knowing specifically what the website should accomplish for the owner/client. This may seem pretty obvious in some cases, but it’s worth taking some time to consider because the wrong approach here can seriously damage the effectiveness of the site. What is the most important aspect of the website for the business? Selling products? Finding new clients? Is it strictly informational?<br /></span><h2 style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /><span style="color: orange;">Evaluating the Current Design</span></span></h2>
<span style="font-family: Georgia, 'Times New Roman', serif;">In almost all cases the current website will have some strengths and weaknesses. Of course, the strengths should be maintained as much as possible through the re-design and the weaknesses should be improved to the point where they can no longer be considered weaknesses.<br />Here are some specific specific questions you can ask yourself to evaluate the current design:<br /></span><h3 style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /><span style="color: #f6b26b;">1. How does it compare to websites of competitors?</span><br /></span><div style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif; font-weight: normal;"><span style="font-size: small;">It’s common for websites in specific industries to have some similarities, and it’s easier to compare a website to another in the same industry than it is to compare sites in two completely different industries. Take a look at some of the leaders in the industry, or maybe just some of the most significant competitors, and judge the overall design of the sites to see how yours compares. Visitors to the site are very likely to also be visiting other sites in the same niche or industry, so it’s desirable to have a site that compares favorably to others.</span></span></div>
</h3>
<h3 style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /><span style="color: #f6b26b;">2. Could a new design keep the same feel, or does it need to be stripped down and totally started over?</span></span></h3>
<span style="font-family: Georgia, 'Times New Roman', serif;">Because websites are so important for branding, and also because re-designs can have major impacts on repeat visitors, it’s usually preferable to keep a similar look and feel to a website rather than completely going in a different direction. An example of this is the recent redesign of PSDTUTS and the other sites in the TUTS family. The new blog theme gives the site a fresh and improved look, but still keeps major elements in tact so visitors will feel at home even after the re-design.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsYc54k5Co-NiLno3Ys6Z-A6iBln9VnUACeUXA1AkZV5_PQvgAcrTwLETJUc4a5g0W1eOuyIxUsgLaIIY8v5IRkAz41lFe6Cfblfed_BFCprzXKvOJo_0HO1BWCC74D_QIFfXNOcjJ3g/s1600/1.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsYc54k5Co-NiLno3Ys6Z-A6iBln9VnUACeUXA1AkZV5_PQvgAcrTwLETJUc4a5g0W1eOuyIxUsgLaIIY8v5IRkAz41lFe6Cfblfed_BFCprzXKvOJo_0HO1BWCC74D_QIFfXNOcjJ3g/s400/1.jpg" /></a><br /><br /><br />In some cases the current design may be sufficient to the point that it can be retained in some ways, but in other situations the re-design will need to start from scratch. Of course, it’s helpful to know this as early in the process as possible.</span><h3 style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /><span style="color: #f6b26b;">3. What style should the new design feature?</span></span></h3>
<span style="font-family: Georgia, 'Times New Roman', serif;">There are obviously many different styles a designer can use to create an attractive and effective website. However, the style of the website should fit with the purpose and content of the site, and visitors should be a major consideration.<br /><br />The target audience of a website is likely to have certain preferences when it comes to design style, and these should not be ignored. This is the main reason that so many websites in particular niches or industries share a similar style. While you don’t want your designs to look just like everything else, it’s a good idea to factor in the common user expectations and what they will want to see when they arrive at your site.</span><h3 style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /><span style="color: #f6b26b;">4. What works and what doesn’t work in the current design?</span></span></h3>
<span style="font-family: Georgia, 'Times New Roman', serif;">When looking at the current design and determining a direction for the re-design, it’s important to take a close look at what is working and what is not. Are there certain aspects of the website or the design that draw a lot of feedback, either positive or negative? Are there areas of the site where usability could be improved? Once you have a specific list of strengths and weaknesses you’ll have a much better idea of what direction to take with the re-design.</span><h3 style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /><span style="color: orange;">Site Structure</span></span></h3>
<span style="font-family: Georgia, 'Times New Roman', serif;">If the website has been continually growing with new content or pages being added, the structure of the site is an area that may need evaluation. Does the current structure allow for visitors to easily find what they’re looking for? Does it allow for the site to continue to grow without any problems? If these items need to be addressed it’s best to do so at the time of re-design so they can be adequately handled and fixed.</span><span style="font-family: Georgia, 'Times New Roman', serif;"><br /></span><h3 style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /><span style="color: orange;">Traffic Sources</span></span></h3>
<span style="font-family: Georgia, 'Times New Roman', serif;">One area that is often overlooked during a re-design is traffic sources. It’s important to know how visitors are arriving on the site because it will help you to learn more about the visitors of the site. In addition, it’s helpful to know which pages are the most common entry points so that you can be certain to make these pages as useful as possible to new visitors.<br /><br />Knowing the sources of traffic can help you to find ways to maximize those sources. For example, before I redesigned this blog theme about six months ago Design Float had consistently been one of the leading sources of traffic, and fortunately a targeted source as well. As part of the re-design of the theme a voting button for Design Float was added at the end of each post, and since that time the traffic from Design Float has become even more significant.</span><h3 style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /><span style="color: orange;">Layout</span></span></h3>
<span style="font-family: Georgia, 'Times New Roman', serif;">The layout of a website has even more significance in terms of content than it does in terms of design. While the layout is important for creating an attractive site, it also helps to determine how the content will be presented to visitors and what will be emphasized the most. Take the time to consider what is most important on the site, and remember the ultimate goals of the site and the re-design. Is there content that needs to get priority by being placed in prime areas of the layout?</span><h3 style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /><span style="color: orange;">SEO</span></span></h3>
<span style="font-family: Georgia, 'Times New Roman', serif;">Search engine visitors are important to just about every website. One of the potential areas for disaster in a re-design is damaged SEO that results in lower rankings and reduced search engine traffic. Obviously, only a portion of the significant SEO factors are influenced by on-page factors, and others are off-page.<br /><br />For the on-page factors, if the site is currently doing well with search engines, pay close attention to how it is structured and coded in order to avoid damaging the rankings. If the site currently isn’t doing as well as it could, then changing things up and improving the on-page SEO is necessary.<br /><br />Even off-page SEO needs to be considered to some extent. It’s preferable to keep the URL structure the same as it was before the re-design so search visitors are going to arrive at the right place and so that the exiting pages get the benefits of the existing rankings rather than starting over. If a lot of links are pointing at specific pages, make sure that those URLs are not changed, or if they must be, make sure to use SEO-friendly re-directs.</span></div>Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.comtag:blogger.com,1999:blog-58964266977429308.post-84606754172018639302011-12-12T15:26:00.001+05:302011-12-12T15:54:20.843+05:30Things a Web Designer Should Know About Website Usability<div dir="ltr" style="text-align: left;" trbidi="on"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq2mNrjylxxOooclCwphrMasKbsoCmeaWcXBk9B6P0JnmMxNmjO0SwebxAxDWelM2Mw0s9ibc23UeexoyMdXTWnWLMQ1QUGV9xK8zBRGXU_8qrSHyYxI4SIEthmVAgxNEP7dMrfKyxMg/s1600/1.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq2mNrjylxxOooclCwphrMasKbsoCmeaWcXBk9B6P0JnmMxNmjO0SwebxAxDWelM2Mw0s9ibc23UeexoyMdXTWnWLMQ1QUGV9xK8zBRGXU_8qrSHyYxI4SIEthmVAgxNEP7dMrfKyxMg/s400/1.jpg" /></a><br />
<br />
We all know that change is the only thing which is constant. Even if there are certain rules and regulations for <a href="http://www.dzinepress.com/category/inspiration/web-design-inspiration/">designers</a>, they too have changed with the passage of time. However, when it comes to usability principles, a few principles can be modified but cannot be changed. The reason behind these principles staying the same is because they have been adopted by human nature and they need to be kept in the same way for proper usage. If you want to change them, basics will always stay the same. As with any project from designing layouts for <a href="http://www.nextdayflyers.com/holiday-wall-calendar/">calendar printing</a> to designing an online store, you should follow a protocol to make sure all important elements are included.<br />
<br />
Let us take a look at few timeless usability principles for website designers:<br />
<b style="font-size: x-large;">Who Will Be Visiting Your Website</b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXL_d3o3oR_kW8PXoxh6YE0NsiUf2MYEoS803U_XG5AcxAhw0a220DA_cE-1a-yBKOzwVtn9oc9NceUyl8UkJkOdKgl0lhVFdDiqFKMdzTbA_zPUgkH_vIt4MESp-5tG2LkcO7g01lA/s1600/2.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXL_d3o3oR_kW8PXoxh6YE0NsiUf2MYEoS803U_XG5AcxAhw0a220DA_cE-1a-yBKOzwVtn9oc9NceUyl8UkJkOdKgl0lhVFdDiqFKMdzTbA_zPUgkH_vIt4MESp-5tG2LkcO7g01lA/s400/2.jpg" /></a><br />
<br />
As a designer, you are obviously spending a lot of time designing for others and when clients come to you, they have a certain kind of people in mind that they would like to target to. Therefore, you need to <a href="http://www.dzinepress.com/category/inspiration/web-design-inspiration/">design the website</a> keeping the target audience and their preferences in mind. Also, you will have to keep in mind if you have to design an e-commerce website where visitors can buy the product or if you have to simply design a website which provides information. It is also possible that your clients might want to target more than one kind and as a designer it is your responsibility to make a design targeting the right kind of audience.<br />
<br />
So, the first principle is to keep the <a href="http://www.smashingbuzz.com/category/roundups/advertisement/">target audience</a> in your mind. While keeping the target audience in your mind, you need to accomplish the objectives of your website. The objective of you website could simply be attracting more users to sign up for the website or buy products or interact. For instance, your website offer design services of marketing collateral like flyers, brochures, postcards, business cards, posters,booklets, rack cards and calendars etc, then it should speak for its services in terms of <a href="http://www.tutoriallounge.com/category/inspiration/web-designs/">design and usability</a>.<br />
<br />
Each and every step on the website should be well planned. If you want visitors to sign up for your website, give them half of the information they are looking for and rest of the information should be provided once they sign up. Always give them a good benefit of signing up.<br />
<br />
<span class="Apple-style-span" style="font-size: large;"><b>Do Not Leave Your Visitors Confused and Unanswered</b></span><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNF9r3cR46rIHioUTtifmJO1ue9PaA3YZZWcbcc9doYYkE6jy0u_Ps-hfEyVWMmh77srlmPyyb5r4661xy_sGZ58m0JWHX52lmoev4SCq64o5RDO-o3AfAe9QR0E0TphSANwXPGqOH4g/s1600/3.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNF9r3cR46rIHioUTtifmJO1ue9PaA3YZZWcbcc9doYYkE6jy0u_Ps-hfEyVWMmh77srlmPyyb5r4661xy_sGZ58m0JWHX52lmoev4SCq64o5RDO-o3AfAe9QR0E0TphSANwXPGqOH4g/s400/3.jpg" /></a><br />
<br />
Well, when a user visits a website, he obviously has a few questions in mind and he would like to have answers to those questions. You have failed as a designer if you are unable to answer a few basic questions of a visitor.<br />
<br />
Whenever someone’s visit your website, he should be able to judge what your website is all about in the first glance because the most basic question that pops up in to a user’s mind is ‘Where am I’. Now, the name of website should be visible and clear enough. There should always be an ‘About Us’ tab highlighted on the main page of your website for user to get basic information about your products. Also, whenever a visitor visits other pages of your website, you need to highlight those tans so that he knows where he will land up if he clicks on the same tab again.<br />
<br />
The second question that will pop up into user’s mind would be ‘what is his purpose’ behind visiting the website off course and will the website serve the purpose. Now, this depends on the objective of the website because if you have an e-commerce website, make it prominent that this website is for buying products. If it is not an e-commerce website and simply an informative website about your product, it should be designed in the same manner.<br />
<br />
The third question would obviously be ‘Why should I read or buy from this website’. As a designer, your design will make the visitor stay on the website. Now convincing a visitor to buy stuff or read online, your writer has to work really hard. Your job is to provide a perfect design and space to the writer so he is capable of conveying information in a proper way.<br />
<br />
<br />
<span class="Apple-style-span" style="font-size: large;"><b>Less Thinking and More Scanning</b></span><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibjC3HZwJVihYIQV95HYiGySmJGfwVab_FEXIlJm030nRwEw115Ru2Ys4nTmKufrAS47vtzl_TXVzOEnQzdrIuTrxRWJTIa6e1zTlUnbWiLtTbCwHj9e4RezUahqOIYwbRVXzIcDnSRw/s1600/4.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibjC3HZwJVihYIQV95HYiGySmJGfwVab_FEXIlJm030nRwEw115Ru2Ys4nTmKufrAS47vtzl_TXVzOEnQzdrIuTrxRWJTIa6e1zTlUnbWiLtTbCwHj9e4RezUahqOIYwbRVXzIcDnSRw/s400/4.jpg" /></a><br />
<br />
<br />
<br />
There is a lot of difference in reading on a paper and reading online. When a user is reading online, he would like to get more information in a short span of time and would not really want to think. When it comes to online reading there is more of scanning and less of thinking. As a designer, it is your responsibility to design the page in a way so that it gets feasible for readers to scan and find the most important part.<br />
<br />
Also, if you really want to build a user base, you need to make them think less and for this the designing and<a href="http://www.tutoriallounge.com/category/inspiration/">navigation of your website</a> should be simple and easy yet stylish. The best way to do this is to put yourself in visitor’s shoe and if you find something complicated, obviously your visitor will find it to be complex too hence leaving your website. While designing you need to think from visitor’s perspective so that they can think less.<br />
<br />
The text used on the website is also very important. Your writer might have an amazing vocabulary but your visitors might not so he needs to use layman language. Instead of using difficult words, he needs to keep things simple for users to be able to understand each and every tab. A simple example would be, you can use ‘Who We Are’ instead of using ‘About Me’ or ‘Contact Us’ would be better instead of using ‘Customer Care’. So the key is to keep things simple and understandable.</span><div><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br />
</span></div><div><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br />
<b><span class="Apple-style-span" style="font-size: large;">Knowing and Understanding Your Ideal Visitor</span></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh99Hik187E3hGJkuhP8EP7oBWIwhUC78KbChH59ZEtQ3WSn3GeaRE7ysXD7rshllGXHvcT1XzbIiJ7w5difemkL3B2gW88b_xkyhpZA9hHbif-kqEj1bvh5CGPZXSYFIQ3NeDtblufjg/s1600/5.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh99Hik187E3hGJkuhP8EP7oBWIwhUC78KbChH59ZEtQ3WSn3GeaRE7ysXD7rshllGXHvcT1XzbIiJ7w5difemkL3B2gW88b_xkyhpZA9hHbif-kqEj1bvh5CGPZXSYFIQ3NeDtblufjg/s400/5.jpg" /></a><br />
<br />
You need to think from your visitor’s perspective but for that, you need to know and understand your visitor really well. Only then you will be able to put yourself in his shoes and think accordingly. What you need to do is find the common traits of the people who visit your website and then try to think from those people’s point of view. Always keep in mind that you will not be able to satisfy everyone. If you have managed to satisfy 80-85% of your customer base, you have managed to come up with a successful website.<br />
<br />
Even as a designer, you need to think technically at times so that you can grab the attention of right kind of clients and visitors. If you are designing an e-commerce website, your goal should be bringing the products and their information to forefront. Do not make your visitors go in circle in order to find the information of their favorite product. As said earlier, understand your visitor and think from their mind, not yours.</span></div><div><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br />
</span></div><div><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br />
<b><span class="Apple-style-span" style="font-size: large;">Users Love the Feeling of Being Familiar</span></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDQA6bPPoAIrJWnNf_9JtpNFSHqWsnzWC8Iv7RODYSHV_qAYnGoqKBUR1_7kYQpl6028mydWTAU5wW6fOc_zrs4JOPwCXl3g6sDqNxXA4kIMfcGTOnfnoJJy1Xxj7_dEFJDHgGGAgLg/s1600/6.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDQA6bPPoAIrJWnNf_9JtpNFSHqWsnzWC8Iv7RODYSHV_qAYnGoqKBUR1_7kYQpl6028mydWTAU5wW6fOc_zrs4JOPwCXl3g6sDqNxXA4kIMfcGTOnfnoJJy1Xxj7_dEFJDHgGGAgLg/s400/6.jpg" /></a><br />
<br />
I have seen a lot of designers trying to make changes in the basic conventions of a <a href="http://www.tutoriallounge.com/category/inspiration/web-designs/">website designing</a> just to make their website look different. This idea will not work really well for every visitor because you are confusing them more. At times, you have to avoid experimenting and keep things simple and conventional. When a user visits your website, he should sense a familiarity and since users are quite used to conventions, they will find navigating through your website quite easy.<br />
<br />
As mentioned earlier, users do not like confusing websites and if you are experimenting, you re forcing them to think which is highly disliked by them. Instead of understanding your website, they will leave it. One example would be keeping the navigation menu always above. Stick to basic principles of website usability and you will not regret it.</span></div></div>Hitesh Purihttp://www.blogger.com/profile/07154730246374865584noreply@blogger.com