Вадим

Экспертная оценка юзабилити сайта maddog-rts9.narod.ru При просмотре ресурса без графики навигация не доступна, так как сливается с белым фоном. Можно изменить цвет ссылок или заполнить цветом блок. Использование логотипа под основной навигацией также не корректно, как вход в магазин с крыши, а указатель входа из подвала. Контактный телефон находится слишком близко к логотипу и по этой причине выглядит как визуальный шум. Золотое правило двух вершин ? сдвиньте влево/право. Использование принципа ?покупка в три шага? некорректна по причине ошибки дизайна. С помощью цветовых приемов необходимо разделить второстепенную информацию от основной. Быстрое решение ? использование CSS с прозрачным фоном для выделения блока при фокусе в сочетании с центрирование и увеличения отступов от границ. Использование тонкого шрифта красного цвета в черных вкладках так же является ошибкой дизайнера. Не ясно куда попад?т пользователь при клике по ссылке ?Юридическим лицам?, если для ссылки ?Частным клиентам? объясняется, что будет показано на новой странице, то для первой нет. Ссылка ?читать дальше? так же изживший способ привлечения внимания. Сейчас такой метод уже не актуальный, тем более если мы говорим о SEO, то целесообразно использовать ссылку в виде ключевых слов внутри текстового блока. Подробнее об этом можно прочитать на тематических форумах. Также не понятна логика использования заголовков, особенно их повторение. Можно отметить, что для ПС (поисковой системы) заголовок является уникальным. Это значит, если если первый h1=услуги, то второго h1 не существует. Обычно такой метод использования заголовков приводит к полному выпаданию результатов из индекса с дальнейшим наложение фильтра в виде песочницы. Наличие портфолио возможно обнаружить только внизу страницы, куда обычный посетитель не доходит. Вообще логика построения навигации, и концепции в общем, сомнительна. Разделы, которые действительно необходимо выводить в самом верху почему-то находят внизу и наоборот. Раздел ?Калькулятор? смущает своим присутствием на главной странице. В действительности только зашедшему человеку на сайт этот раздел неинтересен. Используете калькулятор только в тех разделах, где есть что считать: пусть это будут удобные формы, в продукции и в локальной навигации. В заключении важно отметить, что первая страница подвергнута визуальному шуму. Необходимо убрать весь мусор, который мешает принципу ?покупка в три шага?. Важно отметить, что сайт ? это баннер, который просматривается на высокой скорости. Спасибо, что дочитали до конца. Надеюсь мои слова помогут. В данном посте не было задачи обидеть автора или как-то унизить достоинство третьих лиц.

Экспертная оценка юзабилити сайта wallstreetrealty.ru Первое, что бросается в глаза неправильное соотношение кегля шрифта между навигацией и сервисами (новости компании, партнеры, контакты). Данный выбор решения не является удачным по причине использования устаревших методов представления контента. Небольшой размер кегля навигации возможен при использовании приоритета контента над окружением. К сожалению такой метод не используется из-за отсутствия связанных ссылок в тексте. Пользователь читая/просматривая текст должен иметь возможность перейти по нужной теме/ссылке. Например попав на сайт частной клиники пользователь имеет возможность просматривать последовательно контент, и дойдя до нужной ему информационной области перейти к подробному описанию. При таком подходе существует возможность использования навигации как вспомогательный инструмент. Так же при изменении размера шрифта (в IE) навигация сохраняет прежний размер, что является некорректным, так как навигация ? это основной инструмент взаимодействия пользователя с сайтом. Если же изменение размера шрифта имело место, то это явно означает, что необходимо изменить размер кегля всего документа или ту часть, которая является основной, включая навигацию. В контактах не рекомендуются сокращать или как-то писать e-mail иначе. Вс? же тот, кто пользуется электронной почтой знает, что эквивалент на английском языке выглядит как e-mail. Поэтому более целесообразно использование английского варианта написания ссылки типа mailto. Так же нижнюю строчку (2007?2008 ОАО ?ОЛМА КРАФТ?) рекомендуется перенесите к контактам или вообще исключить ? в данном использовании избыточна. Спасибо, что дочитали до конца. Надеюсь мои слова помогут. В данном посте не было задачи обидеть автора или как-то унизить достоинство третьих лиц.

Работаю в должности руководителя экспертной группы юзабилити, поэтому приходится часто говорить и много объяснять в письменном виде. Если что не так - простите

