Форум » Вопросы дизайна » Дизайн, не вредный для глаз? » Ответить

Дизайн, не вредный для глаз?

Serifa: Каким он должен быть? Вот отзыв постороннего человека о сегодняшнем дизайне Форы: [quote]Аскольд Пасічний - Дизайн стильный но неюзабельный. Видимо сделан по заказу Асоциации Безработных Окулистов.[/quote] Ну, вот... А какой будет юзабельный и что сие такое? Хорошая читабельность - это тоже плохо? [quote]С каждым годом экраны планшетов и смартфонов становятся все лучше и лучше. Увеличиваются разрешение, яркость, размеры (у смартфонов особенно). Картинка становится все краше, тексты — все четче. И это — проблема. Чем лучше читабельность, тем хуже усваивается текст. Вот как это работает. Обработкой текста занимаются два разных отдела мозга. Вентральный путь делает основную часть работы. Он обрабатывает простые тексты, не требующие напряженного процессинга. Мы видим буквы, конвертируем их в слово, затем определяем значение слова. Второй компонент мозга, задействованный в чтении, называется дорсальный путь. Он включается, когда мы видим незнакомое слово, сложную формулировку или просто неразборчивый текст. Ученые долгое время считали, что дорсальный путь используется мозгом только при обучении чтению. Исследования французского нейробиолога Станисласа Дехена развеяли эти заблуждения. Оказалось, что дорсальный путь работает в любом возрасте. Но бездействует до тех пор, пока чтение не требует усилий. Почему это важно? Нейробиологи экспериментальным путем выяснили, что тексты, набранные неподходящим шрифтом, запоминаются лучше. Мозг вынужден задействовать и вентральный, и дорсальный путь, благодаря этому информация усваивается глубже и осмысленнее. Если во время чтения вас клонит в сон, то, скорее всего, это признак того, что работает только вентральный путь. Попробуйте поменять шрифт, кегль, снизить яркость экрана. Что угодно, лишь бы усложнить мозгу чтение. Это поможет расшевелить дорсальный путь. Его активация взбодрит вас и поможет воспринимать текст более осознанно. Слишком легкое чтение — бесполезное чтение. [/quote] http://habrahabr.ru/post/146559/ Комменты очень удачные :)

Ответов - 56 новых, стр: 1 2 3 4 All

Миледи2: Serifa , это не очень ясно, но, имхо, этот дизайн хороший))) И что значит - юзабельный?(Ох уж этот "Ранглиш")))) ) Я думала, только наши иммигранты из Норс-Йорка(русскоязычная община) этим болеет))) Сейчас - нормальный читабельный диз)) Эти спокойные тона никак не могут быть вредны для глаз, верьте мне, у меня с глазами серьезные проблемы, поэтому приходится в этом разбираться))

Альма: Да уж столько раз это обсуждалось, сколько ж можно-то уже? Это сугубо субъективное мнение - кому-то юзабельно одно, кому-то другое. А так, чтобы на всех - так это стандартный, белый, с черными буквами. Но и к этому придерутся, что слишком белый, глаза режет.

Миледи2: Альма , да, это можно обсуждать до бесконечности...


Serifa: Воистину, больной вопрос(

Альма: Вот к вопросу о читабельности и вреде для глаз - только мне дико режет глаза новый стиль цитаты на Форре? Пыталась привыкнуть, но никак. Черная, с белыми буквами, когда весь форум светло-серый - это убивает Т_Т Сделать бы ее, что ли, хотя бы белой, с черными буквами, но почему черной-то?

destiny: Альма пишет: только мне дико режет глаза новый стиль цитаты на Форре? не только. Хотя я вообще-то на зрение никогда не жаловалась, но белые буквы на черном фоне, чесслово, мешают прочесть цитируемое (

Zoltan: Альма пишет: Сделать бы ее, что ли, хотя бы белой, с черными буквами извиняюсь, сам сторонник тёмных дизов (слишком чувствителен к яркому свету), потому делалось так, а Серифа менять пока не стала. Если будет "за" - внесу правки в css. А вообще, "идеальные контрасты" - зло. Имхо.

Serifa: Не, белая с черными буквами - это перебор. Разве что темно-серый фон и белые буквы? А окантовку тогда черной?

Zoltan: Serifa Как скажете, так и будет сейчас шрифт белый италик, фон #474747; окантовка черный 2 пикселя..

Альма: Serifa пишет: Разве что темно-серый фон и белые буквы? А окантовку тогда черной? Само наличие темной цитаты со светлым текстом - вырывает глаз, потому что слишком резкий контраст с форумом. Serifa пишет: Не, белая с черными буквами - это перебор. Имхо, для данного форума перебор как раз черный фон и белые буквы -__-

Zoltan: Альма пишет: потому что слишком резкий контраст с форумом. однако тёмно-серый фон и светлое тело форума глаза не вырывают.

Serifa: Zoltan пишет: однако тёмно-серый фон и светлое тело форума глаза не вырывают. А вдруг? Надо сделать, как Альма предложила :)) Сама пусть и оценит

