Jump to content

Юзабилити


Yahoo!
 Share

Recommended Posts

Searcher =) вот ещё один вариантик, я его визуально утяжилил

http://www.greymlelelele.chat.ru/ndex.html

Главные вопросы:

1. Симантика, в каком порядке расположить блоки каталога, меню и последних статей с метками

2. С какртинками в меню, их менять не надо, хорошо подходят под общий стиль?

Edited by Yahoo!
Link to comment
Share on other sites

  • Replies 104
  • Created
  • Last Reply

Top Posters In This Topic

это хостинг добавляет всякую хрень...

хотя я в firebug удалил эти баннеры и все равно прокрутка осталась...

а насчет юзабилити... я не буду категоричен, как предыдущие ораторы. в принципе уже лучше чем было, но еще очень много проблем. Первое, что бросается в глаза:

- тяжелый верх, легкий низ - это против всех законов восприятия

- надпись "главная" хотябы заменить на "Каталог" и внести этот пункт в меню, а то путаница какая-то возникает

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

- про картинки в меню не знаю что сказать, но сюда они никак не вписываются

- левый столбец - это 1-ый уровень, а "все сайты" и т.п. - это 2-ой уровень. надо чтобы это было сразу понятно, а пока меню не особо назовешь меню. я бы и работу Лебедева на Яндекс.каталоге не назвал хорошей со стороны юзабилити, но она все же удобнее.

- выделение в каталоге тоже какое-то непонятное, если нет грида или еще какого-то разделения, то и выделение пунктов должно происходить при наведении на слово, а не на строку.

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

- облако тэгов из-за размеров шрифта слишком много внимания на себя оттягивает, возможно его стоит либо уменьшить, либо цветовое решение другое применить

- в подвале почему вдруг ссылки красные? тоже перебор с обращением внимания

- а какую семантику вы имеете ввиду я не понял... семантику содержимого или семантику кода?

Edited by Searcher
Link to comment
Share on other sites

- Я где-то писал, что хостиг сверху ставит баннер, а снизу ссылки! Из-за этого видимо полоса прокрутки, у мну на локальном всё отлично.

- Тяжёлый верх, лёгкий низ... Не знаю, футер, я думаю, не должен привлекать много внимания.

- По-моему, пустое пространство лучше, чем Copyright в центре экрана.

- Псевдо ссылки будут реализованы, конечно же.

- "Главная" изменю

- Что такое грид? Выделение же происходит при наведении О_о

- Это я паддинг заголовкам поставил, плохо?

- Метки, размер поменяю.

- Цвет ссылок поменяю.

- Семантику кода.

Спасибо Searcher, вот такой ответ намного полезнее, чем "Это херня, полная"

http://i002.radikal.ru/0911/d9/92b10ceeec07.jpg

так и должно быть?

Не могу убрать рамку у текстового поля и в шестом осле=(

Edited by Yahoo!
Link to comment
Share on other sites

- Я где-то писал, что хостиг сверху ставит баннер, а снизу ссылки! Из-за этого видимо полоса прокрутки, у мну на локальном всё отлично.

- Тяжёлый верх, лёгкий низ... Не знаю, футер, я думаю, не должен привлекать много внимания.

- По-моему, пустое пространство лучше, чем Copyright в центре экрана.

- Псевдо ссылки будут реализованы, конечно же.

- "Главная" изменю

- Что такое грид? Выделение же происходит при наведении О_о

- Это я паддинг заголовкам поставил, плохо?

- Метки, размер поменяю.

- Цвет ссылок поменяю.

- Семантику кода.

Спасибо Searcher, вот такой ответ намного полезнее, чем "Это херня, полная"

Не могу убрать рамку у текстового поля и в шестом осле=(

Ващет, за работу, который Серчер постоянно проделывает можно денхи получать, всетке анализ. =)

а как убирали рамку? Селект - да, нече не сделаешь, а вот input вроде можно прозрачным сделать.

Link to comment
Share on other sites

Ващет, за работу, который Серчер постоянно проделывает можно денхи получать, всетке анализ. =)

Спасибо :) Но это совсем такой легкий поверхостный анализ :)

- Я где-то писал, что хостиг сверху ставит баннер, а снизу ссылки! Из-за этого видимо полоса прокрутки, у мну на локальном всё отлично.

- Тяжёлый верх, лёгкий низ... Не знаю, футер, я думаю, не должен привлекать много внимания.

- По-моему, пустое пространство лучше, чем Copyright в центре экрана.

- Псевдо ссылки будут реализованы, конечно же.

- "Главная" изменю

- Что такое грид? Выделение же происходит при наведении О_о

- Это я паддинг заголовкам поставил, плохо?

- Метки, размер поменяю.

- Цвет ссылок поменяю.

- Семантику кода.

- ну вот я убрал баннеры, а прокрутка осталась.

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

- воздух должен быть, тут я ничего и не говорил

- хорошо

- ок

- выделение в данной ситуации должно происходить при наведении только на слово, а не на строку

- плохо. выравнивайте вертикали, это один из законов дизайна

- ок

- ок

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

и еще, слова "поиск на сайте..." должны пропадать при получении фокуса этим инпутом.

Link to comment
Share on other sites

А в низу ссылки убрали?

Изначально, хотел сайт с минимализмом, но потом, пумал и сделал лёгкий дизайн в шапке, просто я не художник, и по-любому сделаю гавно=) По-этому не стал пестрить, а шапку я сделал по этому сайту=)) http://media.astelecom.ru/

Вертикали выравнил.

Я скрипт прописал, но почему-то не работает, в коде можете увидеть.

а как убирали рамку? Селект - да, нече не сделаешь, а вот input вроде можно прозрачным сделать.

border: none

или необходимо по-другому?

Edited by Yahoo!
Link to comment
Share on other sites

У инпута в ИЕ рамка убирается директивой border: 0; (которую прекрасно понимают все нормальные браузеры, т.к. эта запись соответствует спеке).

У селекта кстати тоже можно рамку убрать причем во всех браузерах :)

Link to comment
Share on other sites

У инпута в ИЕ рамка убирается директивой border: 0; (которую прекрасно понимают все нормальные браузеры, т.к. эта запись соответствует спеке).

У селекта кстати тоже можно рамку убрать причем во всех браузерах :)

а как в 6 осле убираетца??? О боже... я все перерыл и все перепробывал, только, чур без JS эмуляций )

Link to comment
Share on other sites

Предвидя вопросы состряпал пример :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
* {
margin: 0;
padding: 0;
font: normal 14px Arial, Tahoma, Verdana, sans-serif;
}

div {
overflow: hidden;
}

.border {
float: left;
margin-top: 5px;
border: 3px dotted;
border-left-color: red;
border-right-color: yellow;
border-top-color: blue;
border-bottom-color: green;
}

select {
margin: -2px;
}
</style>
</head>

<body>

<div>
<select name="myselect">
<option selected="selected">я селект без рамки</option>
</select>
</div>

<div class="border">
<select name="myselect">
<option selected="selected">я селект с цветной рамкой</option>
</select>
</div>

</body>
</html>

В ИЕ6 не проверял ибо у меня его нет, но в остальных браузерах работает.

Link to comment
Share on other sites

Сафари нет под рукой, но думаю там можно порешать все если отключить подсветку поля при фокусе. Я тут на форуме эту тему поднимал. Сейчас по памяти не помню как ее отключить. Кажись на :focus надо чего-то написать.

Или там проблема не в подсветке?

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy