Отправлено: 09.12.11 16:14. Заголовок: Дизайн, не вредный для глаз?

Каким он должен быть?
Вот отзыв постороннего человека о сегодняшнем дизайне Форы:

цитата:

Аскольд Пасічний - Дизайн стильный но неюзабельный. Видимо сделан по заказу Асоциации Безработных Окулистов.

Ну, вот... А какой будет юзабельный и что сие такое?

Хорошая читабельность - это тоже плохо?

цитата:

С каждым годом экраны планшетов и смартфонов становятся все лучше и лучше. Увеличиваются разрешение, яркость, размеры (у смартфонов особенно). Картинка становится все краше, тексты — все четче. И это — проблема. Чем лучше читабельность, тем хуже усваивается текст. Вот как это работает. Обработкой текста занимаются два разных отдела мозга. Вентральный путь делает основную часть работы. Он обрабатывает простые тексты, не требующие напряженного процессинга. Мы видим буквы, конвертируем их в слово, затем определяем значение слова. Второй компонент мозга, задействованный в чтении, называется дорсальный путь. Он включается, когда мы видим незнакомое слово, сложную формулировку или просто неразборчивый текст. Ученые долгое время считали, что дорсальный путь используется мозгом только при обучении чтению. Исследования французского нейробиолога Станисласа Дехена развеяли эти заблуждения. Оказалось, что дорсальный путь работает в любом возрасте. Но бездействует до тех пор, пока чтение не требует усилий. Почему это важно? Нейробиологи экспериментальным путем выяснили, что тексты, набранные неподходящим шрифтом, запоминаются лучше. Мозг вынужден задействовать и вентральный, и дорсальный путь, благодаря этому информация усваивается глубже и осмысленнее. Если во время чтения вас клонит в сон, то, скорее всего, это признак того, что работает только вентральный путь. Попробуйте поменять шрифт, кегль, снизить яркость экрана. Что угодно, лишь бы усложнить мозгу чтение. Это поможет расшевелить дорсальный путь. Его активация взбодрит вас и поможет воспринимать текст более осознанно. Слишком легкое чтение — бесполезное чтение.

http://habrahabr.ru/post/146559/

Комменты очень удачные :)

 Отправлено: 18.02.12 14:20. Заголовок: Да, сейчас намного л..

Да, сейчас намного лучше и глаза не режет, не приходится несколько раз моргать, чтобы "переключиться" на чтение цитаты.

 Отправлено: 18.02.12 15:21. Заголовок: Так, можно еще попро..

Так, можно еще попробовать такой вариант по аналогии с "исходником/шаблоном":

.quoteheader {
padding-left:40px;
color:#222222;
font-size:10px;
border: 1px dashed black;
-moz-border-radius:25px 12px;
-webkit-border-radius:25px 12px;
border-radius:25px 12px;
width:350px;}
blockquote {
color:#222222;
font-style:italic;
border:2px solid grey;
background: #bfbfbf;
padding: 5 15 5;
text-shadow:#6b6b6b 0px 1px 0px;
-moz-border-radius:13px 35px;
-webkit-border-radius:13px 35px;
border-radius:13px 35px;}

Как-то так. Если правильно подобрать цвета, то тень и бордеры будут хорошо выглядеть. А бордер, по-идее, должен быть светлее фона (в шаблоне ведь так?)

Я на другой форе тоже цвета подбираю)

 Отправлено: 18.02.12 18:40. Заголовок: Альма пишет: Видимо..

Альма пишет:

цитата:

Видимо, все-таки сильно от настроек монитора зависит

цвета в формате rgb от настроек очень мало зависят