Zoltan: Имел ввиду, что сам форум светлый, а на фоне серенькая текстура, бэкграунд. Потому, кажется, предыдущий вариант вязался с форумом неплохо. А теперь как-то не айс, имхо

Альма: Zoltan пишет: однако тёмно-серый фон и светлое тело форума глаза не вырывают. Нет, не вырывают, потому что тело светло-серое, а текст черный. Если бы цитата была в схожем стиле, не было бы такого контраста, а когда она черная... как уже было сказано: Zoltan пишет: как-то не айс, имхо Тем более, как я смотрю, не только у меня глаза болят от этой цитаты

Serifa: Так, надо сделать скрин. Чтобы было чего предъявить публике :) А мне вообще контрастный черный с белым нравился Он был такой неординарный) Серый делает цитату плоской, белый фон - тоже. А вот с черным было как-то интереснее. Можно еще попробовать темный серый фон и буквы #cccccc. Для разнообразия. Скрин сделала!

Zoltan: Serifa пишет: Серый делает цитату плоской, белый фон - тоже. Просто приходится убирать тень шрифта, т.к выглядит слишком резко, а на сером фоне наоборот, улучшает читабельность, вроде как Serifa пишет: Можно еще попробовать темный серый фон и буквы #cccccc done. Мне больше нравился белый шрифт. Одно досадно - всегда и всем не угодишь.

Serifa: Скрины: Что лучше?

Альма: Если брать крупные цитаты, а не однострочные, то лучше первый вариант, если белый чуть менее ярким сделать, имхо.

Serifa: Менее яркий белый - это просто фон #cccccc и шрифт #000000 То есть, фактически как сам форум. Только окантовка будет черная, можно буквы с тенью. Это будет аккуратно, хотя бы.

Zoltan: Serifa пишет: Менее яркий белый - это просто фон #cccccc и шрифт #000000 cделал

Serifa: Ждем реакции почтенной публики :)

Irreal Faces: Вообще тут выше верно высказывались: когда цитируется достаточно большой кусок текста, чёрный фон с белыми буквами бьёт по глазам. Сужу по теме своего форума, там как раз цитирования довольно много. Сейчас - читабельно.

Morfus: Фон цитаты производит впечатление голубоватого. Такой не очень приятный оттенок.

Альма: Morfus пишет: Фон цитаты производит впечатление голубоватого. Такой не очень приятный оттенок. Есть такое. Может такой подойдет? #d1cbbf Принтскрин не работает чего-то не могу более наглядно сделать, вслепую приходится подбирать.

Serifa: А подо что вы подбираете? :) Надо же ориентироваться на цвета форума. Например, на блики светлого в фоновом рисунке (не который в форумской таблице). А если ориентироваться на табличный фоновый рисунок, надо учитывать, что те цвета в сплошном заполнении будут выглядеть совсем не симпатично. У меня оно работает всегда :) Щас гляну в композере.

Альма: Serifa пишет: А подо что вы подбираете? :) Чтобы было приглядно и читабельно.

Zoltan: И чем жёлтый лучше голубого? з.ы. по-быстрому сварганил органично "вписывающийся" вариант, где фон цитаты - картинка из фона форума, но увы, чтоб выделить это на общем теле нужно менять гамму, а это снова тёмные тона, которые тут не любят

