<p>Published on <a href="http://ift.tt/2tOXsMi">| Prototyping: From UX to Front End &mdash; Medium</a> Aleksandra Melnikova </p>
<p>Last week a colleague of mine asked to share the best accessibility resources to help one of our teams tasked with designing a campaign around disability awareness. The articulation of the challenge felt better as ‘designing for (and embracing) difference’. In other words, designing for people, each person being beautiful and unique.</p>
<p>After a considerable browsing exercise I could not resist the need to create my own <em>‘quickly-get-into-the-right-mindset’</em> list, both due to the specifics of the team I was working with and desire to group items into conceptual categories, hoping those will be easier to grasp and remember.</p>
<blockquote><p>I found that most of the items on this list are good to consider when starting any design project.</p></blockquote>
<blockquote><p>Here goes the list— take it, use it, change it.</p></blockquote>
<p><img alt="" src="http://ift.tt/2twKOPs"></p>
<h3>Alternatives</h3>
<p><strong>think of a few different ways of consuming the same (rich) content</strong></p>
<ul>
<li>When creating anything visual, automatically come up with different media alternative (i.e. having text alternatives to non-text content — captions, audio, haptic feedback)</li>
<li>Key calls to action and links should make sense when read out of context (say no to ‘read more’)</li>
</ul>
<p><img alt="" src="http://ift.tt/2sMcPFA"></p>
<h3>Control</h3>
<p><strong>avoid chaotic component movement and enable people to control the experience</strong></p>
<ul>
<li>All videos and rich content controlled by user<br /> (‘watch this video’ button)</li>
<li>Avoid fast-moving animations and anything moving too quick too sharp</li>
<li>Avoid moving text</li>
</ul>
<p><img alt="" src="http://ift.tt/2tw5QgZ"></p>
<h3>Balance</h3>
<p><strong>love white space but be conscious of context</strong></p>
<ul>
<li>Provide enough space around clickable elements</li>
<li>However think about element grouping and connections: component placed too far apart can be confusing</li>
<li>Make sure ALL clickable or interactive elements are large enough to tap</li>
<li>If you design anything for mobile — think about where are those hard-to-reach places</li>
</ul>
<p><img alt="" src="http://ift.tt/2sMD0fb"></p>
<h3>Hierarchy</h3>
<p><strong>bring on the structure, reduce the chaos</strong></p>
<ul>
<li>Create clear visual hierarchy (core message, what’s secondary, what’s tertiary)</li>
<li>Don’t overload the pages</li>
<li>Organize content with headings, make sure they represent the content.</li>
<li>Place the distinguishing information of a paragraph in the first sentence</li>
</ul>
<p><img alt="" src="http://ift.tt/2twixZd"></p>
<h3>Readability</h3>
<p><strong>pick your font family wisely, set the tone for the rest of them visual relationships</strong></p>
<ul>
<li>Choose simple and readable font</li>
<li>Do not use long lines of text, use about 10–15 words on a line</li>
<li>Use appropriate line height (120–145%)</li>
<li>Use decent font size (minimum 14 pt)</li>
</ul>
<p><img alt="" src="http://ift.tt/2sN2SHX"></p>
<h3>Contrast</h3>
<p><strong>create enough difference between design components</strong></p>
<ul>
<li>Say no to text on top of images (it can be used on solid color though)</li>
<li>Do not entertain the thought of playing with transparency if one of the subjects in that game is text</li>
<li>Make sure there is enough contrast between text / background</li>
</ul>
<p><img alt="" src="http://ift.tt/2twjH6N"></p>
<h3>Help</h3>
<p><strong>acknowledge the work to be done and minimise it where possible</strong></p>
<ul>
<li>Use predictive search, auto-complete, auto-populate</li>
<li>Do not rely solely on color to convey meaning (use icons, words)</li>
<li>Use micro-interactions to help communication</li>
<li>Explain, clarify, narrate</li>
</ul>
<blockquote><p><em>Did I miss anything? Let me </em><a href="https://twitter.com/alex_andr_a"><em>(@alex_andr_a</em></a><em>) know and let’s make the world of lists better together. Huge thanks to </em><a href="https://twitter.com/EChesters">@EChesters</a> <a href="https://twitter.com/vanea">@vanea</a> <em>for help and input ❤️</em></p></blockquote>
<p><img alt="" src="http://ift.tt/2sMcQcC"><img src="http://ift.tt/2twyizf" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2sM9aHE">Designing for people: 7 things to say yes to</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Designing for people: 7 things to say yes to

Top Stories