<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Paradigm.ru &#187; usability</title>
	<atom:link href="http://paradigm.ru/tag/usability/feed" rel="self" type="application/rss+xml" />
	<link>http://paradigm.ru</link>
	<description>Блог Александра Мусаева</description>
	<lastBuildDate>Wed, 23 Nov 2011 19:10:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Индикатор клавиатурной раскладки</title>
		<link>http://paradigm.ru/keyboard-layout-indicator</link>
		<comments>http://paradigm.ru/keyboard-layout-indicator#comments</comments>
		<pubDate>Wed, 16 Jan 2008 18:17:57 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Программы]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[визуализация]]></category>
		<category><![CDATA[интерфейсы]]></category>
		<category><![CDATA[программы]]></category>
		<category><![CDATA[раскладки клавиатуры]]></category>

		<guid isPermaLink="false">http://www.paradigm.ru/2008/01/16/keyboard-layout-indicator/</guid>
		<description><![CDATA[Этот пост был задуман около месяца назад. Индикатор активной клавиатурной раскладки (элементарная, казалось&#160;бы, вещь)&#160;&#8212; одна из&#160;задач дизайна интерфейсов, неэффективное решение которой стало традиционным. В&#160;любой операционной системе с&#160;графическим интерфейсом, для отображения текущего языка ввода, сегодня используют значек в&#160;углу экрана: Решение привычное для абсолютного большинства пользователей, но&#160;совершенно неработающее. Для подтверждения достаточно оценить количество описок возникающих из-за неправильного [...]]]></description>
			<content:encoded><![CDATA[<p>Этот пост был задуман около месяца назад. Индикатор активной клавиатурной раскладки (элементарная, казалось&nbsp;бы, вещь)&nbsp;&#8212; одна из&nbsp;задач дизайна интерфейсов, неэффективное решение которой стало традиционным. В&nbsp;любой операционной системе с&nbsp;графическим интерфейсом, для отображения текущего языка ввода, сегодня используют значек в&nbsp;углу экрана:</p>

<p><img src="http://paradigm.ru/;-)/2008/01/layout-ind.png" width="500" height="140" alt="" /></p>

<p>Решение привычное для абсолютного большинства пользователей, но&nbsp;совершенно неработающее. Для подтверждения достаточно оценить количество описок возникающих из-за неправильного языка ввода (а&nbsp;так&nbsp;же количество разных слов, исторгаемых пользователями, когда они поднимают глаза с&nbsp;клавиатуры на&nbsp;экран и&nbsp;обнаруживают, что набрали последние несколько фраз на&nbsp;&laquo;марсианском&raquo; диалекте).</p>

<p>При наборе текста, взгляд обращен к&nbsp;области на&nbsp;экране, где появляются буквы, или к&nbsp;клавиатуре. Второй вариант встречается даже чаще, т.к. далеко не&nbsp;многие умеют печать, не&nbsp;глядя на&nbsp;кнопки. Постоянно контролировать состояние индикатора в&nbsp;углу экрана неудобно, особенно, если монитор&nbsp;&#8212; 30&quot;, или этих мониторов стоит перед человеком 4&nbsp;штуки. <span id="more-158"></span></p>

<p>Как не&nbsp;сложно догадаться, для того чтобы пользователь мог постоянно знать активный язык ввода, не&nbsp;отвлекаясь от&nbsp;набора текста, необходимо, чтобы индикатор находился в&nbsp;поле его зрения (варианты с&nbsp;невизуальной индикацией рассматривать не&nbsp;будем,&nbsp;&#8212; в&nbsp;этом контексте такие решения будут выглядеть слишком экзотически и&nbsp;неоправданно-сложно).</p>

<p>Некоторое время назад мне на&nbsp;глаза попадалась программа, меняющая цвет рамки активного окна, в&nbsp;соответствии с&nbsp;выбранной раскладкой. Идея гораздо более правильная, чем стандартная пиктограмма: цвет рамки почти всегда заметен боковым зрением и&nbsp;не&nbsp;требует лишний раз отрывать взгляд. Тем не&nbsp;менее, у&nbsp;программы были свои минусы. Например, при развороте окна на&nbsp;весь экран, рамка оставалась за&nbsp;пределами видимости. Кроме того, жирная граница нарушала целостновть стандартного стиля UI,&nbsp;придавая окнам аляповатый вид.</p>

<p>У&nbsp;меня у&nbsp;самого была идея сделать аппаратное решение: достаточно яркий светодиондный индикатор с&nbsp;двумя цветами, вмонтированный в&nbsp;клавиатуру или установленный у&nbsp;края монитора, мог&nbsp;бы отображать своим цветом текущую раскладку и&nbsp;быть всегда заметным боковым зрением. Решение тоже не&nbsp;идеальное, в&nbsp;первую очередь, из-за трудоемкости и&nbsp;нежелательности лишних проводов на&nbsp;столе.</p>

<p>Короче говоря, действительно-работающего интерфейсного решения не&nbsp;было до&nbsp;сегодняшнего дня (и&nbsp;именно этим обоснован долгий инкубационный период темы поста&nbsp;&#8212; отсутствовало заключение).</p>

<p>На&nbsp;Хабрахабре некто eXtractor предложил <a href="http://b23.ru/cbf">отличную идею</a> индикатора раскладки и&nbsp;несколько неполную ее&nbsp;<a href="http://code.google.com/p/flean/">программную реализацию</a> (не&nbsp;в&nbsp;обиду автору будь сказано, за&nbsp;инициативу, в&nbsp;любом случае,&nbsp;&#8212; респект). В&nbsp;комментариях к&nbsp;его посту тут&nbsp;же нашлась ссылка на&nbsp;уже сущетвующую и&nbsp;более точную реализацию идеи.</p>

<p>Эта идея затмила своей простотой все предшествующие варианты. Решение настолько очевидное, что даже удивительно, почему оно до&nbsp;сих пор не&nbsp;реализовано, как стандартная опция в&nbsp;распространенных&nbsp;ОС.</p>

<p>Программа <a href="http://b23.ru/cbx">Comfort Lang Switcher</a> переносит индикатор раскладки непосредственно туда, куда смотрит пользователь&nbsp;&#8212; к&nbsp;текстовому курсору. И&nbsp;это прекрасно.</p>

<p><img src="http://paradigm.ru/;-)/2008/01/flag.png" width="358" height="234" alt="" /></p>

<p>У&nbsp;CLS есть пара недостатков. Первый из&nbsp;них&nbsp;&#8212; неработоспособность в&nbsp;некоторых программах. В&nbsp;частности в&nbsp;Firefox (в&nbsp;том числе, в&nbsp;формах на&nbsp;веб-страницах), Open Office и&nbsp;Corel Draw. Две последние для меня не&nbsp;актуальны, а&nbsp;вот отсутствие флажка в&nbsp;Firefox&nbsp;&#8212; мелочь, но&nbsp;непрятно, т.к. к&nbsp;хорошему быстро привыкаешь.</p>

<p>Второй недостаток&nbsp;&#8212; платность. И&nbsp;дело здесь не&nbsp;в&nbsp;том, что жалко послать автору за&nbsp;труды эти 12$, а&nbsp;в&nbsp;том, что сделать это из&nbsp;Росии&nbsp;&#8212; совершенно фиг-его-знает-как.</p>

<p>Кстати, у&nbsp;программы есть более развитая версия&nbsp;&#8212; <a href="http://b23.ru/cbu">Comfort Keys</a>, относящаяся к&nbsp;категории интерфейсных твикеров-приблуд для Windows, которые, по&nbsp;большей части, я&nbsp;терпеть не&nbsp;могу. В&nbsp;ней присутствует огромное количество функций, возможно, полезных для какой-то категории пользователей. Но&nbsp;для себя я&nbsp;нашел всего одну действительно-полезную вещь&nbsp;&#8212; отображение флажка около курсора. Все остальное тут&nbsp;же захотелось отключить, хотя в&nbsp;полной мере сделать это, к&nbsp;сожалению, нельзя. Например она, не&nbsp;спрашивая разрешения, заменяет собой стандартный вид окна Task switcher-а. В&nbsp;принципе, новый вариант более функционален, но&nbsp;раздражал своей нестандартностью. Так что расширенную версию я&nbsp;снес, ограничившисьузко-специализированной CLS.</p>

<p>PS:&nbsp;Ссылки на&nbsp;кряк здесь не&nbsp;будет. Ибо девелопер, проповедующий пиратство, подобен корове, пропагандирующей говядину.</p>

<p>Ссылки по&nbsp;теме:</p>

<ul>
<li><a href="http://b23.ru/cbx">Comfort Lang Switcher</a> homepage.</li>
<li><a href="http://code.google.com/p/flean/">Flean</a> (программа Экстрактора с&nbsp;Хабра).</li>
<li><a href="http://b23.ru/cbg">Aml Maple</a>&nbsp;&#8212; похожая по&nbsp;идее программа, отображающая флажок около курсора мыши. На&nbsp;мой взгляд, менее удачное решение, т.к. мышиный курсор при наборе текста может быть неизвестно где. Программа вроде&nbsp;бы бесплатна.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://paradigm.ru/keyboard-layout-indicator/feed</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>Работа над ошибками</title>
		<link>http://paradigm.ru/404-and-her-friends</link>
		<comments>http://paradigm.ru/404-and-her-friends#comments</comments>
		<pubDate>Mon, 17 Dec 2007 01:23:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Веб-разработка]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[дизайн]]></category>
		<category><![CDATA[разработка]]></category>

		<guid isPermaLink="false">http://www.paradigm.ru/2007/12/17/404-and-her-friends/</guid>
		<description><![CDATA[Одним из&#160;важных факторов, влияющих на&#160;общее впечатление от&#160;сайта, является проработка деталей. Тех, которые по&#160;большому счету кажутся незначительными, но,&#160;при недостаточном внимании разработчиков, создают общее впечатление любительской поделки, которую в&#160;спешке лепили &#171;на&#160;коленке&#187;. Тема поста&#160;&#8212; оформление сообщений об&#160;ошибках, про которое, вопреки расхожему мнению, тоже не&#160;следует забывать. Чего стоит, например, такое сообщение о&#160;недоступности сайта из-за падения БД: Благодаря подобной подаче [...]]]></description>
			<content:encoded><![CDATA[<p>Одним из&nbsp;важных факторов, влияющих на&nbsp;общее впечатление от&nbsp;сайта, является проработка деталей. Тех, которые по&nbsp;большому счету кажутся незначительными, но,&nbsp;при недостаточном внимании разработчиков, создают общее впечатление любительской поделки, которую в&nbsp;спешке лепили &laquo;на&nbsp;коленке&raquo;.</p>

<p>Тема поста&nbsp;&#8212; оформление сообщений об&nbsp;ошибках, про которое, вопреки расхожему мнению, тоже не&nbsp;следует забывать. Чего стоит, например, такое сообщение о&nbsp;недоступности сайта из-за падения БД:</p>

<p><img src="http://paradigm.ru/;-)/2007/12/colorlovers-mysql.png" width="432" height="107" alt="" /></p>

<p>Благодаря подобной подаче информации, можно простить за&nbsp;это досадное недоразумение и&nbsp;MySQL, и&nbsp;<a href="http://www.colourlovers.com/">colourlovers.com</a>.</p>

<p>В&nbsp;общем случае, техническую информацию о&nbsp;произошедшей ошибке вообще не&nbsp;стоит отдавать в&nbsp;веб, если она не&nbsp;мешает выдаче контента или обработке иного пользовательского запроса (например, сохранению данных из&nbsp;формы, отправлению сообщения и&nbsp;т.п.). <span id="more-84"></span></p>

<p>Существует немалое количество статей на&nbsp;тему улучшения функциональности страниц с&nbsp;сообщением о&nbsp;наиболее знаменитой ошибке 404&nbsp;(ссылки на&nbsp;статьи, как обычно, в&nbsp;конце поста). Все они по&nbsp;большому счету сводятся к&nbsp;тому, чтобы помочь посетителю найти искомую информацию. Правильным решением будет отображение навигационных элементов и&nbsp;поисковой формы.</p>

<p>Широко распространено мнение о&nbsp;том, что такие страницы стоит использовать как рекламную площадку, но&nbsp;на&nbsp;мой взгляд это плохая практика и&nbsp;показатель хамоватости администрации сайта (&laquo;404&nbsp;&#8212; Этой страницы у&nbsp;нас нет, но&nbsp;мы&nbsp;может предложить вам пылесос!&raquo;). Если речь идет о&nbsp;веб-магазине, лучше просто прозрачно редиректить заблудших посетителей на&nbsp;главную страницу сайта.</p>

<p>Немалое значение так&nbsp;же имеет дизайн таких страниц, с&nbsp;помощью которого можно либо усилить, либо развеять досаду попадающих туда пользователей. Стандартный вариант оформления сообщения об&nbsp;ошибке Apache, например, точно не&nbsp;будет способствовать поднятию духа.</p>

<table><tr><td><img src="http://paradigm.ru/;-)/2007/12/not-exists.png" width="300" height="104" alt="" /></td><td style="vertical-align:middle;padding-left:2em;"><small>&laquo;Без окон, без дверей,<br />пейдж дазнотэкзыст!&raquo;</small></td></tr></table>

<p>Примером его прямой противоположности может быть ошибка 404&nbsp;на&nbsp;Яндексе:</p>

<p><img src='http://paradigm.ru/;-)/2007/12/yandex-404.png' width="500" height="307" alt="" style="border:1px solid silver;" /></p>

<p>Еще один запоминающийся вариант с&nbsp;сообщением об&nbsp;отсутсвующей странице в&nbsp;виде правильно-сложенного хайку:</p>

<p><img src="http://paradigm.ru/;-)/2007/12/jackfigcom-404.png" width="500" height="301" alt="" /></p>

<p>Сведения о&nbsp;внутренних ошибках следует либо заменять более понятным обычному посетителю текстом, либо полностью скрывать. Отображенные на&nbsp;веб-странице сообщения о&nbsp;мелких серверных неполадках станут не&nbsp;более чем информационным мусором. Человеку, который хочет купить книгу в&nbsp;интернет-магазине, совсем не&nbsp;нужно знать о&nbsp;том, что в&nbsp;1456-й строке файла с&nbsp;длинным именем неожиданно стряслось деление на&nbsp;нуль. А&nbsp;посетителю блога тоже вряд&nbsp;ли станет интересен синтаксис SQL запроса, поломавшегося утром в&nbsp;понедельник.</p>

<p>Наличие подобных сообщений&nbsp;&#8212; показатель небрежности и&nbsp;потенциальный источник опасности, т.к. в&nbsp;них выдается на&nbsp;всеобщее обозрение внутренняя техническая информация о&nbsp;работе CMS, которую никогда не&nbsp;стоит распространять без явной на&nbsp;то&nbsp;необходимости. Тем более, что в&nbsp;том&nbsp;же PHP (а&nbsp;так&nbsp;же Перле, Руби, Джаве и&nbsp;большинстве других языков, на&nbsp;которых пишутся CMS) не&nbsp;представляет никакой сложности запретить выдачу трейсов ошибок в&nbsp;веб, и,&nbsp;при необходимости, перенаправлять их&nbsp;в&nbsp;логи.</p>

<p>Further reading:</p>

<ul><li>Подборка из&nbsp;нескольких десятков скриншотов хороших примеров страниц 404-й ошибки <a href="http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/">на&nbsp;smashingmagazine.com</a>.</li>
<li><a href="http://www.useit.com/alertbox/20010624.html">Error Message Guidelines</a> by&nbsp;Jakob Nielsen</li>
<li><a href="http://www.useit.com/alertbox/404_improvement.html">Improving the Dreaded 404&nbsp;Error Message</a> by&nbsp;Jakob Nielsen</li>
<li><a href="http://www.plinko.net/404/">404&nbsp;Research Lab</a></li>
<li><a href="http://www.xmlplease.com/error404">User friendly 404&nbsp;error messages reconsidered</a> by&nbsp;Jesper Tverskov</li></ul>
]]></content:encoded>
			<wfw:commentRss>http://paradigm.ru/404-and-her-friends/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