Лишняя трата времени и денег. Поисковик приведет на HTML и тогда толку от Flash нету. Исходим из задач Flash-сайта. Обычно сайт, который делается полностью на flash не добавляется в ПС (webmaster запрещает индексацию в robots.txt). Поэтому распространение адреса сайта достигается путем маркетинговых ходов. HTML-версия сайта лишь нужна для тех заинтересованных людей, которые не имеют возможность воспользоваться средствами flash. А вот если заказчик экономист, то теряет потенциальных покупателей. Как пример ? mehoff.ru.

Даже смотреть не буду - для экрана 1024x768 не оптимизирован!

Добрый день, toxic-mt! Юзабилити-тестирование Вашего сайта (http://www.elle-design.ru/) выявило несколько недочетов. Очень часто дизайнеры и сами верстальщики недооценивают важность функции увеличения кегля шрифта (говорим о IE), поэтому решают за пользователя, каким будет кегль. Не стоит забывать о том, что многие взрослые люди освоили компьютер и даже Сеть. Я очень часто слышу от людей старше 50 лет, что им очень тяжело использовать сайты только потому, что шрифт недостаточного размера или контраста. Втрое не касается вашего сайта, а первое, увы, можно изменить только Оперой. Уверен, что клиенты данного сайта ? люди старшего поколения. Также смущает интервал между строками и шрифт. Проблемы шрифта особенно заметна, когда используется курсив. Быстрый способ избавиться от проблем: использовать подчеркивание вместе курсива, увеличить шрифт до 13-15px, увеличить кегль заголовка, чтобы новый размер шрифта соответствовал задуманному дизайну. Интерфейс навигации понятный. Правда смущает выбор последовательности и именования разделов. Принимая опыт во внимание, могу сказать, что заказчика больше интересует услуги и портфолио ? это мы и видим на главной странице. Остальные разделы ? дело логики. Раздел ?Цены? содержит хороший текст. Однако зачем посетителя сайта называть ?Заказчик?, если просто можно перейти на Вы или Ты. Стоит так же понимать важность копирайтинга, когда специалисты способны написать текст таким образом, что он не требует прямого обращения. В некоторых проектах это актуально. Хочется так же отметить старания верстальщика, ведь просмотр без графики не ухудшает общее впечатления о компании. Спасибо, что дочитали до конца. Надеюсь мои слова помогут. В данном посте не было задачи обидеть автора или как-то унизить достоинство третьих лиц.

ZoNT - знаешь в чем трабл? http://aliveit.ru/ В IE link1 срезается border-left...

Спасибо, дружище! Твой метод хороший! Потому что он работает, я только что придумал как сделать рамку и как сделать id="self". Рамка делает просто - создается новый div с стилем #content (... height: 112px; background: #fff;). Далее беру твой .block и заменяю его на абсолютное значение (top: 406px;) - рамка готова. Теперь для того, чтобы создать id=self (красная рамка на открытой фотке) я добовляю новый класс без определения ссылки, т.е. link3 {border: 6px solid red;} и присваиваю его img! Готово! Спасибо всем за участие! Postal Гуру! )

Лучше так: background:#ffffff; 1 - писать color - необязательно. 2 - лучше писать вс?-таки все 6ть символов кода цвета, бывают глюки в IE6 и старых Мозиллах. Ок, спасибо. Не знал про такие приколы. Но все же в моем примере это не работает. Может посмотришь? )

Добавлял! Толку нет. Влияет только, когда для body указываю. Но для body у меня другой цвет. Сам не пойму, почему в контейнере цвет не изменяется (кстати это касается и твоего примера).

Вот смотри код на сайте. Я добовляю твой код в контейнер, который центрирует блок по центру: body { background: url(bg4.png) repeat 0 0; margin:0; padding:0; font-size: x-small; font-family: Verdana, Arial, sans-serif; text-align: center; } #container { text-align: left; position: absolute; top: 50%; left: 50%; margin-top: -256px; margin-left: -321px; width: 642px; } #content { width: 630px; height: 400px; background-color: black; border-top: 6px solid #fff; border-left: 6px solid #fff; border-right: 6px solid #fff; } Далее сам html: <div id="container"> <div id="content">текст или большая фотка</div> <div class="block"> <a class="link1" href="http://aliveit.ru/hh.html"><img src="1.png" alt="" /></a> ... <a class="link1" href="http://aliveit.ru/hh.html"><img src="6.png" alt="" /></a> </div> </div> </body> </html>

а как в твоем методе реализовать id="self" т.е. выделенная картинка не может быть уже ссылкой, так как она уже открыта, но мне надо е? выделить красной рамкой (как на примере). Я не смог этого сделать, поэтому взял код ZoNT. Можешь подсказать?

a:link { color: #999999; text-decoration: none; } a:visited { color: #999999; text-decoration: none; } a:hover, a:active { color: #3968B7; text-decoration: underline; }

Postal, ZoNT - Друзья, большое спасибо! Молодцы! Я бы ни за что не догадался, что так можно сделать! Фекнс! Осталься только маааленький вопрос. Как сделать так, чтобы я видел белую рамку не зависимо от body? Я уже попытался .block впихнуть в другой div, но толку нет. Получается так: http://aliveit.ru/ А должно быть так: http://aliveit.ru/prime.png Подскажите?

Мне не понятна логика работы навигации. Почему слева и с права от активной закладки другие при наведении мышкой не вылазят? Вот если брать закладку 2ую слева или справа, то они выходят на первый взгляд. На самом деле мне нравится навигация ? она понятная, но любопытство берет вверх. Вот если на сайт попадаешь с ПС, то сразу не понятно на какой странице находишься (заголовок слишком серый, точнее он просто серый, как мышка) ). Эта проблема из-за того, что навигация цветная, а заголовок нет. Выход простой ? делайте заголовки цветом закладки раздела) Надеюсь это поможет. Хотя проблема действительно в навигации есть, особенно это чувствуется в разделе ?Стоимость?. Так же интересует как ты сделал ?Блок с портфолио?. Офигенно смотрится! Ссылка ?читать дальше? - прибейте е? к одному из элементов. Когда смотришь страницу сверху, то понятно к какому заголовку относится ссылка, когда смотришь в середине, то начинаешь немного путаться, ощущать не комфортно. Это типичная ошибка дизайнеров. Просто поднимите ссылку на 2-4px к тексту/заголовку. К логотипу не хватает слогана, хотя можно и отказаться, потому что лого действительно в красивом исполнении. Текст в разделе стоимость действительно ориентирован только на специалиста. Лично меня смущают слова типа ?футер?, мой мозг в этот момент думает больше, чем положено Вообще считаю, что в тексту присутствует некий диалог с парнишкой-специалистом, с которым ?на ты? общается хозяин сайта. Высший пилотаж копирайтинга, когда текст ориентирован НА ВСЕХ и имеет понятную структуру. Блок текста ?предоплата? так же требует профессионального редактирования. Блок ?способы оплаты? требует ссылок, уверен, что не все заказчики знакомы с данными способами оплаты. Не буду советовать здесь ничего, потому что это слишком много и долго/флуд. Блок ?Лучшие заказчики? считаю неуместным. Пусть это будут просто ?заказчики?, или ?заказчики которы(е)х знают в лицо? Просто возникает логичный вопрос ? а остальные заказчики не люди? На сколько я знаю, хорошая контора (или дизайнер) показывает не все портфолио, а лишь небольшую его часть. Так что рекомендую подумать над этим. Ссылка ?заказать верстку? сделайте на обычной странице, как и весь текст. SVG ? это круто, но лишне. Вообще на сколько я владею информацией 50% фирм работают на *nix системах, а там брОузеры вообще ничего не поддерживают. Так что есть риск потерять клиента. С другой стороны, если ваши заказчики ? web-студии, то волноваться не о чем, они оценят ваши познания в программировании! Раздел ?Отзывы? несерь?зный. Да, сайт не консервативный, это сразу видно. Но рука редактора явно не трогала отзывы. Так дело не пойдет, просто данный раздел вызывал (лично у меня) улыбку и здоровый смех. Вообще это полезно. Смотрите сами ? смотря КТО ваши заказчики. Только к концу написания этого отзыва заметил, что сайт меняет цветовую палитру в зависимости от раздела, поэтому первое предложение не актуально, но проблема с навигацией очевидна. Резюме: общая оценка: 5 -. А вообще сайт супер, таких всего в RU зоне 2-3% максимум! Так что держать курс на хороший и удобный дизайн! Спасибо, что дочитали до конца. Надеюсь мои слова помогут. В данном посте не было задачи обидеть автора или как-то унизить достоинство третьих лиц.

