tag:blogger.com,1999:blog-83292556340371017392024-02-19T00:35:26.944-05:00Seen & LearnedLessons learned and observations made from the perspective of user experience designersDebby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.comBlogger66125tag:blogger.com,1999:blog-8329255634037101739.post-7203672982499446502014-11-17T12:11:00.001-05:002014-11-17T12:11:29.618-05:00Doodle4 heuristic review and interface consultation<p><a href="http://doodle4.com/">Doodle4</a> is a new app for promoting causes through making and sharing doodles. Pitched at teen Facebook users, the app’s powerful doodling tool and easy sharing process make it simple and fun to build awareness of a cause by creating doodling “challenges” for friends to pass around.</p>
<p>Nimble Partners collaborated with the Doodle4 team to first provide a heuristic review of an alpha interface on web and mobile devices. We walked through the app as “Ione,” a lightweight persona we developed of a teen interested in banning styrofoam containers in her community. The walkthrough uncovered opportunities to improve the flow of use, wording, and engagement. We followed up the review with rapid iterations of sketches to provide specific recommendations for improvements. We remained on the team as iterations were made through beta launch.</p>
<p><b>Services provided:</b></p>
<ul>
<li>Heuristic review</li>
<li>UI sketches</li>
<li>User experience consulting</li>
</ul>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPWvLoz-x5bQ47m-rk4JoFBmMqBqG8q0D3aYy9DPU1VK3PmRxgGWp115SBQfp4-RYpg1PhNkMMmdpWxUHJC8vaXyW3vGjx9EduEpBu6wUfPShXEFbXvMqjQ5V7yzAxGajzaA9JgL6vW-w/s1600/doodle_home.png" imageanchor="1" style="margin-left: 0; padding-left: 0; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPWvLoz-x5bQ47m-rk4JoFBmMqBqG8q0D3aYy9DPU1VK3PmRxgGWp115SBQfp4-RYpg1PhNkMMmdpWxUHJC8vaXyW3vGjx9EduEpBu6wUfPShXEFbXvMqjQ5V7yzAxGajzaA9JgL6vW-w/s320/doodle_home.png" width="223" style="margin-left: 0; padding-left: 0;" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMA7K2bVloZ_UEuslf-WZuPMH8A_tHH44H7oRM1u7RdhcxoHELUdUbkrgqojp86Zk7y9-099WFq_mFTYriMGmMvu3t4rP2oYfL_q0H-U69vt9iGcRgBICb-0ZZAD2UfT4fiGpFe4SF5gw/s1600/doodle_take_challenge.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMA7K2bVloZ_UEuslf-WZuPMH8A_tHH44H7oRM1u7RdhcxoHELUdUbkrgqojp86Zk7y9-099WFq_mFTYriMGmMvu3t4rP2oYfL_q0H-U69vt9iGcRgBICb-0ZZAD2UfT4fiGpFe4SF5gw/s320/doodle_take_challenge.jpg" width="222" /></a></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmpBZR5cJhUeBzf5RJxoZavxseOTdayHAmQIi6D9w9vCueV-j9RU2PrFujdBghTFox96KBLULO1HhJtbluDm5Vs-Wxsck0v1GQ6OmYtVViaKcaIRUeK0Nvk1C8xZ5vbSeFiUiUgmyVuE/s1600/Doodle_start_doodle.jpg" imageanchor="1" style="margin-left: 0; padding-left: 0; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmpBZR5cJhUeBzf5RJxoZavxseOTdayHAmQIi6D9w9vCueV-j9RU2PrFujdBghTFox96KBLULO1HhJtbluDm5Vs-Wxsck0v1GQ6OmYtVViaKcaIRUeK0Nvk1C8xZ5vbSeFiUiUgmyVuE/s320/Doodle_start_doodle.jpg" width="239" style="margin-left: 0; padding-left: 0;" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJOkPsbsJrpz4MYCl5Iq0ycYCZdkOv67XqbKtGQ8R83jI6EogGmqFwKjdwFNUve73594XFlMRSzDuGfL6jABLqBJZWcE1WZ-O8wabi0w6IwazZGqpx_W4NonpOjqOuLdAz7ZerleYiqaM/s1600/Doodle_doodler.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJOkPsbsJrpz4MYCl5Iq0ycYCZdkOv67XqbKtGQ8R83jI6EogGmqFwKjdwFNUve73594XFlMRSzDuGfL6jABLqBJZWcE1WZ-O8wabi0w6IwazZGqpx_W4NonpOjqOuLdAz7ZerleYiqaM/s320/Doodle_doodler.png" width="222" /></a></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVkndN1LqIknUSfHpb1ctZBecjJrCcgGWVEQpTrfdP8vegHsd4TCjfQ-gBIQRCi8_ZOwFsLMK-Mwi4UWrVw1MzCHRwOxeXUhOAi0W68J4MoHPaafVlvgXzIhmomdNWw_x8bNuj1RT_5I/s400/Doodle_nominate.jpg" style="margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVkndN1LqIknUSfHpb1ctZBecjJrCcgGWVEQpTrfdP8vegHsd4TCjfQ-gBIQRCi8_ZOwFsLMK-Mwi4UWrVw1MzCHRwOxeXUhOAi0W68J4MoHPaafVlvgXzIhmomdNWw_x8bNuj1RT_5I/s400/Doodle_nominate.jpg" width="232" align="left" style="margin-left: 0; padding-left: 0;" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL6XEmyzRWDQBPXkfHiyGgml-BtG-w5cZ30jWyo63gXhipdfSqszBqCY7SwaHFPe3UvH9kVR6fUfKswyXBAn0wDAuzYy2ojh3hzgpxNhggQEfRqLh4y8EeYaHTYW9Pm_oFxPQEGitovjU/s1600/doodle_dots.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL6XEmyzRWDQBPXkfHiyGgml-BtG-w5cZ30jWyo63gXhipdfSqszBqCY7SwaHFPe3UvH9kVR6fUfKswyXBAn0wDAuzYy2ojh3hzgpxNhggQEfRqLh4y8EeYaHTYW9Pm_oFxPQEGitovjU/s320/doodle_dots.jpg" width="223" /></a></p>
<p style="clear:both;margin-top:6em;">Doodle4 designer Ryen Leung provides a great overview of this fun tool in the first five minutes of this video:</p>
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/NtjM6kl90Dc?rel=0" width="560"></iframe>Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-63591728073364013252014-11-17T11:50:00.000-05:002014-11-17T11:50:11.360-05:00Mind and Life Institute information architecture and UX design<p><a href="http://mindandlife.org">The Mind and Life Institute</a> researches and supports interest in contemplative science, bringing together scientists and scholars from contemplative traditions to investigate topics such as addiction, ethics, and emotions. As part of repositioning itself based on a new set of initiatives (ethics, education, and human development; craving, desire, and addiction; and mapping the mind), MLI wanted to redesign its website to promote deep investigation into the wealth of research the organization has funded and encouraged.</p>
<p>We began by drafting scenarios for the three primary audiences – scientists, scholars, and "interested laymen" – relying on MLI's experience with those groups, as well as our own interviews with interested laymen, to define desired interactions. Based on those scenarios, we developed a site structure and wireframes for a responsive experience that used curated promotions to expose relationships between multiple types of site content, allowing visitors a complete picture of the latest insights in contemplative science. We consulted with the visual designer and the development team through site launch to ensure that our layouts were accurately translated to the final site.</p>
<p><b>Services provided:</b></p>
<ul>
<li>User experience conceptualization and design</li>
<li>Information architecture</li>
<li>User interface design</li>
<li>Visual design consultation</li>
</ul>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvhx91c8dXnMwEYo7M3qejM_nOD5gTFiSzUPTzVH7cEWAkXZO8thlwMtBMNnqP_Ab5ABZvZWlcrzd5lEQkpAh4lK-3-d43mdmDlm7AFtfHKblzwbYPp94UEoo_s6OoXNzBRloooBbK4nIK/w845-h861-no/mli_home_wireframe.png" imageanchor="1" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvhx91c8dXnMwEYo7M3qejM_nOD5gTFiSzUPTzVH7cEWAkXZO8thlwMtBMNnqP_Ab5ABZvZWlcrzd5lEQkpAh4lK-3-d43mdmDlm7AFtfHKblzwbYPp94UEoo_s6OoXNzBRloooBbK4nIK/w845-h861-no/mli_home_wireframe.png" width="500" /></a><br />
<span class="caption">MLI home page wireframe</span></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEO815ApsCW8Ps0RJ6phAdgTyB3nU2MPd4cKXlQKFISezQy5-xrruqovCpZQP0lsAMPqb-fYZDP9WeSOWjB0G3TQExTkEXfBjVorIUXSB0ADHe-1F5QSglqTGB1v1W43L5PMIdiGnkmNYd/w556-h860-no/mli_initiative_wireframe.png" imageanchor="1" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEO815ApsCW8Ps0RJ6phAdgTyB3nU2MPd4cKXlQKFISezQy5-xrruqovCpZQP0lsAMPqb-fYZDP9WeSOWjB0G3TQExTkEXfBjVorIUXSB0ADHe-1F5QSglqTGB1v1W43L5PMIdiGnkmNYd/w556-h860-no/mli_initiative_wireframe.png" width="500" /></a><br />
<span class="caption">MLI initiative page wireframe with related content links at right</span></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlmvoxefzAYmLCSlwzmMYjghd0VvprdQDbtnDd_H2O1o0PfBz2vm0H0VFSpuU8wJ5PjSA_PMcBW1XLeKuKx3yIE6ZRDujU2Y3WKDrC7KhOpexLzdkPaMsJ_qSr_DfjB-pr9_8op0Gs4mkq/w573-h861-no/mli_featurededitorial_wireframe.png" imageanchor="1" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlmvoxefzAYmLCSlwzmMYjghd0VvprdQDbtnDd_H2O1o0PfBz2vm0H0VFSpuU8wJ5PjSA_PMcBW1XLeKuKx3yIE6ZRDujU2Y3WKDrC7KhOpexLzdkPaMsJ_qSr_DfjB-pr9_8op0Gs4mkq/w573-h861-no/mli_featurededitorial_wireframe.png" width="500" /></a><br />
<span class="caption">MLI featured editorial page wireframe with related content links and fat navigation dropdown</span></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsTbhwmolIAv-UKbZAQqDCYLGfFsJgIhxiYmc3BPZilpGrIkw4viDD6dwZTZUvttwu5K3a1Z-IjRsLuVmYXAM3nS8WwiLUewRd2mdNNDcERGs8EynhQhPo8S7Z0TuAb9HGtRnBgwkEWdZC/s1600/mli_home_designed.png" imageanchor="1" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsTbhwmolIAv-UKbZAQqDCYLGfFsJgIhxiYmc3BPZilpGrIkw4viDD6dwZTZUvttwu5K3a1Z-IjRsLuVmYXAM3nS8WwiLUewRd2mdNNDcERGs8EynhQhPo8S7Z0TuAb9HGtRnBgwkEWdZC/s640/mli_home_designed.png" width="500" /></a><br />
<span class="caption">MLI home page. Visual design by <a href="http://www.johnhalldesign.com/">John Hall Design Group</a>; development by <a href="http://pixelslam.com">pixelslam</a>.</span></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim_uPpH1Dsez2gl9FXlcyf2StiAJTRZHKdgGKL4GVWRgBNTv11yCZK8d-LFDTMJHjx2uDs_kD1xEnxbM21iADgT-IGwegznHsx8Bt7bZA1ZwSvf7IBweS7oMjqEx-wPwNJ6jPxvQz0c9q3/s1600/mli_home_mobile_designed.png" imageanchor="1" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim_uPpH1Dsez2gl9FXlcyf2StiAJTRZHKdgGKL4GVWRgBNTv11yCZK8d-LFDTMJHjx2uDs_kD1xEnxbM21iADgT-IGwegznHsx8Bt7bZA1ZwSvf7IBweS7oMjqEx-wPwNJ6jPxvQz0c9q3/s640/mli_home_mobile_designed.png" width="300" /></a><br />
<span class="caption">Mobile phone view of home page</span></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieLq41_DsRb_i0Kg_kuYpxCPqtyLD6kjY6hGZcNlHjXOuIrIsfZhzw2TAGuYRKsM9w5RIGqtEr94UiekhUuQlCyZ0kBCGEZv55pLuHhbcT4p9AxumWbVEN8aLOopSufMLEzzfNLVcNQmtN/s1600/mli_featurededitorial_designed.png" imageanchor="1" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieLq41_DsRb_i0Kg_kuYpxCPqtyLD6kjY6hGZcNlHjXOuIrIsfZhzw2TAGuYRKsM9w5RIGqtEr94UiekhUuQlCyZ0kBCGEZv55pLuHhbcT4p9AxumWbVEN8aLOopSufMLEzzfNLVcNQmtN/s640/mli_featurededitorial_designed.png" width="500" /></a><br />
<span class="caption">Featured editorial page</span></p>
Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-26753212354984935122014-06-26T15:56:00.000-04:002014-06-26T17:40:17.680-04:00 Visual design tips for app developers – consistency in the big picture: beyond where to place the button<p>In the book <a href="http://amzn.to/XDObkX"><i>Visual Usability</i>,</a> we introduce what we call the "meta-principles" – three principles that are fundamental to the success of user interfaces. Consistency, <a href="http://blog.nimblepartners.com/2011/01/visual-design-tips-for-web-apps-4.html">hierarchy</a>, and personality are not new to UI design. Considered primarily, however, they provide a structure for assessing and making decisions about the large and small visual characteristics of a UI design. When designing, keeping these principles in mind helps focus thinking about the effect of visual characteristics on how people interpret what they see from both the <i>functional</i> and <i>aesthetic standpoints.</i></p>
<p>Interfaces have a big job to do. They need to provide information on multiple levels – convey content, communicate interactivity, and provide feedback. Before they can do that, they need to help someone know, or reinforce expectations of, what they are looking at. In <i>Visual Usability,</i> we go into detail about how visual characteristics of layout, type, color, imagery, and controls affect perception of consistency. Our goal is to raise awareness of these details and their effects. We want to help teams understand how people perceive visual characteristics, and make conscious decisions about them.</p>
<p>This post begins to address consistency in the big picture – as a principle for considering the <i>approach</i> to an interface rather than its details – concepts on a different strategic plane than where to place a button. From this perspective, it helps frame thinking about UX, and align UX with how it is represented through UI. </p>
<p><b>Internal consistency</b><br />
Humans are wired to identify patterns in what we see and assign meaning to them. When establishing consistency within an application, lack of attention to consistent placement, color, styling, imagery (including symbols and icons), and typography can indicate difference to users, breaking the patterns they've perceived, and making them "stop and think." </p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcUQt0djUe_RObVDDESz0ePV99tSbBOhv-3vVjcCJYoKAjMfpXbSgRDXO4AqU_bOV9L0IydzWg6zflaoirnqwMRpdrKHjhH6J14hxHXkNLgeT5J91sPI5Rw5vDf4JJTF3j7E3H402TSTwi/s1600/popup_nightmare_clean.png" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcUQt0djUe_RObVDDESz0ePV99tSbBOhv-3vVjcCJYoKAjMfpXbSgRDXO4AqU_bOV9L0IydzWg6zflaoirnqwMRpdrKHjhH6J14hxHXkNLgeT5J91sPI5Rw5vDf4JJTF3j7E3H402TSTwi/s1600/popup_nightmare_clean.png" alt="" /></a><br />
<span class="caption">This version of an older application had three separate ways of closing a window, forcing users to remember different paradigms every time they interacted with it.</span></p>
<p>Making sure a UI is internally consistent – that all the close buttons are styled similarly and placed similarly within a screen and from screen to screen within an application, for example – is familiar territory. Making sure that the patterns you choose to adopt and make consistent are in line with your users’ expectations is also familiar territory. What is different is calling out and thinking about the role consistency plays in affecting perception at the UI framework level.</p>
<p><b>External consistency</b><br />
When Google created and launched Google Docs, the interface adopted symbols and patterns familiar to people who use desktop word-processing programs. This was a smart move strategically; consistent symbols reinforced similarities between the desktop and cloud word processing experiences, making Google Docs seem familiar and approachable. This helped Google transition users to word processing in the cloud. Consistency across platforms or applications is <i>external consistency.</i></p>
<p><a class="noborder" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5EdhD_rxm63VhiAR5K_onMfGLrvaDTvz4AJabgqk8V-StVSD2_jF5ajeP3whdz57e3JJW7Iw9ePp_0-RE4wxtSdYP9Q1AXTRBs3bM54vaX2d7BP_ftOTRNbvpOUXnxQ_ifmWOFw0rjVY/s1600/Google_docs_text_ui.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5EdhD_rxm63VhiAR5K_onMfGLrvaDTvz4AJabgqk8V-StVSD2_jF5ajeP3whdz57e3JJW7Iw9ePp_0-RE4wxtSdYP9Q1AXTRBs3bM54vaX2d7BP_ftOTRNbvpOUXnxQ_ifmWOFw0rjVY/s1600/Google_docs_text_ui.jpg" style="margin-left: 0; padding-bottom: 1em; padding-left: 0;" width="600" /></a><br />
<a class="noborder" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0FtkoOHDFcPnOvoMvKs6cnYeWyFdEFJdgwoI-cSu6yjWhvOH3tH-Ye1Tl6K83QJ8DR2hJa_WGmyUaqhxR1pUd_MGGxOb-o-glvR98o4tQSqLWLCRXiK0G2CLogwtapTNxtH94Rg4vygk/s1600/word_ui.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0FtkoOHDFcPnOvoMvKs6cnYeWyFdEFJdgwoI-cSu6yjWhvOH3tH-Ye1Tl6K83QJ8DR2hJa_WGmyUaqhxR1pUd_MGGxOb-o-glvR98o4tQSqLWLCRXiK0G2CLogwtapTNxtH94Rg4vygk/s1600/word_ui.png" style="margin-left: 0; padding-left: 0;" width="600" /></a><br />
<span class="caption">Google Docs UI, top; Microsoft Word 2010, bottom.</span></p>
<p><a href="http://750words.com/">750words.com</a> is also an application used for writing, but it has a different goal, and targets different users. Its tag line is "Private, unfiltered, spontaneous, daily," and the site focuses on people who want to write regularly. The UI provides only essential visual information – where to type – and the number of words written. The screen shows optional visual feedback for how often people are writing. UI elements and design characteristics do not say "word processing," but still encourage people to write. The decision to design the UI framework to be inconsistent with word processing applications helps the app show how it is different from – and better suited to – helping people write regularly.</p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKhtHeSLVJDA51_y7SqX5UIkvZMtlaYCq9pg8ilpeOTyAH09-hzILrH9TtL87D7-WQfgSGoj82PCjcKvEACStZYDp64TpziTy3SQgBqNDdVXSRB6YWvyyxZDmQjSgu-ko_7_p9cAtQE2VZ/s1600/750_words_screen_post.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKhtHeSLVJDA51_y7SqX5UIkvZMtlaYCq9pg8ilpeOTyAH09-hzILrH9TtL87D7-WQfgSGoj82PCjcKvEACStZYDp64TpziTy3SQgBqNDdVXSRB6YWvyyxZDmQjSgu-ko_7_p9cAtQE2VZ/s1600/750_words_screen_post.jpg" width="600" alt="750words" /></a><br />
<span class="caption">750words.com only indicates where to write, and supports writing regularly.</span></p>
<p><b>Consistency and novelty</b><br />
Advertising and promotional media in general rely on inconsistency – or novelty, as it's known in communication theory – to get people's attention. Novelty can be a differentiator. Novelty as an approach can succeed when it’s authentic and effectively represents and reflects a difference that people find valuable. 750words.com takes a novel approach to writing online, and the choices made in its interface reflect that. Novelty can make visual information more memorable, as several studies,including <a href="http://cvcl.mit.edu/papers/Borkin_etal_MemorableVisualization_TVCG2013.pdf">this October 2013 one</a> [PDF], have found.</p>
<p>While there’s nothing wrong with using platform standards as the initial foundation for a design, relying on them for the final design inevitably results in an app that lacks unique visual appeal. An app designed this way may get to market more quickly than an app that doesn’t, and provides interface characteristics consistent with other apps, rendering it easy to pick up and use. But without key visual differentiators that distinguish it from its competitors and help audiences build affinity, it risks falling behind the pack by not standing out.</p>
<p>For example, compare <a href="http://openmbta.org">OpenMBTA</a> (below left), an app for Boston’s public transportation system, to <a href="http://www.grocerygadgets.com/Gadgets/grocery-gadget.aspx">Grocery Gadget</a> (below right), a grocery shopping app:</p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjc1ba2cdWoB3EZqDc5e_cgyoqdp80lDcZxdHQ1QHla3fL3ZLFaomzdSKbmt-aKVUtxhc4lL3TxUqSvqKDHvMwQtK9TjCgityE3RfYTbzoDbLjn-PVkYNLgNpWnBHGK5Jwf01nj2urtNtf/s1600/open_mbta.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjc1ba2cdWoB3EZqDc5e_cgyoqdp80lDcZxdHQ1QHla3fL3ZLFaomzdSKbmt-aKVUtxhc4lL3TxUqSvqKDHvMwQtK9TjCgityE3RfYTbzoDbLjn-PVkYNLgNpWnBHGK5Jwf01nj2urtNtf/s1600/open_mbta.png" width="275" alt="OpenMBTA" style="margin-right:1em;" align="left" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi39VctzP6CipQcCJhQ2aA_4yFzO5diUZNkHy5OsDL1cfdufg_bqiQZ10uu7YF1VFd1rTnyceX47dro1mF8LjlueLH-ehbmiQAb3bFo6RyyttX9gmRaVUeCQE1-xXMIBSw43Tm7-nhXUMdf/s1600/grocery_gadget_ios7.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi39VctzP6CipQcCJhQ2aA_4yFzO5diUZNkHy5OsDL1cfdufg_bqiQZ10uu7YF1VFd1rTnyceX47dro1mF8LjlueLH-ehbmiQAb3bFo6RyyttX9gmRaVUeCQE1-xXMIBSw43Tm7-nhXUMdf/s1600/grocery_gadget_ios7.png" width="250" alt="Grocery Gadget" /></a></p>
<p>The apps serve completely different purposes, but because both rely almost entirely on iOS 6 visual conventions, they look so similar that they might as well be the same app. Even the custom “prepare/shop” toggle at the top of the Grocery Gadget screen isn’t enough to visually distinguish it from OpenMBTA.</p>
<p>By contrast, public transportation app <a href="https://itunes.apple.com/us/app/cg-transit-public-transport/id430848814?mt=8">CG Transit</a>, while basing some of its look and feel on iOS 7 flat design standards, applies simple visual upgrades that push it beyond the base set of rules. Color bullet points connect a list of stops, a gradated map gives a high-level overview of the subway line’s path through the city, and a side menu with icons and color highlights combine to create classic visual appeal that make CG Transit feel fresher and friendlier than OpenMBTA.</p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaSiW59z0Oeyfqrtg8Yclhu9NT2DdUsIaXgE669tdtvTVkgAuIPm2W1wFBZm_RpgDF76P5-Hhp_6rI1awCBLc_qrOg4aU1ZaAR9OfdIe05tL8IR3TWdkui-PN-zuyYZRRbxtTMwm6dRzwd/s1600/cgtransit1.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaSiW59z0Oeyfqrtg8Yclhu9NT2DdUsIaXgE669tdtvTVkgAuIPm2W1wFBZm_RpgDF76P5-Hhp_6rI1awCBLc_qrOg4aU1ZaAR9OfdIe05tL8IR3TWdkui-PN-zuyYZRRbxtTMwm6dRzwd/s1600/cgtransit1.png" width="250" style="margin-right:1em;" alt="CG Transit subway line screen" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidy5Ux3d6-acecUzOmPvI0bsyIPwR0ov4Dpj5OR74Wgb0ROMNJ6fpSOZXCNicCXAEvnaCtoBLNgLGIGUeWA4ZytYL7B5C706G5OPv8w1wCioQdAW9pz3-N5j0FbkRkX1urx-06nc602M_8/s1600/cgtransit2.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidy5Ux3d6-acecUzOmPvI0bsyIPwR0ov4Dpj5OR74Wgb0ROMNJ6fpSOZXCNicCXAEvnaCtoBLNgLGIGUeWA4ZytYL7B5C706G5OPv8w1wCioQdAW9pz3-N5j0FbkRkX1urx-06nc602M_8/s1600/cgtransit2.png" width="250" alt="CG Transit side menu" /></a>
<p>Striking a balance between consistency and novelty is at the heart of designing an effective and desirable user experience and interface. As one of the key visual principles behind what people notice and why, we hope you'll reconsider consistency, be aware of it, and use it when making decisions about how to approach and design visual interfaces.</p>
<p style="font-size:0.9em;font-style:italic;">Deborah A. Levinson also contributed to writing this blog post.</p>Tania Schlatterhttp://www.blogger.com/profile/10917017168082289377noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-54812629031006188392014-06-09T13:47:00.000-04:002014-06-09T13:47:00.318-04:00Using semantic differentials to evaluate visual design preferences<p>We recently <a href="http://blog.nimblepartners.com/2014/04/increasing-appeal-for-lovetoknow.html">completed a redesign for LoveToKnow</a>, a site that provides advice on everything from beauty tips and pet health to travel recommendations and party-planning. LoveToKnow wanted a clean, clear design that welcomed users while also feeling believable and authoritative. The new designs had to reveal the site’s wealth of content without being overwhelming, encouraging people to spend more time browsing relevant articles, and ultimately, turning to LoveToKnow as a trusted source for help with all kinds of topics.</p>
LoveToKnow wanted to test designs before finalizing them for launch. A/B testing was our first choice, but wasn’t an option for technical reasons. How could we confirm whether users preferred the new look and feel?</p>
<p>Visual design preferences are by definition subjective. However, tools like <a href="http://en.wikipedia.org/wiki/Semantic_differential">semantic differentials</a> and <a href="http://en.wikipedia.org/wiki/Likert_scale">Likert scales</a> give people the terms they need to describe subjective opinions by choosing from a range of possible answers between two opposing statements. With this data, researchers can quantify what otherwise seems unquantifiable.</p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiql8OIzwB9Up4JpGfuQ3Eutle3YIIFFkna1FtseBFZ-frjjTQfWiWqQLVx8ezZocLnhyphenhyphen57yByaBxegkjHygbVDwGtSuh7Jm5XiSlR3O6rKEunV21xATzulM46RvPGepqtKQazhewK1CKRJ/s1600/semantic_differential.png" class="noborder"><img alt="semantic differential scales" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiql8OIzwB9Up4JpGfuQ3Eutle3YIIFFkna1FtseBFZ-frjjTQfWiWqQLVx8ezZocLnhyphenhyphen57yByaBxegkjHygbVDwGtSuh7Jm5XiSlR3O6rKEunV21xATzulM46RvPGepqtKQazhewK1CKRJ/s1600/semantic_differential.png" width="600" style="margin-left: 0; padding-bottom: 1em; padding-left: 0;" /></a><br />
<span style="font-size: 0.9em; font-style: italic;">Sample semantic differential scales</span></p>
<p><b>Designing the test</b><br />
LoveToKnow had questions they were hoping testing would help answer. We knew who our audience was: primarily middle- to upper-income women with some college education and moderate internet experience. We then broke the tests into three groups: one that set a baseline by evaluating the current designs before the new ones, and two that only saw the new designs, albeit in different orders in case viewing order affected preference.</p>
<p>We began by setting up a scenario so that test participants would all approach the designs with the same mindset: <i>Imagine you have a puppy, and are wondering how much bigger it will get. You type “is my dog full-grown?” into a search engine, and click through to this page.</i> Beginning with a scenario familiar to the dog owners we recruited immediately made the article page designs relevant, and a more realistic scenario is more likely to yield honest results.</p>
<p>Once users had the right mindset, we asked open-ended questions to gather general impressions of the page and website: what did people think the page offered? What did they think the site offered? What would they click on?</p>
<p>We also provided three semantic differential scales:</p>
<ul>
<li>credible / not believable</li>
<li>inviting / unappealing</li>
<li>helpful / waste of time</li>
</ul>
<p>Finally, we provided the same scales for three home page design options to help us choose a winner.</p>
<p><b>Building the test</b><br />
Designing the questions, as it happened, was the easy part. The much trickier part was creating a test that would help us get answers through remote testing. We’ve had good experiences with <a href="http://usertesting.com/">usertesting.com</a> before and believed we could make it work here, too; it was just a matter of linking our questions and designs to guarantee that users would proceed in a straight line instead of accidentally meandering off into the woods.</p>
We settled on a split-screen approach: the questions would be coded in <a href="http://surveymonkey.com/">SurveyMonkey</a> and show up in a left-hand frame. In a larger, right-hand frame, we’d display the page designs so that people would have them to refer to as they answered the questions. We also set things up so that clicking anywhere on a design would take people to the next one to review.</p>
Over and over through our dry runs, though, we found that people got off-track immediately. They couldn’t help but click on what looked like a real web page to them, and no amount of written instructions stopped that basic behavior. (A real-life reminder of the usability truism that people often ignore written instructions!)</p>
What did eventually curb the clicks was presenting test participants with a thumbnail of the appropriate page design in the survey, and asking them to confirm they were looking at the right design before answering questions. The colorful image broke up the survey’s wall of text and grabbed enough attention for people to stop, read, and understand.</p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP6R0ZU1eg9EoOX1sZnbWJ7xVyOU8_KnOLgL4kYRz7DfauYxtpw8lLfY-JErv7vnP5RK7d4i3_rAp2MAEwRcogcc09YNwK0nJjVwkn7EML4UhjBoOcTWsRGdrtGfvGn0zATZdikE9nYQGv/s1600/LTK_splitscreen_newarticle.png" class="noborder"><img alt="split-screen test image" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP6R0ZU1eg9EoOX1sZnbWJ7xVyOU8_KnOLgL4kYRz7DfauYxtpw8lLfY-JErv7vnP5RK7d4i3_rAp2MAEwRcogcc09YNwK0nJjVwkn7EML4UhjBoOcTWsRGdrtGfvGn0zATZdikE9nYQGv/s1600/LTK_splitscreen_newarticle.png" width="600" style="margin-left: 0; padding-bottom: 1em; padding-left: 0;" /></a></p>
<p>After that, it was just a matter of watching test videos and analyzing our SurveyMonkey data, which the site helpfully provides as charts and free text.</p>
<p><b>The final results</b><br />
Some of what we discovered:</p>
<ul>
<li>The new article page design was slightly more likely to encourage exploring the site. While participants found both old and pages credible, design had little to no effect on perception of credibility, and there was scant difference in design appeal.</li>
<li>However, the new design unquestionably helped people understand that LoveToKnow provided information far beyond just dog content, an important improvement.</li>
<li>Results for all three home pages were largely positive and equal, but our second design had an edge over the others, particularly in terms of credibility.</li>
</ul>Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-31127446407987596352014-06-06T11:42:00.000-04:002014-07-08T17:33:37.568-04:00Big data UX, UI and IAFor the past three and a half years, Nimble Partners has worked with a big data company to design two suites of web and mobile-friendly applications investigating multiple aspects of the labor market, including demand, supply, job posting, job search, and career exploration. The applications serve a wide user base: job seekers of all ages and backgrounds, the state and local government officials assisting them, public- and private-sector employees researching labor market opportunities, and others.<br />
We worked directly with customers, product management, and developers to redesign some applications, while building others entirely from scratch. Our work included both the customer-facing user experience as well as the tools administrators rely on daily to help job seekers and manage the applications. Customers were delighted with the results: one said we’d “nailed Jell-O to a tree.”<br />
<b></b><br />
<b>We provided:</b><br />
<b>
<ul>
<li>User experience conceptualization and design</li>
<li>Information architecture</li>
<li>User interface design</li>
<li>Visual design</li>
<li>User testing</li>
</ul>
</b>
<br />
We can't show this work publicly. <a href="http://nimblepartners.com/index.html#contact">Contact us</a> for access to samples via our demo site.Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-25650550694884629712014-05-16T15:01:00.001-04:002014-06-10T13:28:11.252-04:00Product strategy vs. UX strategy – thoughts from UXPA Boston 2014<i>Note: this post was updated June 10, 2014.</i> I read Jeff Gothelf's post "<a href="http://www.jeffgothelf.com/blog/there-is-no-such-thing-as-ux-strategy/" target="_blank">There is no such thing as UX strategy</a>" after seeing tweets about it a while ago, and didn't think too much about it. Recently, however, I've been thinking about how (and if) UX strategy manifests in UI design decisions, so I decided to attend the <a href="http://uxpabostonconference2014.sched.org/" target="_blank">UXPA Boston 2014 conference</a> session <a href="http://uxpabostonconference2014.sched.org/event/cac37cb2ea13d3849711bf1fbe2ca6bd#.U3Zy26VEikU" target="_blank">"UX Strategy exists, but what is it?"</a> with this in mind.<br />
<br />
Gothelf's post, which claims "[T]here is no such thing as UX strategy. There is only product strategy," inspired the session, moderated by Diana DeMarco Brown. It was great to hear stories from panelists Sarah Bloomer, Eva Kaniasty, and Lori Landesman. During Q&A, one attendee said he agreed with Gothelf, but unfortunately, there was not much time left to explore the statement. With a night to sleep on it, I realized that statement was crucial to helping me define my own thoughts on the topic.<br />
<br />
To me, UX strategy is the goals and plan established for helping and delighting end-users, as well as meeting the needs of stakeholders, and in the case of enterprise applications, purchasers. Stakeholders and purchasers are types of users. My bias as a designer is to go the extra mile for end users – the people who use what I design. In the case of a consumer app, the user and the purchaser are the same, so in these situations I agree that product and UX strategy are the same. In the case of enterprise applications, user and purchaser goals and needs are often vastly different. Like so many answers to UX design questions, the answer to the question of whether UX strategy is different from product strategy is, "it depends." It depends on who your users are, who the organization is, and what the goals for the product are.<br />
<br />
Focusing on the purchaser has led to dreadful and compromised enterprise application experiences. I've worked on enterprise applications for ATG (now Oracle), Endeca, (also now Oracle), and Curaspan, to name a few. In those cases, UX was part of product strategy, both functionally and conceptually. That in itself was not a problem. However, while stakeholders and product managers believed in UX, when it came down to coding and shipping, their focus was on meeting the needs of buyers. This makes sense given how enterprise product management success is measured – in sales, obviously. Like an oldest child in a family, enterprise product strategy takes up a disproportionate amount of stakeholders' time and attention. UX is the younger sibling, wanted and adored, but left to its own devices due to the focus on the oldest child. With intermittent support, UX for enterprise applications often lacks the resources it needs to sustain it and help it thrive.<br />
<br />
<i>Follow up note - June 10, 2014: </i>With more thought and reading, I want to add that I think enterprise product strategy can be the same as UX strategy, it is just that it often isn't. If/when enterprise product strategy focuses on providing value to purchasers by developing software that is designed to succeed by helping the people who use the applications do so effectively, efficiently, and with appropriate delight, product strategy is aligned with and subsumes UX strategy.<br />
<br />
This brings up more questions: are stakeholder and purchaser needs for enterprise applications really so different from end users, and if so, why? Also, if business stakeholders and product purchasers are types of users (as I consider them to be), then is the discussion of UX vs. product strategy really about end user-focused strategy vs. stakeholder and purchaser-focused strategy specifically in the realm of enterprise applications?<br />
<br />
<br />Tania Schlatterhttp://www.blogger.com/profile/10917017168082289377noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-1712590465513939412014-05-14T16:47:00.000-04:002014-05-14T16:47:22.476-04:00Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality<p>I recently returned from beautiful Portland, Oregon, where I spoke as part of the <a href="http://www.chifoo.org/index.php/chifoo/events_detail/speaking_the_language_of_meta-principles_consistency_hierarchy_and_personal/">Computer-Human Interaction Forum of Oregon (CHIFOO) annual lecture series</a>. The 2014 series focuses on storytelling, which can take many forms in user experience, user interface, and visual design.</p>
<p>My talk, "Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality," covered how to use the meta-principles described in <a href="http://blog.nimblepartners.com/2013/06/visual-usability-principles-and.html"><i>Visual Usability</i></a> to effectively "tell a story" by using good design to guide users through their desired pathways and tasks in an application. We think of these meta-principles as if they’re part of a language. Consistency and hierarchy are the grammar people learn while using an application: the basic elements that define how a language is spoken. The “words” we speak – that is, the visual design characteristics we choose to convey a message – create an application’s personality. These principles are so fundamental to creating successful interfaces that we call them “meta-principles.” While technology that affects interfaces changes, the underlying meta-principles hold true.</p>
<p>I'd like to thank Emily Mahood Bowman, Clodine Mallinckrodt, Fellene Gaylord, and everyone else at CHIFOO for bringing me to Portland and giving me such a warm welcome. I'll be happy to return anytime!</p>
<iframe src="http://www.slideshare.net/slideshow/embed_code/34681242" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px 1px 0; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="https://www.slideshare.net/nimblepartners/chifoo-0514-v3public" title="Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality" target="_blank">Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality</a> </strong> from <strong><a href="http://www.slideshare.net/nimblepartners" target="_blank">Nimble Partners</a></strong> </div>Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-76867057812854022622014-05-13T16:48:00.001-04:002014-06-06T10:27:57.340-04:00Redesigning Northeastern University's College of Professional Studies B.S. in Graphic Design Degree<a class="noborder" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzd-BxuqONDiIlk9mndNLOKKzCN0uDMDubmjybY8PWeyBhI0rWYwF64ShJLX-n60xRqiP_dK7hf6RMu5HWPs4AQIr7g0o9pjTKK9Ra1bzMlABArMH4TyFHs1H7GR2I8Axx6YgIm5w38GE/s1600/students_sketchboard.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzd-BxuqONDiIlk9mndNLOKKzCN0uDMDubmjybY8PWeyBhI0rWYwF64ShJLX-n60xRqiP_dK7hf6RMu5HWPs4AQIr7g0o9pjTKK9Ra1bzMlABArMH4TyFHs1H7GR2I8Axx6YgIm5w38GE/s1600/students_sketchboard.jpg" style="margin-left: 0; padding-left: 0;" width="600" /></a><br />
<br />
Founded to advance the careers of working students, <a href="http://www.cps.neu.edu/" target="_blank">Northeastern University's College of Professional Studies</a> (CPS) grants doctoral, master's and undergraduate degrees. I've enjoyed teaching Interactive Information Design 2 and advising CPS graduate digital media students for the past few years.<br />
<br />
I love systems and design, and am anxious to help higher ed better prepare students for the complex design work that we do today. I was excited to be asked to participate in a review of CPS' BS in Graphic Design degree last summer, followed by a redesign effort in the fall. The review was required for accreditation purposes, and the redesign was long overdue.<br />
<br />
While the accreditation process was written in academic language, much of the work involved what I think of as design thinking. I (re)defined a clear mission for the program based on graphic design skills that are needed today, outlined desired outcomes for students and a system for measuring results, reviewed current courses in a structured way for strengths and weaknesses against goals, and analyzed student performance data over time to understand trends and gaps. Once the required accreditation materials were complete, it was great to take all I had learned and defined and work on redesigning the degree program overall.<br />
<br />
The result of the effort is a roadmap for a revised BS in Graphic Design degree program. There are six new courses and six revised courses, which will begin to be phased in this fall. The new program maintains its practical focus and provides a stronger foundation in the traditional "roots" of graphic design, such as typography. When in place, courses and course projects will help prepare students by beginning in black and white and two-dimensional design principles, and carry through to using visual design principles to help people understand, enjoy and use visual information in static and interactive applications.Tania Schlatterhttp://www.blogger.com/profile/10917017168082289377noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-64157110534438276042014-04-01T09:30:00.000-04:002014-10-02T16:56:55.845-04:00Increasing appeal for LoveToKnow<p><a href="http://www.lovetoknow.com/">LoveToKnow</a> provides advice on everything from beauty tips and pet health to travel recommendations and party-planning. We helped LoveToKnow provide more consistency and a better user experience by first analyzing their taxonomy as part of a larger search engine marketing project with <a href="http://www.ninebyblue.com/">Nine By Blue</a>. LoveToKnow returned to us to redesign their site to improve its appeal and apply the new taxonomy to an updated, easier-to-use menu system.</p>
<p>As we translated wireframes into visual design, we ran remote usability tests to determine whether our approach resonated with the target audience. LoveToKnow's revenue model is ad-driven, and we paid close attention to this as we wireframed possible design approaches and feature refinements. Test results confirmed that the new designs helped people better understand the breadth of LoveToKnow's content, and that the new article page design better achieved the goal of site exploration.</p>
<p><b>Work included:</b></p>
<ul>
<li><b>Taxonomy analysis</b></li>
<li><b>Visual redesign</b></li>
<li><b>Heuristic review</b></li>
<li><b>Usability testing</b></li>
</ul>
<p><a class="noborder" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6B4-LL0jvZGzrwToNwPok6ZXVBhO2Qi_Ouyz09PrC8mRXS9G73jBoz_fpneWs2BOCwub44OL2NT8hZBCS-G0eIP20BM7pM-sSsXGPbi1tuYrpi_mQ2Opx7j4HbvAIpiMGM5x1F3rD60_/s1600/LTK_splitscreen_oldarticle.png" imageanchor="1"><img alt="Usability test screenshot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6B4-LL0jvZGzrwToNwPok6ZXVBhO2Qi_Ouyz09PrC8mRXS9G73jBoz_fpneWs2BOCwub44OL2NT8hZBCS-G0eIP20BM7pM-sSsXGPbi1tuYrpi_mQ2Opx7j4HbvAIpiMGM5x1F3rD60_/s1600/LTK_splitscreen_oldarticle.png" width="450" class="imgLeft" /></a></p>
<p><a class="noborder" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP6R0ZU1eg9EoOX1sZnbWJ7xVyOU8_KnOLgL4kYRz7DfauYxtpw8lLfY-JErv7vnP5RK7d4i3_rAp2MAEwRcogcc09YNwK0nJjVwkn7EML4UhjBoOcTWsRGdrtGfvGn0zATZdikE9nYQGv/s1600/LTK_splitscreen_newarticle.png" imageanchor="1" style="margin: 0 1em 1em 0;"><img alt="Usability test screenshot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP6R0ZU1eg9EoOX1sZnbWJ7xVyOU8_KnOLgL4kYRz7DfauYxtpw8lLfY-JErv7vnP5RK7d4i3_rAp2MAEwRcogcc09YNwK0nJjVwkn7EML4UhjBoOcTWsRGdrtGfvGn0zATZdikE9nYQGv/s1600/LTK_splitscreen_newarticle.png" width="450" class="imgLeft" /></a><br />
<span style="font-size: 0.9em; font-style: italic;">Remote usability tests used a split screen to display a survey and relevant page designs (top: current design; bottom: new design).</span></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_0r3DqGwotezDCeJjRW_dRDIjKGAV5An1eZ5_3uDU9OHyxZ80bJDX7GLeuj2PCy1D0YB8SlhgiuLXUupRC6Ze9Hch9B9-HRhE8GM-NSrUqSBmb60RjpkUHPWB8Lwr8cVKGfP2hJyUnMYJ/w869-h736-no/lovetoknow_home_before.png" imageanchor="1" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_0r3DqGwotezDCeJjRW_dRDIjKGAV5An1eZ5_3uDU9OHyxZ80bJDX7GLeuj2PCy1D0YB8SlhgiuLXUupRC6Ze9Hch9B9-HRhE8GM-NSrUqSBmb60RjpkUHPWB8Lwr8cVKGfP2hJyUnMYJ/w869-h736-no/lovetoknow_home_before.png" width="450" class="imgLeft" /></a><br />
<span style="font-size: 0.9em; font-style: italic;">Original home page page design.</span></p><p><a class="noborder" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhhUXbD64KT7WM87_6YKr5ljjlyedaDqdSHv4aiOxs40_mOM6kJAdyP8CLztXtrnu9TPhsJhx_JgHr-Q1a6GkWF-woIXEup1P5mYqAemzE4xIRH2tizAE1VSWEKw3ASerduLHqDAg1586P/s1600/ltk_hp-collage-vertrect-012814.jpg" imageanchor="1"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhhUXbD64KT7WM87_6YKr5ljjlyedaDqdSHv4aiOxs40_mOM6kJAdyP8CLztXtrnu9TPhsJhx_JgHr-Q1a6GkWF-woIXEup1P5mYqAemzE4xIRH2tizAE1VSWEKw3ASerduLHqDAg1586P/s1600/ltk_hp-collage-vertrect-012814.jpg" width="450" class="imgLeft" /></a><br />
<span style="font-size: 0.9em; font-style: italic;">New home page design.</span></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYIb_AEFXy-Wt0WQuvIVlHiawn__9-9cG7TOi02TS2IXlj7miWkDaFyBPHkIShI6pLQ13y94ZXWdZqAlZv5QjOcfgOJMovKOCR6AS5Hs26bRAIFJQtb0aiauiOc605rMCqyX776Ld9R2nk/s1600/ltk_Article_Fatnav_blog.jpeg" imageanchor="1" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYIb_AEFXy-Wt0WQuvIVlHiawn__9-9cG7TOi02TS2IXlj7miWkDaFyBPHkIShI6pLQ13y94ZXWdZqAlZv5QjOcfgOJMovKOCR6AS5Hs26bRAIFJQtb0aiauiOc605rMCqyX776Ld9R2nk/s1600/ltk_Article_Fatnav_blog.jpeg" width="450" class="imgLeft" /></a><br />
<span style="font-size: 0.9em; font-style: italic;">New article page and fat navigation.</span></p>Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-6298753771996586732014-03-31T13:34:00.000-04:002014-06-06T11:44:32.099-04:00Focusing on the future – website planning for the International Development Innovation Network<p>The <a href="http://d-lab.mit.edu/idin/">International Development Innovation Network</a>, led by MIT’s D-Lab, provides training and resources for innovators worldwide to create new processes and products that improve the lives of people in poverty. IDIN works from the ground up by serving local innovators; community members are most familiar with their own situation, and most motivated to improve it.</p>
<p>We helped the IDIN team organize and narrow down its goals for a new site by developing user scenarios with the team and mapping goals to specific audience needs. Through an interview with the program's sponsors at USAID, as well as a paper prototype review session with summit alumni, we gathered audience feedback on valuable features and expected usage, which provided further insights into how to structure the site and design key interactions.</p>
<p>Moving from audience and feature analysis into information architecture, we led a collaborative workshop with IDIN staff to map content and features into page types and a high-level site organization. This groundwork helped prepare IDIN for usability testing and a full site redesign.</p>
<p><b>Work included:</b></p>
<ul>
<li><b>stakeholder and user interviews</b></li>
<li><b>user scenarios – based on real people and interactions</b></li>
<li><b>prototype development</b></li>
<li><b>site map</b></li>
<li><b>content inventory and planning</b></li>
<li><b>high-level wireframes</b></li>
</ul>
<p><a class="noborder" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVQkr5b17MJzQZx5_hrcL7__zIm1B1JXtKQIYt90TuBX8mkFmzwzeq0r3QnxJQd_xIbOHEfJMVp7__T1zcUft76EXE_WKIY1euCyOSSr6d88UTWJSG2lJ5SvZBjrf1Zr86XgaWO8ChGGY/s1600/IDIN_wksp_detail2.jpg" imageanchor="1" style="margin-bottom: 1em; margin-right: 1em;"><img alt="whiteboard notes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVQkr5b17MJzQZx5_hrcL7__zIm1B1JXtKQIYt90TuBX8mkFmzwzeq0r3QnxJQd_xIbOHEfJMVp7__T1zcUft76EXE_WKIY1euCyOSSr6d88UTWJSG2lJ5SvZBjrf1Zr86XgaWO8ChGGY/s1600/IDIN_wksp_detail2.jpg" style="vertical-align: text-top;" width="150" /></a><a class="noborder" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio-wbcOrj5mT7Q8KFKJZXic3yqM9ErjdLR8RgA_k92_a0UQuzlnSTAbx1UJJubBI4c7Ijr_SPqp9PgrSApkSRq5aHJYEEB1SrQTRgcQJouSoLEjtXx3IlbLL5-gZZcIuwOnrEIZ8RXAU8/s1600/IDIN_wksp_detail.jpg" imageanchor="1"><img alt="whiteboard notes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio-wbcOrj5mT7Q8KFKJZXic3yqM9ErjdLR8RgA_k92_a0UQuzlnSTAbx1UJJubBI4c7Ijr_SPqp9PgrSApkSRq5aHJYEEB1SrQTRgcQJouSoLEjtXx3IlbLL5-gZZcIuwOnrEIZ8RXAU8/s1600/IDIN_wksp_detail.jpg" style="vertical-align: text-top;" width="350" /></a><br />
<span style="font-size: 0.9em; font-style: italic;">Whiteboard notes from content mapping session.</span></p>
<p><a class="noborder" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirnqCpG3ol1hrMRXkZn5nsf2oUYzCFrjQoioAEh2N_mPz8h6Y1-5xirwH6z_sX7-N3NkORbWYFq_MH-uJdVbagqdkbsYo1DQUpaPqtL_3HuvBt7Wj0NGSlwKrgxW47bhAtyy5fnV2F2JVk/s1600/home_mobile_crop.png" imageanchor="1" style="margin-bottom: 1em; margin-right: 1em;"><img alt="home page wireframe (mobile view)" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirnqCpG3ol1hrMRXkZn5nsf2oUYzCFrjQoioAEh2N_mPz8h6Y1-5xirwH6z_sX7-N3NkORbWYFq_MH-uJdVbagqdkbsYo1DQUpaPqtL_3HuvBt7Wj0NGSlwKrgxW47bhAtyy5fnV2F2JVk/s320/home_mobile_crop.png" style="vertical-align: text-top;" /></a><a class="noborder" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTGaLj9IVfxfPYWGkQK90KYapz_2LWZzLiS01sA9ZbuP922h61zaIKg2M-UD6aT__q19RHzWudqdImaEt_aheOWoVZTNFN9BTRvmzH_Oy82oOR-jqdoJDCd0ANLwjrWFQy96FtOvYrlh8/s1600/projects_crop.png" imageanchor="1"><img alt="project page wireframe (desktop view)" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTGaLj9IVfxfPYWGkQK90KYapz_2LWZzLiS01sA9ZbuP922h61zaIKg2M-UD6aT__q19RHzWudqdImaEt_aheOWoVZTNFN9BTRvmzH_Oy82oOR-jqdoJDCd0ANLwjrWFQy96FtOvYrlh8/s320/projects_crop.png" style="vertical-align: text-top;" /></a><br /><span style="font-size: 0.9em; font-style: italic;">Left: home page wireframe (mobile view). Right: project page wireframe (desktop view).</span></p>Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-34475574633669640282014-01-16T08:51:00.000-05:002014-05-12T11:41:09.227-04:00Happy 2014!<div style="color: #666666; font-family: Helvetica,sans-serif; font-size: 24px; margin-bottom: 4px; padding: 8px 8px 0px 8px;">
Hello, all!</div>
<div style="border: 1px solid #E6E6E6;">
<div style="margin-bottom: 40px; margin-top: 100px;">
<a href="http://www.nimblepartners.com/newyear2014/" style="border: 0px;"><img alt="Click for a special greeting for our clients and friends in the spirit of the times." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm1vlEiUWQ-Uc7tjZIQJzIG7QufE-sal0dR7WO9a8sHGmZ2KNAKNsvGbWhnla7HxnWhH22g14n3WNlpYMCtkIQBnGAK1XM9GiS9p9Ry7YLo6cTRAzF7KmwFK1QMddZR8rjUe5atbQ2Get7/s1600/emailtext.png" height="131" style="background-color: transparent; border: 0px;" width="552" /></a></div>
<div style="margin-bottom: 100px;">
<img alt="Debby and Tania – Nimble Partners" src="http://www.nimblepartners.com/email_images/holiday2014/signatures.png" height="92" style="background-color: transparent; border: 0px;" width="268" /></div>
</div>
Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-91911744673138621882014-01-14T17:07:00.000-05:002014-01-14T17:12:51.581-05:00Apple iOS 7.1 - getting closer to a graphic design/usability showdown<a data-mce-href="http://techcrunch.com/2014/01/07/apple-ios-7-1-beta-3-new-screens-buttons/?source=gravity" href="http://techcrunch.com/2014/01/07/apple-ios-7-1-beta-3-new-screens-buttons/?source=gravity" style="color: #444444;" target="_blank" title="Apple Favors Circular Buttons">Early images of Apple's iOS 7.1</a> UI changes show Apple making aesthetic decisions that affect usability. In particular, changes involve making key buttons (end call, answer call) smaller.<br />
<img alt="iOS comparison images" class="noborder" src="https://31.media.tumblr.com/f7d2dc81e3cb9910a3844be4ffbf35a1/tumblr_inline_mzeuewaJO51qztwm3.png" style="background-color: transparent; border: 0px; margin-left: 0px; padding-left: 0px;" /><br />
<span style="font-size: 0.9em; font-style: italic;">Left: iOS 7. Right: 7.1 beta.</span><br />
<span style="font-size: 0.9em; font-style: italic;"><br /></span>
From a graphic design standpoint, the changes elevate screens to the level of mini-Swiss posters – they are sharp and clean. Differentiating the end call button with color and white (black) space sets it apart from the other buttons, as it should. Is the phone icon clear to users under 30? Is it easy enough to hit the smaller "end" button? What about colorblind users? Is Apple betting that the design is so lovely everyone will just adapt, as with the early iPod touch?<br />
<br />
A lot more people use the iPhone than the early iPod touch, however, and rely on it to get things done, including making calls. Judging from the comments on the <a href="http://techcrunch.com/2014/01/07/apple-ios-7-1-beta-3-new-screens-buttons/?source=gravity" target="_blank">TechCrunch article</a>, not everyone finds the changes lovely. Some Apple fans are having a hard time – first Apple took away the gradients that helped make buttons look tappable, and now the buttons are smaller. Where will it end? I'm enjoying the battle.Tania Schlatterhttp://www.blogger.com/profile/10917017168082289377noreply@blogger.com1tag:blogger.com,1999:blog-8329255634037101739.post-77109431415492230632013-11-19T12:43:00.000-05:002014-05-12T11:50:58.038-04:00Talking with health communications students about visual design for healthcare site and app UXThis week I presented updated thinking about visual design in digital health communications to Emerson and Tufts health communications students in Lisa Gualtieri's Online Consumer Health course. It was a chance for me to test three frameworks for discussing what design can do for digital heath communications, and hear if they were helpful for students. We evaluated parts of these sites:<br />
<ul>
<li><a href="http://nihseniorhealth.gov/">NIHSeniorHealth</a></li>
<li><a href="http://healthcare.gov/">Federal Health Insurance Marketplace</a></li>
<li><a href="http://www.nlm.nih.gov/medlineplus/">MedlinePlus</a></li>
<li><a href="http://cancer.org/">American Cancer Society</a></li>
<li><a href="http://lung.org/">American Lung Association</a></li>
</ul>
<br />
Our evaluation included discussing the meta-principles <b>consistency, hierarchy, and personality</b> – how and if they were evident on the pages we reviewed and to what effect. We used the terms <b>expressive</b> and <b>classical</b> to evaluate each site's general visual approach, as well as individual details such as logos. We also looked for evidence of desirable qualities for healthcare communications by asking the following questions:<br />
<br />
<h4>
Credible</h4>
<b>Is it professional?</b><br />
<br />
<ul>
<li>Is it organized? Are there visible systems for use, styling, and behavior of navigation, type, color, and controls?</li>
<li>Is the up-front value proposition clear? Can I quickly see what the site or app is about and what can I do?</li>
<li>Are the visual characteristics appropriate? Do stylistic decisions fit the topic? Do they fit the organization of origin?</li>
</ul>
<br />
<b>Do I trust it?</b><br />
<br />
<ul>
<li>Who is this organization? Are the professional identity and any credentials presented appropriately?</li>
<li>What is the organization's goal? Is the emphasis on information or advertising?</li>
<li>Does it feel specific or generic? Do the photos feel real or generic? Are colors and styles appropriate for the content and organization of origin?</li>
</ul>
<br />
<h4>
Helpful</h4>
<b>Does it help me understand the site or application purpose?</b><br />
<br />
<ul>
<li>Can I read/use it? Is the type appropriate? Do colors contrast sufficiently with the background?</li>
<li>Can I skim and get the gist to help me decide if I want to read?</li>
<li>Does it show and tell? Are there images or video that help explain the content?</li>
</ul>
<br />
<b>Does it make sense?</b><br />
<br />
<ul>
<li>Can I see where I am?</li>
<li>Can I see where to click? Are the actions and links clear?</li>
<li>Can I tell what will happen if I click? Do control designs indicate what will happen? Can I see feedback from what I did?</li>
</ul>
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="356" marginheight="0" marginwidth="0" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/28214894" style="border-width: 1px 1px 0; border: 1px solid #CCC; margin-bottom: 5px;" width="427"> </iframe> <br />
<div style="margin-bottom: 5px;">
<strong> <a href="https://www.slideshare.net/nimblepartners/health-comm-designpost" target="_blank" title="Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course">Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course</a> </strong> from <strong><a href="http://www.slideshare.net/nimblepartners" target="_blank">Nimble Partners</a></strong> </div>
Tania Schlatterhttp://www.blogger.com/profile/10917017168082289377noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-11081109694715634932013-10-11T09:52:00.000-04:002014-01-14T17:02:05.908-05:00Error messaging – avoiding visual spankingsError messaging is visual discipline. It has to walk a fine line: drawing attention to problems without doing more harm than good. Designing effective error display is about more than providing clearly worded messages describing what went wrong and how to fix the problem; it's an opportunity to express the voice of the system, and show your app's personality. Successful error messages combine wording and design to be noticeable, actionable, and appropriately expressive.<br />
<br />
<img alt="WordPress.com CSS warning message" border="0" class="noborder" style="border:0px;background-color:transparent;padding-left:0px;margin-left:0px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiECDSEn-3KVRAOmhkQYq5oOwN5WMi4_7i0tpLhtGmsXLUkrDD8sYlBLq1F1Hoja34tWF1eRFax3YUUzOwn6CrCNIYmlBdVxA_g9gkp2rZWhaFKFKZ_VT125PoK_ByFF_6ZD_d9IcJzji1Q/s1600/wordpress_css_warning.png" width="500" /><br />
<span style="font-size: 0.9em; font-style: italic;">When the user rolls over a warning symbol in wordpress.com's CSS panel, the software provides a polite, in-context warning about thoughtful use of the !important declaration to force a style override.</span><br />
<br />
<img alt="Converse error messaging" border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj36O26hyHYNwvFSd6wQaLjkqB5rq4eGzVYpAA9swve_jTp4CaVKBC_uADxSF1TZd72yyAU4hD1vx6r4UvHMi0bsMELzNe5-Cgorg4ar2eaji4F2aDyXS_t_kKYqHP9SjACRJn-iVjO9ZZ9/s1600/converse_messages.jpg" width="500" /><br />
<span style="font-size: 0.9em; font-style: italic;">Error messaging from an older version of Converse's custom shoe-design application is playful and whimsical, in keeping with the funky, independent personality of their brand.</span><br />
<br />
How do you know when you have too much error messaging, or that your messaging is too strong? Is it this?<br />
<img alt="Orbitz error message" border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8xtk4E4pgFThJc5gTERoINHnwVzhbBC3wUJOBEIPwueSpbH-kaLZgfMKL84WiRLG_v1F7sj7zpiaoHPZzcyA6-flThnKZLxG14pCY6HOc1WeIqkLVNf8XCkyVOuVsIxo6h-qwHYlzKYzn/s320/errors_orbitz.png" /><br />
<span style="font-size: 0.9em; font-style: italic;">Orbitz's flight search interface</span><br />
<br />
Or these form errors?<br />
<img alt="Qualtrics survey error message" border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHEDLtBbt1xm93fe5S10E285zhRwPp5niwYR0ngPsyZt6Xy7aodrs22mmeM7ocQdSvt-q6ai75yANSYjsvkF3zojyzsflghWQkKtFtEHLartTO-wh_Fu3CMRQGMbv1LUhRqeuD_5HntW5I/s400/errors_survey.png" width="500" /><br />
<span style="font-size: 0.9em; font-style: italic;">Qualtrics survey error message</span><br />
<br />
<img alt="Yelp! signup error" border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUEMV-AO0jzdZBU4xT3nIh-h8OKnDcbCaCDuNVWTwz-ZrGNP5r_d1nxtcYd5hy-RX1dQqUkeAkyohxusqr7rHN3KCH90K1i9LCqg1RnlgahpkZLGFw3jD2YL3-8b2uBpYu6PaHVtORK2Xq/s640/yelp_error.png" width="500" /><br />
<span style="font-size: 0.9em; font-style: italic;">Yelp! signup error</span><br />
<br />
And surely it's this:<br />
<img alt="SuperTracker limits exceeded" border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIzSjgBZDrUdCOzLq_pGQ-yFYgezAXWPCBtgaNUVC6jSKhBePTxj5NIjLap_eb16ZcUmHHlFqY159f4UiSuqBMZa-UFWsWubKz9ClW7X3utmz2Q_OK1p-r8Q8xARGWbkc3BMoXOOf_nr4n/s320/6.16.png" /><br />
<span style="font-size: 0.9em; font-style: italic;">USDA SuperTracker food- and fitness-tracking application warnings displayed if a user exceeds daily limits for calories, fats, and sodium.</span><br />
<br />
Color, a critical part of a site's visual language, is often tied to error messaging interface patterns. Using red for errors makes sense conceptually; an error is the right place to take advantage of contrast to attract the eye. However, use of this pattern can be heavy-handed and jarring, interrupting an application’s personality. Too much contrast in a warning that isn’t life-threatening or data-erasing can feel like a “visual spanking” – like the two form error screens, or SuperTracker's alert that a user has exceeded daily calorie, fat, and sodium limits. Calling so much attention to an error overwhelms the design and tells the user, "You've been very naughty. Go sit in a corner and think about what you've done."<br />
<br />
Instead of overusing red, consider a small amount of a different contrasting hue to draw the eye, or a pale tint for your message instead of a solid, saturated color. In an urgent situation, such as a hospital setting, two levels of contrast, such as a light background tint and contrasting text style, may be necessary. <br />
<br />
<img alt="form error message" border="0" class="noborder" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRQSJtrh2eO0a9yilf4DYmMiJAnEpXR7EcJ_Uu1E-7CnXQXQcUTd1qlY-FQqAYQ86U5iOKl_b12yiwHy7Kefn70TDKxDtOObJr8TpUgUO1Fhac27k0OeBHTQqnxiQ01T-eLRWzCyz4S1my/s400/6.17.gif" width="400" /><br />
<span style="font-size: 0.9em; font-style: italic;">Polite error messaging on a login form</span><br />
<br />
Your goal is the visual equivalent of a polite tap on the shoulder to provide guidance and redirection – not a spanking.Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-344808729038582272013-09-16T11:40:00.001-04:002014-10-02T17:53:40.434-04:00October 5 workshop with UXPA Boston – Visual Design Principles and Practices for Creating Great Web and Mobile AppsEveryone wants to design a great user experience, but how do you define a great visual UI for your app? Join us and the Boston UXPA for a fun and informative day <b>Saturday, October 5, 2013</b> at Bentley University, and learn how to use visual design principles to improve the UX of your apps. We'll cover:<br />
<ul>
<li>how to evaluate visual UI design for use and appeal</li>
<li>how to develop a sound rationale for your app's visual interface design</li>
<li>how to avoid common design mistakes, make informed decisions, and elevate the ordinary</li>
</ul>
If you work on UX, coding, or product or project management for digital applications, or you're a designer who wants to create more effective interfaces, this workshop is for you. Register at <a href="https://bostonuxpaworkshopoct52013.eventbrite.com/">https://bostonuxpaworkshopoct52013.eventbrite.com</a>.<br />
<br />
<iframe src="//www.slideshare.net/slideshow/embed_code/27250007" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="https://www.slideshare.net/nimblepartners/uxpa-workshop-1013postcrop" title="Visual design principles & practices for web and mobile apps" target="_blank">Visual design principles & practices for web and mobile apps</a> </strong> from <strong><a href="http://www.slideshare.net/nimblepartners" target="_blank">Nimble Partners</a></strong> </div>Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-290166150976708932013-09-11T15:01:00.000-04:002013-09-11T16:44:11.360-04:00Goodbye, DeliciousSocial bookmarking service <a href="http://delicious.com/">Delicious</a> has just turned ten, and to celebrate their anniversary, the company is <a href="http://blog.delicious.com/2013/09/ten-years-of-delicious-same-ingredients-brand-new-flavor/">launching a beta redesign</a> at <a href="http://next.delicious.com/">next.delicious.com</a>.<br />
<br />
Unfortunately, this is the redesign that's convinced me Delicious and I have to finally part ways.<br />
<br />
I've used multiple accounts on Delicious for more than six years. While I never took advantage of its social features even before AVOS acquired the company from Yahoo! in April 2011, I liked how easy it was to store and track bookmarks of all sorts, and how clean and usable its interface was.<br />
<br />
<strike>Yahoo! made some half-hearted attempts at redesigning Delicious before selling it off; the last Yahoo! design is still active at <a href="http://previous.delicious.com/">previous.delicious.com</a>.</strike><br />
ETA: Last paragraph stricken, as we heard from AVOS that <a href="http://previous.delicious.com">previous.delicious.com</a>'s design was their initial one, not Yahoo!'s last one. My mistake.
<br />
<img alt="previous.delicious.com" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbqpWLXjVkyXPlw6ApFbdMhpNcBIquyS8eYdh2UWZ77pbMjziS1od4PwBjzQ7eLKLtRFPIylk-y-LTzOby4frUOhabLSFA3Ued1HWECAGarkkZr0Dypw-SnrRH1CTmV0S18GdKv-pEJll/s640/previous_delicious.png" width="600" /><br />
<span style="font-size: 0.9em; font-style: italic;">previous.delicious.com (UI prior to September 2011)</span><br />
<br />
This design is a little too boxy for my taste, but at least my bookmarks and the date I bookmarked them take center stage, and the search finds numerous relevant results. The <a href="http://delicious.com/">current design</a>, however, puts far too much emphasis on a previewing area, throwing off the visual hierarchy:
<br />
<br />
<img alt="current delicious.com" border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJt5MvOQ37UvDhTYPIWbGfXpIPeTcLb_mNQfct7z-cJ2GnsNUf7EzrgPUtCzxQ7RhbgzHOanX-q1zjgd183zLEuibtRi3G2nZ0t7FhbvP-Y1ydG28nb4gSPG8TF-ESTEJhkIKRA360EzlP/s640/delicious_current_home.png" width="600" /><br />
<span style="font-size: 0.9em; font-style: italic;">delicious.com (UI after September 2011)</span><br />
<br />
I don't like it, but I was able to live with it, at least until I discovered how badly the new application architecture had broken search – which no longer returns as many relevant results as the old search on previous.delicious.com – and that you could no longer edit a bookmark to fix an out-of-date or incorrect link – an astonishing omission for a <i>bookmarking</i> application.<br />
<br />
So when I heard Delicious was being redesigned for its anniversary, I hoped these major usability issues would be addressed, along with its disappointing visuals.<br />
<br />
Nope.<br />
<br />
<img alt="next.delicious.com" border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8o0bkB5pEbtuq1ijV3LDrvsUBWsSzQRCUnqG-KKscsZekpXCG9yqTt0rFTRiaHwzNAv5Dfq58vYxI_Hm5DC3pjVKfHqo4Z90qjjpo8cycgEaxQozwa_2GUpqod053MWTfI-uKM0WIa6Sk/s640/delicious_next.png" width="600" /><br />
<span style="font-size: 0.9em; font-style: italic;">next.delicious.com (beta UI, launch date TBD as of this blog post)</span><br />
<br />
What's working:<br />
<ul>
<li>The simple typography in blue and shades of gray is easy on the eyes.</li>
<li>Delicious' corporate blue has always been a particularly pretty shade of the color.</li>
<li>Links get an appropriate amount of space in the layout relative to their importance in the visual hierarchy.</li>
<li>And ... no, that's it.</li>
</ul>
<br />
What's not working:<br />
<ul>
<li>The vibrant blue in the left column is too strong, drawing attention away from the link area.</li>
<li>The mysterious histogram below the user's name, which presumably represents activity over time, but which is wholly non-interactive and therefore utterly useless. (It's presumably an attempt to call back to Yahoo!-era Delicious' history graph feature.)</li>
<li>Equally mysterious dual numbers (not shown in this screenshot) that may accompany a bookmark identify whether you were the first user to save a specific link – not that anyone will guess that's what the extra number means without rolling over it for a tooltip.</li>
<li>Contrast of the "search" type in its form field is so poor – a mere 1.3:1 ratio, according to <a href="http://www.paciellogroup.com/resources/contrastAnalyser">Colour Contrast Analyser</a>, when 5:1 is the minimum to hit AA accessibility ratings – that even I, with my 20/20 corrected vision, nearly couldn't tell I was looking at a search box. Heaven help a user who's actually visually impaired but can generally get by without a screen reader.</li>
<li>And the unforgivable sins: search still doesn't work as well as it did on previous.delicious.com, and you still can't edit a link.</li>
</ul>
<br />
Worse, there are <i>new</i> usability problems with this design. Consider the tag cloud for a user like me, with 147 tags I can display above my links:<br />
<br />
<img alt="tag cloud with 147 tags" border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW1-B0wdBufCNSF5mOjxwgqz9uINnh5CfvZ1Jz1fqs2yy__0d11UFzeIO3Fps6-RgnJ1mxNwi5FN_O7-_LR6ReNKkrXkDfe0Qfy-pq2eG65feRY-jTcfnu8eDdLkPVEJ6TrNJ5I_7F5DCP/s640/delicious_next_tags.png" width="600" /><br />
<span style="font-size: 0.9em; font-style: italic;">Small tag cloud on next.delicious.com</span><br />
<br />
versus the default view of a tag cloud for another longtime user, with over 2,000 tags:<br />
<img alt="tag cloud with many tags" border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ5tT5CeNJtWQMY63UXu0sItLOeZ8ah-RlwidExyYtBlstdHtdvJlRrZcWLhyphenhypheniL_h1bbCUEN_53fZ9iS3vkU9gjUkB6Ae0x1kDQkoTXV9C7CwLw853_kbUCmzRKMrAATIxLEaUdU7J1uYY/s640/delicious_next_tags_many.png" width="600" /><br />
<span style="font-size: 0.9em; font-style: italic;">Default next.delicious.com tag cloud size for a user with many tags</span><br />
<br />
I hope this user likes scrolling to see his bookmarks.<br />
<br />
Presumably the product team assumes that users with this many tags will simply search for a tag rather than relying on their tag cloud to locate things. This would be a fair assumption, except that I'm willing to bet that there are many users who have similarly named tags after years of Delicious autocomplete suggestions (for example, I have "knit," "knitting," and "knitting_patterns"), and being able to browse your tag library is handy for locating bookmarks that may not be filed quite where you expect.<br />
<br />
Tag bundles, introduced before Yahoo! sold off the company, were one way of dealing with that problem: they allowed users to create groups of related tags, so if I wanted, I could quickly see just my knitting- or CSS-related tags. To create a bundle in the previous.delicious.com interface, you were shown a list of tags to choose from, which eliminated guesswork and ensured you were likely to catch all the tags related to a given concept.<br />
<img alt="tag bundle interface on previous.delicious.com" border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI4_V9jBZOP2DA_o0G6u81a-kuC6HazGub4BoDkVSdsg-RLYNo_0lShBPsKrKI-1OoYcdvBnswB5Xg1ciWC-YBzMw1MmHxYdosj-3YNmpl7qtbAMSiZGKMJckMLzZlRou7XI6qCmWIAc3N/s640/previous_tag_bundles.png" width="600" /><br />
<span style="font-size: 0.9em; font-style: italic;">previous.delicious.com's tag bundle creation interface</span><br />
<br />
The beta Delicious UI unfortunately replicates the current one: the tag selection interface relies purely on autocomplete, and while this makes for an uncluttered interface, it's useless for people with long lists of tags. Without the list of tags to rely on, you're bound to miss tags you would want to include in the bundle.<br />
<img alt="tag bundle interface on next.delicious.com" border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnia-Sm-nxDEmZ7aHfZenKkk8hrrLM1sxx-ntDWU2cVYAO71Zrdi4dp5lia88yefEQfN4ibnjWz0vc0NtWgqMgcUY0hB86dsYrtDO3-ya4RX2eHsDeO1CQugFtZvpcdPU0oMOEk88CV4mw/s640/delicious_next_tagbundles.png" width="600" /><br />
<span style="font-size: 0.9em; font-style: italic;">next.delicious.com's tag bundle interface</span><br />
<br />
I give up. It's my job to help organizations use good design to enhance usability, and this design is neither good nor usable – in fact, it's so anti-usability I'm switching entirely to <a href="http://pinboard.in/">Pinboard</a>, which has virtually no visual design, but does what I need it to do quickly and intuitively.<br />
<br />
I doubt I'll be the only one to finally pack up and go.Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com1tag:blogger.com,1999:blog-8329255634037101739.post-90466994166810671262013-08-26T14:23:00.000-04:002013-08-26T14:23:19.391-04:00Balancing the analytic and optimistic – the role of interface designer in interactive digital product teams<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="http://scitechconnect.elsevier.com/wp-content/uploads/2013/08/Tight-Rope.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://scitechconnect.elsevier.com/wp-content/uploads/2013/08/Tight-Rope.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 10px; line-height: 15px;">Photo courtesy of Graeme Maclean (Flickr: _gee_).</span></td></tr>
</tbody></table>
<br />
<b><span style="font-size: large;">“Without exploration, interface design becomes uninspiring, falling prey to analytic acceptance<br /> of utility.”</span></b><div>
<br /><div style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 14px; line-height: 18px; margin-bottom: 15px; outline: none; padding: 0px;">
When consulting with teams on product interfaces, my role as a designer includes helping to define a shared understanding of the goals, providing insights into possibilities, and demonstrating those possibilities through visual representations. Because most of the teams I work with do not have designers, they are not sure what to expect. My business partner Debby and I are brought in for the following reasons:</div>
<div style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 14px; line-height: 18px; margin-bottom: 15px; outline: none; padding: 0px;">
1. The product manager wants a better looking interface to sell.</div>
<div style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 14px; line-height: 18px; margin-bottom: 15px; outline: none; padding: 0px;">
2. Product use/sales are not where the business team wants them to be.</div>
<div style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 14px; line-height: 18px; margin-bottom: 15px; outline: none; padding: 0px;">
3. An organization has a big idea for an app and wants help realizing it.</div>
<div style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 14px; line-height: 18px; margin-bottom: 15px; outline: none; padding: 0px;">
In all of these situations there are similar, familiar constraints and requirements, which usually define the scope of the work from the outset; for example:</div>
<ul style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 14px; line-height: 18px; margin: 0px 0px 1em 0em; outline: none; padding: 0px 0px 0px 0.2em;">
<li style="background-image: url(http://scitechconnect.elsevier.com/wp-content/themes/elsevier_blog/images/bullet.gif); background-position: 0em 0.3em; background-repeat: no-repeat no-repeat; list-style: none; margin: 0px 0px 0.5em; outline: none; padding: 0px 0px 0px 0.8em;">time</li>
<li style="background-image: url(http://scitechconnect.elsevier.com/wp-content/themes/elsevier_blog/images/bullet.gif); background-position: 0em 0.3em; background-repeat: no-repeat no-repeat; list-style: none; margin: 0px 0px 0.5em; outline: none; padding: 0px 0px 0px 0.8em;">budget</li>
<li style="background-image: url(http://scitechconnect.elsevier.com/wp-content/themes/elsevier_blog/images/bullet.gif); background-position: 0em 0.3em; background-repeat: no-repeat no-repeat; list-style: none; margin: 0px 0px 0.5em; outline: none; padding: 0px 0px 0px 0.8em;">business goal (improved sales, fewer tech support calls, securing funding, etc.)</li>
<li style="background-image: url(http://scitechconnect.elsevier.com/wp-content/themes/elsevier_blog/images/bullet.gif); background-position: 0em 0.3em; background-repeat: no-repeat no-repeat; list-style: none; margin: 0px 0px 0.5em; outline: none; padding: 0px 0px 0px 0.8em;">technology</li>
<li style="background-image: url(http://scitechconnect.elsevier.com/wp-content/themes/elsevier_blog/images/bullet.gif); background-position: 0em 0.3em; background-repeat: no-repeat no-repeat; list-style: none; margin: 0px 0px 0.5em; outline: none; padding: 0px 0px 0px 0.8em;">engineering resources</li>
<li style="background-image: url(http://scitechconnect.elsevier.com/wp-content/themes/elsevier_blog/images/bullet.gif); background-position: 0em 0.3em; background-repeat: no-repeat no-repeat; list-style: none; margin: 0px 0px 0.5em; outline: none; padding: 0px 0px 0px 0.8em;">topic or content space</li>
</ul>
<div style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 14px; line-height: 18px; margin-bottom: 15px; outline: none; padding: 0px;">
In addition, there is context of use, where constraints and requirements get less straightforward:</div>
<ul style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 14px; line-height: 18px; margin: 0px 0px 1em 0em; outline: none; padding: 0px 0px 0px 0.2em;">
<li style="background-image: url(http://scitechconnect.elsevier.com/wp-content/themes/elsevier_blog/images/bullet.gif); background-position: 0em 0.3em; background-repeat: no-repeat no-repeat; list-style: none; margin: 0px 0px 0.5em; outline: none; padding: 0px 0px 0px 0.8em;">target user</li>
<li style="background-image: url(http://scitechconnect.elsevier.com/wp-content/themes/elsevier_blog/images/bullet.gif); background-position: 0em 0.3em; background-repeat: no-repeat no-repeat; list-style: none; margin: 0px 0px 0.5em; outline: none; padding: 0px 0px 0px 0.8em;">situation of use</li>
<li style="background-image: url(http://scitechconnect.elsevier.com/wp-content/themes/elsevier_blog/images/bullet.gif); background-position: 0em 0.3em; background-repeat: no-repeat no-repeat; list-style: none; margin: 0px 0px 0.5em; outline: none; padding: 0px 0px 0px 0.8em;">user expectations</li>
</ul>
<div style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 14px; line-height: 18px; margin-bottom: 15px; outline: none; padding: 0px;">
(There are a host of other “soft” requirements and constraints in team members’ biases, but other than mentioning that they exist and play a role, this post will not examine them.)</div>
<div style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 14px; line-height: 18px; margin-bottom: 15px; outline: none; padding: 0px;">
No matter the organization or goals, my role is to help define something that the team can stand behind. They will need to make it work, sell it, explain it, defend it, and ultimately profit from it, either financially or professionally. For some clients, I work on interfaces and interactions people need to use; for others, I work on interfaces and interactions people need to want to use. I am a designer because even as a child I felt the power and pleasure of some products (<a href="http://www.moma.org/collection/browse_results.php?criteria=O%3AAD%3AE%3A6155&page_number=10&template_id=1&sort_order=1" style="color: #1e85c5; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Massimo Vignelli’s colorful stacking melamine tableware</a>, for example), and the disappointment of others. I believe everything can and should be better. This optimism fuels my work.</div>
<div style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 14px; line-height: 18px; margin-bottom: 15px; outline: none; padding: 0px;">
</div>
<div style="margin-bottom: 15px; outline: none; padding: 0px;">
It is easier to realize these feelings in the design of apps that people need to want to use, such as applications to help people find and fund initiatives for women and children, or apps allowing them to read, save, clip, and share magazines. These apps provide the opportunity for expression in the visual interface, brand, features, and interactions. On these teams, my role can involve bringing teams down to earth – for example, insisting that accessibility does matter and explaining why the latest trend is not appropriate. In these situations I work to help define informed criteria to ground design decisions. This typically means calling for more information from or about users to inform a design rationale.</div>
<div style="margin-bottom: 15px; outline: none; padding: 0px;">
I play a different role on teams designing apps people need to use. While both product types require a passion for making something wonderful, teams developing productivity apps typically think analytically. Designing to fit constraints seems straightforward in these situations; however, even with constraints, there are always design possibilities to explore. Without exploration, interface design becomes uninspiring, falling prey to analytic acceptance of utility.</div>
<div style="margin-bottom: 15px; outline: none; padding: 0px;">
The ability to work comfortably with the tension between optimism and practicality, and to define best case interfaces, is what defines being a designer for me. When issues arise in your interface projects, ask yourself if the work suffers from lack of optimism and inspiration, or lack of analytical thinking. To gain inspiration, more exploration of possibilities may be necessary. If the team is unable to make decisions and come to consensus, more or re-prioritized constraints grounded in what is known from and about users will help.</div>
<div style="margin-bottom: 15px; outline: none; padding: 0px;">
Endnote:</div>
<div style="margin-bottom: 15px; outline: none; padding: 0px;">
Kolko, J. “<a href="http://www.jonkolko.com/writingOptimism.php" style="color: #1e85c5; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">The Optimism of Design</a>,” Interactions July/August 2013</div>
<div style="margin-bottom: 15px; outline: none; padding: 0px;">
Buxton, B. <em style="margin: 0px; outline: none; padding: 0px;"><a href="http://store.elsevier.com/product.jsp?isbn=9780123740373&utm_source=SciTech+Connect&utm_medium=MK&utm_campaign=Sketching+User+Experience" style="color: #1e85c5; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">Sketching User Experiences: Getting the Design Right</a></em> and the Right Design, 2007, Morgan Kaufmann</div>
<div style="-webkit-text-size-adjust: none; color: #565656; font-family: Helvetica, Arial; font-size: 14px; line-height: 18px; margin-bottom: 15px; outline: none; padding: 0px;">
</div>
<div style="margin-bottom: 15px; outline: none; padding: 0px;">
<i>This post was originally published Aug. 6, 2013 on SciTechConnect: http://scitechconnect.elsevier.com/balancing-the-analytic-and-optimistic-the-role-of-interface-designer-in-interactive-digital-product-teams/</i></div>
<div>
<br /></div>
<br /></div>
Tania Schlatterhttp://www.blogger.com/profile/10917017168082289377noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-35826561384260401892013-08-05T16:55:00.000-04:002013-08-07T17:49:10.366-04:00Thoughts on Flat UIs – the science and history behind the trend<div style="margin-bottom: 2em;">
<img border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwCxbPlH7qaNGL6MkoE2xPMJTFc-s1AZ4CdDR-C7XlVg8rIlMdFNu8_R_BCcAOgsrk5qraf4f0usoFT-B06FJAZRU_l2VxPSCdizdZAp64cBzA9XPLlJlE-u7hClpzcxlV1dtEU1oO-IaV/s1600/flat_ui.png" style="margin-bottom: 0.5em; margin-left: 0px; padding-left: 0px;" /><br />
<i><span style="font-size: 0.9em;">The "flat UI" trend demonstrated by the evolution of Google's icons (from <a href="http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077">Google's Visual Assets guidelines</a>).</span></i><br />
<i><span style="font-size: 0.9em;"><br /></span></i>
<i><span style="font-size: 0.9em;"><a href="http://scitechconnect.elsevier.com/thoughts-on-flat-uis/" target="_blank">This post was also published on publisher Elsevier's SciTech blog</a> August 6, 2013.</span></i></div>
The current "flat UI" <a href="http://www.guardian.co.uk/technology/shortcuts/2013/jun/12/skeuomorphism-apple-ditched-ios7">kerfuffle</a> provoked by Microsoft's Metro UI and Apple's <a href="http://www.apple.com/ios/ios7/design/">beta release of iOS 7's interface</a> seems largely to be about change, and whether or not people who write commentary on the web like flat graphics.<br />
<br />
They miss the point. There is science and history behind the flat UI trend. Let's take a look.<br />
<br />
Gestalt theories of visual perception were defined in the 1920s by psychologists. These theories underlie most professional visual design. <a href="http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm">Gestalt principles</a> are what graphic design students learn to employ to:<br />
<br />
<ul>
<li class="li3">create visual impact </li>
<li class="li3">direct the eye</li>
<li class="li3">create visual tone – balance or discord, for example</li>
</ul>
<br />
The principles coincided with advances in printing in Germany and the rise of the Constructivist movement in art. These were the "seeds" from which the Bauhaus design movement developed. The philosophy of the Bauhaus was reactionary to the prevailing trend of the time (Art Deco) and called for objects and built environments to serve their use: form should follow function, and be true to materials.<br />
<br />
The Bauhaus influenced important graphic and product designers such as Josef Muller Brockmann, Dieter Rams, Paul Rand, and Armin Hofmann, as well as information designer Edward Tufte. All of these designers believe that what is represented should express the message or use; no more, no less. This can be summed up in Tufte's "data-ink ratio" and Dieter Rams' 10th good design principle: "Good design is as little design as possible." This history and approach is what many trained designers draw from. The rise of user experience design as a profession has put more trained designers than ever before in the position of influencing applications.<br />
<br />
The perceptual and cognitive psychology research and theories that underpin Colin Ware's book <i>Visual Thinking for Design</i> and Jeff Johnson's <i>Designing with the Mind in Mind</i> are mostly ignored by graphic design BFA programs and thus are not particularly familiar to trained visual designers. However, they are familiar to many usability practitioners and UI designers from technical backgrounds. This research helps explain part of the current issue: why people like skeuomorphic design.<br />
<br />
Skeuomorphism is the use of visual qualities to suggest or artificially imitate a physical characteristic, like faux wood textures printed on countertop surfaces or embellishing the side of old station wagons. In digital interfaces, Apple's address book software uses skeuomorphs. It renders pixel illustrations of seamed binding and paper "pages." In the early days of the Apple Macintosh computer, dragging unwanted files to the pixel-rendered trashcan helped people learn a completely new visual and interaction language through the use of familiar icons and symbols, and familiarity makes people feel comfortable.<br />
<br />
<img border="0" class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-CB6u9iiVeTN0wmNP3OIXWxZcvuv8xo9ZHCYglMvSeRXWL14H1OLAHPb6xNHvzR4NUKFdWDqm2XKcZ1PNwJxqryGpgkbnvMfAgPAhuQXkdWRs6mRsbATon5Xu1Zxx5ud_l10mkJrgXJ-g/s1600/flat_ui_skeuomorph.png" style="margin-bottom: 0.5em; margin-left: 0px; padding-left: 0px;" /><br />
<i><span style="font-size: 0.9em;">Sample of Apple’s use of skeuomorphs – the address book app in OSX.</span></i><br />
<i><span style="font-size: 0.9em;"><br /></span></i>
Many designers trained in Bauhaus philosophies (including my business partner, Tania Schlatter, who drafted this post) and who work on UX and interfaces often find skeuomorphs absurd for two reasons. First, in our Apple address book example, the "pages" create a false interaction cue. The dimensional rendering makes it look as if the pages might be clickable to advance, but they are not. Second, entering a contact on a digital device with rendered "paper" and "binding" feels untrue to the qualities of the digital material being manipulated.<br />
<br />
Few interfaces designed these days need to rely on skeuomorphs to make users feel comfortable with the UI. The time is right to leave those visual "crutches" behind. Doing so, however, has launched "flat UI" as a trend, which can cause more harm than good. When employed as style rather than philosophy to underpin the entire user experience, designers may strip out what they see as distracting decoration in the interface without leaving enough visual data for people to understand what they see. <br />
<br />
The subjective "flat UI" debates distract from the real issues, which are the same as always: designers and product managers need to look deeply before adopting or disavowing a trend. Remember that the last big web design trend – "fat footers" – came about to improve search engine rankings in the wake of changes to Google's results algorithm. Even though our tools change, methods hold true. Designers and project managers need to (re)focus on their users, content, and organizations to design interfaces that promote understanding, are appropriate for the medium and context of use, and help differentiate their products for businesses and their customers in meaningful ways. <br />
<br />
Additional references:<br />
<br />
<ul>
<li>Video documentary: <a href="http://www.theatlantic.com/video/archive/2012/11/dieter-rams-on-good-design/265223/bauhaus">Dieter Rams on his design principles</a></li>
<li><a href="http://www.jonkolko.com/projectFiles/scad/IACT370_05_TuftePrinciples.pdf">Jon Kolko's slides on Tufte</a> (slide 16 is on data-ink ratio)</li>
<li>Hofmann, A. <i>Graphic Design Manual: Principles and Practices,</i> Arthur Niggli</li>
<li>Meggs, P., Purvis, A. <i>Meggs' History of Graphic Design,</i> Wiley</li>
<li>Muller-Brockmann, J. <i>Grid Systems in Graphic Design</i></li>
<li>Tufte, E. <i>The Visual Display of Quantitative Information,</i> Graphics Press</li>
</ul>
Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-17763049670903322192013-07-17T13:55:00.002-04:002014-05-16T17:01:37.860-04:00Tutorial at UXPA 2013 – Visual Usability: principles & practices for designing great web and mobile application interfaces Last week, we presented a one-day tutorial based on the topics in our book <i><a href="http://bit.ly/ZJ3Gqd" target="_blank">Visual Usability: Principles and Practices for Designing Digital Applications</a></i> at the User Experience Professionals Association conference in Washington, DC. We had a great time taking those ideas live with a dedicated group of participants who ripped paper, analyzed requirements, brainstormed design personas, and redesigned a sample application in a full, fun day.<br />
<div>
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCJLI_wCJ0c4_vHhmOLqHn5XcIy5fjA1WDb401gcDcNDLBt_o4oj9zhkgEZj5l0MXZEEvO7kbZT3RlguEXp8HN-FaNh342nCTFj6OcgAcE0pHAK1sNrNtrSO8Iqv3pnxJuMbLe7-aTOJk/s640/UXPA_tut_blog.jpg" height="219" style="background: none; border: none; margin: 0px;" width="640" /></div>
The tutorial was a mix of lectures and activities designed to help participants:<br />
<ul>
<li>understand the effect of "meta-principles" consistency, hierarchy, and personality on use and appeal of digital applications</li>
<li>define a target for UI design work that serves their users and their organization</li>
<li>learn how characteristics of visual design "tools" layout, type, color, images, and controls can help or hinder people in their interpretation and use of apps</li>
</ul>
We're working on more dates for this tutorial. <a href="mailto:partners@nimblepartners.com">Contact us</a> if you'd like to know where we might be when!<br />
<iframe allowfullscreen="" frameborder="0" height="421" marginheight="0" marginwidth="0" mozallowfullscreen="" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/24343865" style="margin-top: 8px;" webkitallowfullscreen="" width="512"> </iframe> <br />
<div style="margin-bottom: 5px;">
<strong> <a href="http://www.slideshare.net/nimblepartners/visual-usability-principles-practices-for-designing-great-web-and-mobile-app-uis" target="_blank" title="Visual Usability: principles & practices for designing great web and mobile app UIs">Visual Usability: principles & practices for designing great web and mobile app UIs</a> </strong> from <strong><a href="http://www.slideshare.net/nimblepartners" target="_blank">Nimble Partners</a></strong> </div>
Tania Schlatterhttp://www.blogger.com/profile/10917017168082289377noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-67255238750568280822013-06-20T13:37:00.001-04:002014-05-16T17:02:45.211-04:00Join us for a visual usability tutorial at the UXPA national conference in July!Looking for guidance addressing functionality and aesthetics in complex applications? Join us on Tuesday, July 9, for an all-day tutorial, "<a href="http://www.uxpa2013.org/principles_levinson">Visual Usability: Visual Design Principles and Practices for Creating Great Web and Mobile Application Interfaces</a>," at <a href="http://www.uxpa2013.org/">the UXPA national conference</a> in Washington, DC. <br />
<br />
Through lectures, guidelines, examples, and hands-on exercises, we'll show you our approach for making visual design decisions that reinforce usability best practices and provide interfaces people value. You’ll learn the characteristics of “visually usable” apps so you’ll know what to shoot for. You'll also get an introduction to the visual design “tools” for digital apps – layout, type, color, imagery, and controls and affordances – and learn how to use them to help people understand and enjoy what they see.<br />
<br />
Visit <a href="http://www.uxpa2013.org/principles_levinson">our tutorial page to find out more</a>, and hope to see you in July!Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-69157941365244106632013-06-06T12:34:00.000-04:002013-08-27T15:28:24.317-04:00Visual Usability: Principles and Practices for Designing Digital ApplicationsOur work involves constantly reconciling use and appearance. This
isn't a new or novel struggle; it's inherent to designing, and
evident in the gap between applications that look great and those
that are highly functional.<br />
<br />
Digital interfaces rely on common visual design tools to
communicate – layout, type, color, and imagery, along with
controls and affordances. We've written <i>Visual Usability:
Principles and Practices for Designing Digital Applications</i>
to provide a common language for defining and evaluating visual
user interfaces that's grounded in how people perceive and
interpret what they see. <br />
<br />
<i>Visual Usability</i> provides simple, clear frameworks for
designing web and mobile interfaces for meaning and appeal. It
helps application design and development teams make interface
decisions by focusing on three "meta-principles" we believe form
the foundation of great application visual design: consistency,
hierarchy, and personality. Each chapter offers guidance on how to
make strategic decisions about layout, type, color, imagery, and
controls and affordances that will bridge the gap between
beautiful and useful applications.<br />
<br />
We're thrilled to announce that the book is now available on <a href="http://amzn.to/XDObkX">Amazon</a>, <a href="http://www.barnesandnoble.com/w/visual-usability-tania-schlatter/1114731240">bn.com</a>, <a href="http://store.elsevier.com/product.jsp?isbn=9780123985361">Elsevier.com</a>, and elsewhere! We hope you check it
out, and that it provides value to your team.<br />
<br />
We are blogging examples of visual usability regularly via Tumblr
at <a class="moz-txt-link-freetext" href="http://visualusability.tumblr.com/">visualusability.tumblr.com</a>, and tweeting them at
<a href="http://twitter.com/visualusability">@VisualUsability</a>. We hope to see you there!<br />
<br />
<a href="http://www.amazon.com/gp/product/0123985366/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0123985366&linkCode=as2&tag=visuausabi-20" style="background-image: none; border: none;"><img border="0" src="http://visualusabilitybook.com/images/book.png" style="border: none; margin-left: 0px; padding-left: 0px;" /></a><br />
<ul>
</ul>
Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-8901601458227723492013-05-20T12:19:00.000-04:002013-05-20T12:55:17.161-04:00Thoughts on "What great design can do for data"A founder of the design firm Fjord wrote an<a href="http://bit.ly/10PMa0V:" target="_blank"> insightful article</a> for <i>Fortune</i> about design helping companies make sense of data. <a href="http://bit.ly/10PMa0V:" target="_blank">From the article</a>:
<br />
<blockquote class="tr_bq">
Designers know how to take complex or disparate information and make it tangible, understandable, and importantly, more human. ...</blockquote>
<blockquote class="tr_bq">
<a href="http://tech.fortune.cnn.com/2013/04/26/nate-silver-what-big-data-cant-predict/" style="border: 0px; color: #004276; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Technologists</a> on the other hand, tend to try to structure data in a flexible way. They analyze it, dashboard it, and cross-reference it to make it more efficient and intelligent.</blockquote>
<br />
Both approaches are needed. The data needs to be flexible enough to enable users to manipulate it to find the insights they seek.<br />
<br />
Design of the data display and controls to manipulate data need to be clear enough to enable people to work with what they see. <a href="http://bit.ly/10PMa0V:" target="_blank">From the article</a>:<br />
<br />
<blockquote class="tr_bq">
Here are some ways that design can help companies make sense of their data and identify opportunities to turn it into a benefit for their customers:<br />
<br />
<ul style="border: 0px; font-size: 14px; line-height: 19px; list-style-image: initial; list-style-position: outside; margin: 0px 20px 20px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;">
<li>Use data to guide, not dictate: Use data to build a backdrop of understanding and learning, but don't let data trump creative inspiration or minimize the importance of leaps of faith.</li>
<li>Obsess with your customers: Extend the data insights and value from your organization to your customers.</li>
<li>Mess up your data: We live in a messy world. How can you make your pure data fit a messy world? Use design to make it personal and emotional, and tell stories.</li>
<li>Instead of understanding data only, make sure you understand people: You're planning to hire another data scientist to make sense of the growing data mountain you've got? How about hiring a psychologist instead?</li>
<li>Major on elegance and simplicity: The science of data can be complex, abstract, and ugly. Design will help you simplify and bring clarity. Good design can also present data in elegant and beautiful ways, drawing people in where they were previously turned off.</li>
<li>Take creative leaps of faith: A creative process that uses intuition and imagination can give you innovations that data alone can't provide. This is crucial if you want to reimagine your business or invent something new.</li>
</ul>
</blockquote>
<br />
This list speaks to the fact that data, even well-designed data, needs to have an editorial or curatorial layer that either guides people to the stories that are relevant to them, or otherwise helps to highlight the significance. Getting this right involves deep understanding of what the data can show, knowing who is likely to be interested in what, and using interface and information design to make sense of the display.Tania Schlatterhttp://www.blogger.com/profile/10917017168082289377noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-59453976600231180392013-05-09T16:03:00.000-04:002014-10-17T12:13:34.234-04:00CafePress information architecture and user experienceCafePress is an established custom printing e-tailer. We worked with the product marketing team to improve how people find products on their site. We conducted a heuristic review to identify IA, visual design, and usability issues, and showed options for changes that addressed UX in schematic layouts (visual wireframes).<br />
<br />
Follow-on work included exploring identity options and visual site design.<br />
<br />
CafePress' home page at the time (left) and our wireframed recommendations (right), which included simplifying the header area to highlight search, making main product navigation more prominent, and improving promotion display to spotlight new and hot products in a clean, uncluttered layout.<br />
<a class="noborder" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW_x7q5nEImyRapL854RULwm0ATDPLJrrIgrUTExgS3Rs_AzxyFdjjPl8KE1vDMfAoApEVNzT7s4ydjB_WWrAAd36-BxzmRpWNBTlCqshZSBp0NlkAh7h4J0REmv3Ap0vCTM3RmX39BSJt/w936-h669-no/cafepress_home_before_after.gif" imageanchor="1"><img border="0" class="imgLeft" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW_x7q5nEImyRapL854RULwm0ATDPLJrrIgrUTExgS3Rs_AzxyFdjjPl8KE1vDMfAoApEVNzT7s4ydjB_WWrAAd36-BxzmRpWNBTlCqshZSBp0NlkAh7h4J0REmv3Ap0vCTM3RmX39BSJt/w936-h669-no/cafepress_home_before_after.gif" width="600" /></a><br />
<br />
CafePress' existing search engine results page (left) and our wireframed recommendations (right). To help welcome shoppers and guide them effectively, we suggested eliminating redundant links and limiting the number of subcategories displayed.<br />
<a class="noborder" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib451lbU58dyD-NyD1PXtsLCnLcFIT7E63aJY1rB5deIz8ptZ448uM19UzFtj8Am7CspTDfZCfew48vP_tOud_mej5__q-_TDa2OM5tQ9FkGWgg9J-xKDwJMkNizJTYRx1CoHBTTKhBrto/w935-h496-no/cafepress_serp_before_after.jpg" imageanchor="1"><img border="0" class="imgLeft" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib451lbU58dyD-NyD1PXtsLCnLcFIT7E63aJY1rB5deIz8ptZ448uM19UzFtj8Am7CspTDfZCfew48vP_tOud_mej5__q-_TDa2OM5tQ9FkGWgg9J-xKDwJMkNizJTYRx1CoHBTTKhBrto/w935-h496-no/cafepress_serp_before_after.jpg" width="600" /></a><br />Tania Schlatterhttp://www.blogger.com/profile/10917017168082289377noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-21426080852759143922013-04-18T10:54:00.000-04:002014-06-13T11:01:10.285-04:00Science Festival Alliance website refresh<p>The <a href="http://www.sciencefestivals.org">Science Festival Alliance</a> supports the development and promotion of science festivals worldwide. We worked with the SFA to reorganize their existing website, design a new home page, and extend elements of the redesign throughout the site. We also improved their dynamic map to display member and non-member science festivals around the world, and designed a downloadable calendar widget anyone could install on their own site to keep up with where and when the latest festivals take place.</p>
<p><b>We provided:</b></p>
<ul>
<li><b>Information architecture</b></li>
<li><b>Visual design</b></li>
</ul>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLVXshvbsjYmQEofLk1s-zEi1HA-DVIGblNKiepuGGMRs0_uRfNqsuTx8WK7iLENdgAVqo-VNQajb0yTy5YlpjL_d4EFGFzNUxddLDhawuk6VtofKXDJ2GZJOqNKpgeWw69uf9ZWGbzw6h/s1600/sfa_home.png" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLVXshvbsjYmQEofLk1s-zEi1HA-DVIGblNKiepuGGMRs0_uRfNqsuTx8WK7iLENdgAVqo-VNQajb0yTy5YlpjL_d4EFGFzNUxddLDhawuk6VtofKXDJ2GZJOqNKpgeWw69uf9ZWGbzw6h/s1600/sfa_home.png" width="600" alt="SFA home page" class="imgLeft" /></a><br /><span class="caption">SFA home page</span></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVH25fEXjRJxen0PVaXb7yQlhh3QO4DedhT3e4Gdft3VKcbamZZHmHvEv6dTYcvFEPUjV9fetvwwlORduULLxQeiZecSvWbT0yQLWoq-AUFEyl5PBZHt5Yow9YP_sk0Gdwsc2t6i05eDeJ/s1600/sfa_map.png" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVH25fEXjRJxen0PVaXb7yQlhh3QO4DedhT3e4Gdft3VKcbamZZHmHvEv6dTYcvFEPUjV9fetvwwlORduULLxQeiZecSvWbT0yQLWoq-AUFEyl5PBZHt5Yow9YP_sk0Gdwsc2t6i05eDeJ/s1600/sfa_map.png" width="600" alt="Festival map page" class="imgLeft" /></a><br /><span class="caption">Map of member and non-member festivals worldwide</span></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc1CaQuuMy5HgOybYswrhzYx-ewt6qJHDp4w36C3aYBhSl3JW7xO2J0q9yuqHOlybpqYrhcgkemeSuydrDv_0BgyslkliNAfbawALzC4115uVdwRpl-RYSuD0Hso0bLm-tBD_HsM5pRYkb/s1600/sfa_news.png" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc1CaQuuMy5HgOybYswrhzYx-ewt6qJHDp4w36C3aYBhSl3JW7xO2J0q9yuqHOlybpqYrhcgkemeSuydrDv_0BgyslkliNAfbawALzC4115uVdwRpl-RYSuD0Hso0bLm-tBD_HsM5pRYkb/s1600/sfa_news.png" width="600" alt="News page" class="imgLeft" /></a><br /><span class="caption">SFA news page</span></p>Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0tag:blogger.com,1999:blog-8329255634037101739.post-78882856617309309492013-04-08T10:28:00.000-04:002014-06-13T10:42:52.888-04:00MIT Annotation Studio UI<p><a href="http://www.annotationstudio.org">Annotation Studio</a> is a set of collaborative online annotation tools developed by MIT’s HyperStudio program. The software allows students to annotate literary texts and other documents with text, video, audio, and hyperlinks. Students may also view and build upon each other’s notes, allowing for a more participatory experience than traditional solo book review and annotations.</p>
<p>MIT approached us to refine Annotation Studio’s color palette, typography, iconography, and visual approach to displaying annotations and other metadata. To meet technical requirements, we designed styles and visual elements that could quickly be implemented within Twitter Bootstrap.</p>
<p><b>Work included:</b></p>
<ul>
<li><b>Heuristic review</b></li>
<li><b>Visual design refinement</b></li>
</ul>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNnfHN0JtQLTHKAJ__j9gylBcTOPSMZUWiziWjBRd8Cu8Hexsr7I3go9av3QjIp91SdiMiuV5luRkyAwNptZWRw6UqpbAvC3OQO1Ijnp-Xq7PPNCX5rNODw4PMcQQ-kdYQA5bmJ0lc9zrj/s1600/as_documents.png" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNnfHN0JtQLTHKAJ__j9gylBcTOPSMZUWiziWjBRd8Cu8Hexsr7I3go9av3QjIp91SdiMiuV5luRkyAwNptZWRw6UqpbAvC3OQO1Ijnp-Xq7PPNCX5rNODw4PMcQQ-kdYQA5bmJ0lc9zrj/s1600/as_documents.png" width="600" class="imgLeft" alt="Annotation Studio documents list" /></a><br />
<span class="caption">List of documents</span></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZkrDpd1z5IYsIcyaUGJXMxFDB_UfPDRH-1obMlsZM3sUwHHGRSSgYpoQjqVmG9ls2qIMYFIxmzEOg6-QV9QdenEnW8A9TvKP6G90iS-jKK2F-ofj-Dma8ygzmqO3rIkGBAFhaRMwTDs5c/s1600/5+content-annotation-icon.png" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZkrDpd1z5IYsIcyaUGJXMxFDB_UfPDRH-1obMlsZM3sUwHHGRSSgYpoQjqVmG9ls2qIMYFIxmzEOg6-QV9QdenEnW8A9TvKP6G90iS-jKK2F-ofj-Dma8ygzmqO3rIkGBAFhaRMwTDs5c/s1600/5+content-annotation-icon.png" width="600" class="imgLeft" alt="Highlighting text to annotate" /></a><br />
<span class="caption">Highlighting text to annotate</span></p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyM1WBSqHe1C1RhjXQaIhvleQ3-HU5Z1YCKy_nOi6Ef1r5DED1X59rFB3bFGBWrV6gEGSuQOmw7bfa6I1ji7tUVv7p27GF_9EOnxHdcSjrETtoFRRAPm06gfHT_klUSB8d5wrPU-hKHf57/s1600/8+content-annotation-balloon-save.png" class="noborder"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyM1WBSqHe1C1RhjXQaIhvleQ3-HU5Z1YCKy_nOi6Ef1r5DED1X59rFB3bFGBWrV6gEGSuQOmw7bfa6I1ji7tUVv7p27GF_9EOnxHdcSjrETtoFRRAPm06gfHT_klUSB8d5wrPU-hKHf57/s1600/8+content-annotation-balloon-save.png" width="600" class="imgLeft" alt="Saving an annotation" /></a><br /><span class="caption">Saving an annotation</span></p>
Debby Levinsonhttp://www.blogger.com/profile/13847066123871164654noreply@blogger.com0