Альма: Zoltan пишет: И чем жёлтый лучше голубого? Где желтый? Брала серо-коричневый. Видимо, все-таки сильно от настроек монитора зависит.

Serifa: Да, выглядит желтовато. Зависит еще от фона, на котором картинка расположена :) Я ничего не успела, пошла спать. Завтра открою этот композер и попробую там варианты цветов. Доброй всем ночи и доброго утра!

destiny: Сейчас (имхо) читается приятнее. Даже крупные куски текста в цитате (проверила на себе)) Спасибо!

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

Serifa: Так, можно еще попробовать такой вариант по аналогии с "исходником/шаблоном": .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;} Как-то так. Если правильно подобрать цвета, то тень и бордеры будут хорошо выглядеть. А бордер, по-идее, должен быть светлее фона (в шаблоне ведь так?) Я на другой форе тоже цвета подбираю)

Zoltan: Альма пишет: Видимо, все-таки сильно от настроек монитора зависит цвета в формате rgb от настроек очень мало зависят Serifa Удалось избавиться от лишнего цвета, теперь серенько (: Интересно, такой вариант народ устроит? Serifa пишет: А бордер, по-идее, должен быть светлее фона (в шаблоне ведь так?) Дык это не суть важно, "шаблон" я сварганил за пару минут и изначально у текста вообще красная тень была, по скринам в теме о css хорошо заметен "прогресс" этого шаблона :D

Альма: Zoltan пишет: цвета в формате rgb от настроек очень мало зависят Тогда странно, что у меня на мониторе предложенный цвет был сепийно-серым, а для кого-то он был желтым. Мистика. Только теперь вопрос, зачем было на текст тень накладывать - опять в глазах рябить начало

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

Альма: Zoltan пишет: Сепия это эффект тонирования фотографии в коричневый цвет. Т.е "сепийно-серый" это и будет грязно жёлтый или серовато-бурый. И то, что предложенный вариант был с желтизной, видно сразу.. Не спорю, что видно. Но у меня на экране он выглядел именно серый, желтого там не было. Уж показывать мне палитру-то не обязательно, я ведь видела ее, когда цвет выбирала ;) . Но я потому и сказала, что на разных мониторах цвета-то по-разному выглядят. У кого-то был четко виден желтый, у меня желтого видно не было, только сепийно-серый. Zoltan пишет: на вкус и цвет, опять же. Тень пока убрал, если других вариантов не будет :D Так гораздо читабельнее, спасибо.

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

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

Serifa: Неожиданное продолжение темы. Читайте добавленную статью в первом прикрепленном посте. http://habrahabr.ru/post/146559/ Из комментов: А я-то думал, чего это мне от учебников всю жизнь спать хочется? Оказывается, они слишком понятно написаны красивым шрифтом! :-)

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

Serifa: Как вариант: часто вижу сочетание темный фон и обрамление + светлые поля форума. Примерно, как сейчас на этой форе, только контраст побольше. Кто видел такие форумы? Как вам нравится такое контрастное оформление? У Гарри Поттеров попадается такое оформление :) http://spiderweb.forum24.ru/

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

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

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

Serifa: Потырено с какого-то блога. Каким должен быть читабельный текст? #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

Zoltan: Используйте шрифты без засечек (еще их называют Sans Serif) Не используйте Comic Sans, который Sans Serif. Пожалуйста Можно зайти на википедию и поглядеть на картинки с comic sans и Times new roman. Разница в читабельности на лицо. Классический шрифт с засечками, который ухудшает читабельность – Times New Roman. А вот на хабре так не считают, цитата из комментариев к посту, ссылка на который в шапке Горизонтальные засечки нужны чтобы уменьшать визуальное расстояние между буквами и делать строку более плотной, что облегчает чтение. Собственно, вертикальные тоже служат этой цели — сравните например пары «ет, гс» с засечками и без. Возьмите, к примеру, слово «удивительно» — в нем у некоторых букв будут горизонтальные засечки, у некоторых вертикальные, у некоторых вообще нет — и сравните насколько оно «цельно» выглядит когда с засечками. Надеюсь, каждый видел сайт полностью из комик-сансов и понимает, что это не читабельно на все 100%