Столько сложностей с css. Давайте рассуждать трезво. Если мы хотим построить сайт из 3х колонок, то можем использовать или div, или таблицу (чего я не рекомендую). Для таблицы все просто - 1 строка, 3 столбца: 1 и 3 задается width, а задавать width для 2 не надо. Для div чуть сложнее. Если делать через div, то всем трем столбцам (div) нужно задавать размер (px, %). Если делать через DIV, то надо создать сначала 2 div. Допустим так: <style> #left { float: left; width: 80%; } #subleft { width: 20%; } #right { float: right; width: 19%; } </style> <body> <div id="left"> <div id="subleft">левая колонка</div> а здесь сам текст по центру </div> <div id="right"></div> </body> Имея опыт в 10 лет написании сайтов скажу так - не используйте 3 колонки, если у вас не портал. Остановитесь на 2х - этого более чем достаточно. 3 колонки - это уже визуальный шум, который только мешает посетителям вашего сайта. Ведь согласитесь, что обычно в 3ей колонке размещается реклама. И так же не используйте div для создания табличной верстки, это против самого принципа доступности сайтов, тем более такой сайт не так просто реализовать. Многие люди не понимают, как работаю их сайты и верстают их методом тыка.

О, отлично! Давай попробуем? Надо выбрать тематику и дизайн. Ты случайно не дизайнер? Вообще за такими интерфейсами - будущее. Скажем так 120% юзабилити. Это удобно и позволяет сосредоточиться на контенте, а не навигации. Вообще считаю, что надо отходить от привычной навигации. Нет, не подумайте что вообще! Просто закладки - это идеально, а локальное меню - нет. В действительности многие люди не способны понять, что слева под основной навигацией присутствует локальная навигация. Тема эта очень обширная и интересная, но долго писать. Если у кого есть свои мысли по поводу навигации - делитесь опытом! p.s. а вот некоторые терминалы даже оч ничего (не в России)! )