Serifa
Удалось избавиться от лишнего цвета, теперь серенько (: Интересно, такой вариант народ устроит?

Serifa пишет:

цитата:

А бордер, по-идее, должен быть светлее фона (в шаблоне ведь так?)

Дык это не суть важно, "шаблон" я сварганил за пару минут и изначально у текста вообще красная тень была, по скринам в теме о css хорошо заметен "прогресс" этого шаблона :D

 Отправлено: 18.02.12 20:05. Заголовок: Zoltan пишет: цвета..

Zoltan пишет:

цитата:

цвета в формате rgb от настроек очень мало зависят

Тогда странно, что у меня на мониторе предложенный цвет был сепийно-серым, а для кого-то он был желтым. Мистика.

Только теперь вопрос, зачем было на текст тень накладывать - опять в глазах рябить начало

 Отправлено: 18.02.12 20:50. Заголовок: Альма пишет: у меня..

Альма пишет:

цитата:

у меня на мониторе предложенный цвет был сепийно-серым, а для кого-то он был желтым.

Сепия это эффект тонирования фотографии в коричневый цвет. Т.е "сепийно-серый" это и будет грязно жёлтый или серовато-бурый. И то, что предложенный вариант был с желтизной, видно сразу..


Альма пишет:

цитата:

Только теперь вопрос, зачем было на текст тень накладывать

на вкус и цвет, опять же. Тень пока убрал, если других вариантов не будет :D

 Отправлено: 18.02.12 22:41. Заголовок: Zoltan пишет: Сепия..

Zoltan пишет:

цитата:

Сепия это эффект тонирования фотографии в коричневый цвет. Т.е "сепийно-серый" это и будет грязно жёлтый или серовато-бурый. И то, что предложенный вариант был с желтизной, видно сразу..

Не спорю, что видно. Но у меня на экране он выглядел именно серый, желтого там не было. Уж показывать мне палитру-то не обязательно, я ведь видела ее, когда цвет выбирала ;) . Но я потому и сказала, что на разных мониторах цвета-то по-разному выглядят. У кого-то был четко виден желтый, у меня желтого видно не было, только сепийно-серый.

Zoltan пишет:

цитата:

на вкус и цвет, опять же. Тень пока убрал, если других вариантов не будет :D

Так гораздо читабельнее, спасибо.

 Отправлено: 19.02.12 04:42. Заголовок: Я на форе орг тень о..

Я на форе орг тень оставила, только сделала ее белой. Так даже приятнее, на оранжевом фоне. Можно на главной странице сразу увидеть, там цитата висит.

 Отправлено: 19.02.12 14:44. Заголовок: Вот сейчас зачётно...

Вот сейчас зачётно.

 Отправлено: 26.06.12 15:09. Заголовок: Неожиданное продолже..

Неожиданное продолжение темы. Читайте добавленную статью в первом прикрепленном посте.
http://habrahabr.ru/post/146559/

Из комментов:

цитата:

А я-то думал, чего это мне от учебников всю жизнь спать хочется? Оказывается, они слишком понятно написаны красивым шрифтом! :-)

 Отправлено: 26.06.12 20:15. Заголовок: Из Википедии) Дорcа..

Из Википедии)

цитата:

Дорcальный путь (канал «где?» или «как?») ассоциирован с движением, представлением о локализации объекта, управлением движениями глаз (саккады), использованием визуальной информации для оценки досягаемости объектов и доставания видимых предметов руками) Вентральный путь (канал «что?») связан с процессом распознавания формы, представлением об объекте, а также с долговременной памятью.

А в статье "Ученые долгое время считали, что дорсальный путь используется мозгом только при обучении чтению", а также "Но бездействует до тех пор, пока чтение не требует усилий"

Возможно, речь идёт о печально известных, Британских учёных. В таком случае, статья не столь полезна, сколько вредна.

 Отправлено: 28.06.12 14:36. Заголовок: Как вариант: часто в..

Как вариант: часто вижу сочетание темный фон и обрамление + светлые поля форума. Примерно, как сейчас на этой форе, только контраст побольше. Кто видел такие форумы? Как вам нравится такое контрастное оформление?

У Гарри Поттеров попадается такое оформление :)
http://spiderweb.forum24.ru/

 Отправлено: 28.06.12 22:49. Заголовок: Serifa пишет: Кто в..

Serifa пишет:

цитата:

Кто видел такие форумы? Как вам нравится такое контрастное оформление?

Вот именно настолько контрастное не нравится, по глазам бьёт. Но вообще именно вариант "темный фон и обрамление + светлые поля форума" кажется самым-самым комфортным. Однако без сильной контрастности.

 Отправлено: 29.06.12 12:21. Заголовок: До чего трудно быть ..

До чего трудно быть дизайнером......

 Отправлено: 01.07.12 18:39. Заголовок: Который раз переделы..

Который раз переделываю диз на форе орг (временно включила темно-синий вариант). А вообще пыталась сделать версию бордовского диза, который здесь сейчас. Фон я на место поставила, а вот раскраска форума не получается. У того движка свои причуды, как на борде не сделаешь. То есть, можно, но это ж надо знать, где что сломать правильно :)

Наверное, надо вообще уйти от бежевого фона, какой-то он непродуктивный.

 Отправлено: 05.07.12 13:52. Заголовок: Потырено с какого-то..