Serifa: Там еще сказано: оптимальным для экранов будет сочетание темного фона и светлого шрифта! Но инерция человеческого мышления заставляет нас предпочитать всё наоборот, как-то так :) Не знаю, я не могу долго читать текст на темном фоне, глазки болят.

Zoltan: Serifa да цвет фона это страшная вещь вообще хотя я бы не сказал, что здесь сейчас светлый фон, скорее, нечто среднее и читается нормально. Скорее, темноватый фон и тёмный шрифт. Помню бум форумов, "чёрное на сером" и не жаловался никто

Альма: Serifa пишет: ам еще сказано: оптимальным для экранов будет сочетание темного фона и светлого шрифта! На самом деле так и есть. Даже на компьютере стоит оформление "контраст", чтобы глаза щадило. В нем черный фон и белые буквы, в любой момент можно проверить на компьютере. Я как-то раз попробовала с таким посидеть - реально глазам спокойнее, но из-за того что очень непривычно - я так долго не прожила.

Serifa: Я уже всю голову сломала - диз делаю... Светлый фон - слишком ярко. Темный - нечитабельно. Контрастный - глаза режет. Еще какая-то ошибка в коде целый вечер мучает: то ли я что-то случайно удалила, то ли уже глюки... Если делать совсем читабельно - пропадает атмосферность, как бы игра все-таки, а не новостной сайт...( На этом форуме фон таблицы в самом деле удачный, вот только эта зернистость текстурная иногда мешает, если глаза устали. На SMF на фон такие текстуры не зальешь - слишком много придется переделывать в коде... Зато уже чего-то не хватает)) Просто чистый фон - уже скучно.

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

Serifa: Бежевый пробовала! Камрад с техподдержки пришел, глянул, сказал - нечитабельно. Он еще не видел темно-серый вариант, который я сейчас делаю)))) Сделаю сразу несколько порций: совсем темный, посветлее и еще светлее. Я вообще подбираю цвета так, чтобы сочетались с фоном, и была общая композиция какая-то. А фон у меня - вот этот, местный, который сейчас на этой форе. Потому что это уникальный фон, я сама его "изобрела", и из всех моих фонов он самый интересный получился. И хорошо выглядит при любом расширении монитора.

Альма: Serifa, бежевый бывает разный. Можно и нечитабельный сделать, если постараться.

Serifa: Аскольд Пасічний - Дизайн стильный, но неюзабельный. Видимо сделан по заказу Асоциации Безработных Окулистов. Это про текущий диз форы. В первом посте этой темы :) Про диз для форы орг сказали просто: нечитабельно, но он был гораздо темнее, так что можно понять. На Катфри точно не бежевый, скорее... эм... золотистый? Цвет беж (фр. beige), бежевый — светло-коричневый, с кремовым (желтоватым) или сероватым оттенком, вариант цвета шерсти https://www.google.ru/search?q=%D0%B1%D0%B5%D0%B6%D0%B5%D0%B2%D1%8B%D0%B9+%D1%86%D0%B2%D0%B5%D1%82&hl=ru&newwindow=1&prmd=imvns&tbm=isch&tbo=u&source=univ&sa=X&ei=SSX4T5vDNYGr-gbq8bHhBg&ved=0CFIQsAQ&biw=1920&bih=942 На Катфри желтого больше, чем нужно, чтобы он был бежевый, имхо. А вот тут гораздо больше бежевого: http://forum.mars-x.ru/index.php?s=d553f011054ebd814c08fb4e8bbd8674&act=idx Но я сейчас перешла к серому тону, пытаюсь выжать что-то из него.

DXV: Serifa А попробуй Duck еgg blue. Может, что-нибудь интересное получится...

Serifa: DXV Сначала с серым разберусь. Я поняла, как сделать поля для форума светлее основного фона, я гений. Вот только башка трещит после вчерашнего работы)) Вот такой синий? Так это почти СМФ-дефолт, только если совсем белый убрать из фона. https://www.google.ru/search?q=Duck+egg+blue&hl=ru&newwindow=1&prmd=imvns&tbm=isch&tbo=u&source=univ&sa=X&ei=Yjz4T-HxLM2e-Qbe5ZHIBg&ved=0CGMQsAQ&biw=1920&bih=906 И это тоже уже было :) Какой-то он... нефантастический.



полная версия страницы