Вообще сейчас все делаю смешанную страницу svg/flash+html. Минус в таком подходе - шрифты. Все равно придется использовать JS, чтобы h-заголовки Лучше тогда, когда есть 2 полноценные версии сайта (flash и html).

тьфу блин) Привет! Давно вижу тебя во всех ветках! Приятно познакомиться) Мне делать не надо, я просто подал идею для подрастающего поколения. Было бы время - нарисовал. Только нужна конкретная задача)

Вы используете подряд слишком много имен. Даже Опера не всегда понимает сестринские отношения между элементами. Это значит, что запись такого типа id class p a span {...} не всегда обрабатывается корректно. Путем проб и ошибок попробуйте назначить только ID и непосредственно последний элемент, который вы задаете. Если же вы назначаете класс, то знайте, что ID имеет приоритет над классом, поэтому советую отказаться от конструкции, которую вы практикуете. Данная проблема раскрыта в учебнике CSS Эрика Мейера.

Просто задайте в ячейках 444 и 666 height="100%". IE не умеет определять высоту строк, когда используется свойство colspan или rowspan. Удачи в проектах! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <title>explorer некорректно тянет ячейки таблицы</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </style> </head> <body> <table width="100%" height="408" border="1" cellpadding="1" cellspacing="1"> <tr> <th colspan="3" height="50">левый,верх</th> <td colspan="2">левый,право</td> </tr> <tr> <th width="5%" rowspan="5">лево,средний</th> <td width="21%" height="15">1</td> <td width="39%">2</td> <td width="29%">3</td> <td width="6%" rowspan="5">4</td> </tr> <tr> <td height="30">222</td> <td rowspan="3">Новости. Читать дальше. Новости. Читать дальше. Новости. Читать дальше. Новости. Читать дальше. Новости. Читать дальше. Новости. Читать дальше. Новости. Читать дальше. Новости. Читать дальше. Новости. Читать дальше. Новости. Читать дальше. </td> <td height="30">333</td> </tr> <tr height="1"> <td rowspan="2" height="100%" bgcolor="yellow">444 / Просто задайте высоту в 100%</td> <td>555</td> </tr> <tr> <td height="100%" bgcolor="yellow">666 / Просто задайте высоту в 100%</td> </tr> <tr> <td>11</td> <td>11</td> <td>11</td> </tr> </table> </body> </html>

Друзья! Я работал с иностранцами и они мне сказали одну оч умную вещь: "если делаете сайт на flash, то пусть это будет на экран 1024x768, а ниже, прокрутив страницу, будет обычная html страница с тем же контентом, который использовался выше". Это действительно работает, так как ПС (поисковые системы) проиндексируют текст, а flash останется для посетителей. Так же можно через css скрыть блок с текстом от пользователя, только это очень большой риск, так как ПС вас удалит за нарушение правил. Из Yahoo точно удалят.

вообще можно продолжить тему и показать пример таких красивых графических кнопок, как делают в терминалах по приему денег. никто не хочет попробовать?

Спасибо. Я так тоже сделал, почти. (Твой пример работает в Opere! Как ты так сделал? Задал стиль для ссылки и все стало ок?.) В общем вопрос АКТУАЛЬНЫЙ. Необходимо, чтобы между фотографиями было 6 px + рамка в 6px изменяла свой цвет. Прикладываю пример: http://aliveit.ru/2.png

я иногда для оперы использую отдельное правило: <style> id {margin: 40px;} html>body id {margin: 20px;} </style> html>body IE такое не понимает, поэтому можно один и тот же класс задавать как для IE, так и для всех остальных броузеров.