Потырено с какого-то блога.

Каким должен быть читабельный текст?

цитата:

#1 Начертание шрифтов Используйте шрифты без засечек (еще их называют Sans Serif или рубленные). Классическими примерами являются Arial, Verdana, Tahoma и другие. На экранах мониторов, имеющих гораздо меньшее разрешение, чем печатные материалы, засечки на краях букв мешают чтению. Классический шрифт с засечками, который ухудшает читабельность – Times New Roman. #2 Размеры шрифтов В подавляющем большинстве случаев удобнее всего читаются кегли 10-12. Шрифты более крупного или более мелкого размера замедляют чтение и потому повышают утомляемость пользователей. Исключение могут составлять сайты для пожилых людей. Они обладают слабым зрением, поэтому для ресурсов с подобной аудиторией стоит увеличить размер до шрифта до 12-14, а также убедиться, что строки разделяет достаточный интервал. #3 Разнообразие шрифтов Не рекомендуется использовать большое разнообразие начертаний, цветов и размеров шрифтов. Это раздражает пользователей. Взгляните, например, на шрифты на сайте Сергея Мавроди: Не правда ли пестрит в глазах и информация воспринимается плохо? Сайт – это не новогодняя елка, не нужно его украшать. Если хочется выделить какие-то фразы, тезисы или абзацы в тексте, то можно использовать жирный шрифт, курсив или любой другой единый стиль для выделения. #4 Выравнивание текста Рекомендуется выравнивать тексты только по левому краю. Исследования показывают, что неровные правые края колонок текста помогают людям фиксировать взгляд, увеличивают скорость чтения и улучшают восприятие текста. Поэтому не стоит выравнивать абзацы по обоим краям, делая все строки одинаковой длины. Еще более худший вариант – выравнивание текста по центру. В особенности, это касается строк различной длины. За примерами далеко ходить не надо, взгляните на тексты газетных интернет-изданий: Уж они то знают толк в читабельности. У всех контент выравнен только по левому краю! #5 Не используйте верхний регистр Избегайте абзацев текста в верхнем регистре. Исследования показывают, что читать его труднее. Да и выглядит это так, как будто вы кричите в глаза своим пользователям. #6 Длина строк Колонки текста, имеющие ширину более 50-70 символов читать трудно. Не зря газетчики не делают строки длинными и печатают тексты в несколько колонок. Также стоит предусмотреть возможность верстки, препятствующей произвольному удлинению строк текста на широких мониторах. #7 Контрастность текста Высокая контрастность текста и фона увеличивает удобочитаемость. Для отражающих свет поверхностей, таких как бумага, самым лучшим является сочетание черного текста и белого фона. Для излучающих свет поверхностей, каковыми являются экраны компьютерных мониторов, наоборот, лучший вариант – светлый текст и темный фон. В обратном случае свет, излучаемый светлым фоном, мешает глазу фиксировать взгляд на темных участках текста. Однако, мир печати создал такую инерцию, что темный текст на светлом фоне стал фактически стандартом и для компьютерного мира, так что практически всегда приходится следовать этой традиции. Кроме того, существует мнение, что темные сайты, несмотря на более контрастный текст, обладают меньшей конверсией, поскольку мрачные тона отталкивают пользователей. Это еще один дополнительный голос за темный текст и светлый фон. #8 Тексты ссылок Голубой подчеркнутый текст является стандартом для изображения ссылок. Постарайтесь не менять этого правила без веских причин. #9 Подчеркивания в тексте Не используйте подчеркивание в обычном тексте. Как уже говорилось выше оно «забронировано» за гиперссылками. Подчеркнутый текст будет вводить в заблуждение пользователей, они захотят кликнуть по нему. Для выделения текста лучше использовать другие методы (выделение жирным, курсивом). #10 Фоновый цвет и графика Не используйте в качестве фона для текста высококонтрастные изображения. Они затрудняют чтение и отвлекают внимание. Сайт нашего клиента компании Мир Шапок сделан настолько же нестандартно с точки зрения дизайна, насколько он неудобен для пользователя: Правда это не мешает ему находиться на первых позициях в поиске по профильным запросам. ****** Перед публикацией поста проверил тексты на блоге на предмет читабельности по этому списку и обнаружил, что как минимум 3 пункта (под номерами 4, 6 и 7) у меня не выполнены. Есть куда стремиться. А у вас как обстоят дела с удобочитаемостью текста?

Текст с картинками здесь: http://mexboy.ru/?p=3225