X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

История благодарностей участнику FordogeN. Поблагодарили: 8 раз(а)
Дата поста: В теме: За сообщение: Поблагодарили:
4.3.2011, 11:27 Юзабилити в веб-дизайне
В этой статье расскажу о том, что же это такое и зачем оно нужно.

Что же обозначает это модное словечко?
Википедия говорит:
Юзаби́лити (англ. usability — дословно «возможность использования», «способность быть использованным», «полезность» ) — понятие в микроэргономике, обозначающее итоговый уровень удобности предмета для использования в заявленных целях. Термин имеет связь с понятием «эргономи́чность», но в отличие от последнего меньше ассоциируется с технической эстетикой, с внешним видом и более привязан к утилитарности «юзабельного» объекта. Русскоязычный аналог - удобство.


Из этого следует что Юзабилити - это, пусть будет "наука" об удобстве использования чего либо. Удобство это конечно хорошо, но есть еще такое слово как "Эргономичность". Что же нам об этом скажет всезнающая википедия?

Эргономи́чность — в изначальном смысле это эффективность инструмента производства или системы в эргономике. Под эффективностью при этом понимается наибольшая производительность при наименьшей вероятности ошибки. Ныне термин употребляется в более широком смысле, обозначая общую степень удобства предмета (не обязательно средства производства), экономию времени и энергии при использовании предмета. Например: «эргономичный токарный станок», «эргономичный электромобиль» или даже «эргономичный стул».

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


Ах вот как. Крутые однако слова сейчас в моде :)

Ну теперь устроим разбор полётов.

Не знаю как ты, а я считаю что дизайн сайта должен быть Эффектным (эстетически приятным и запоминающимся) и Эффективным (удобным). Из этого следует что простой, а уж тем более примитивный дизайн не прокатит, а через чур навороченный тем более забракую. Что делать? Опишу последовательность моих действий когда я делаю дизайн:
1. Рисую сетку по которой размещаю различные элементы (логотип, навигацию по сайту, пользовательское меню, поиск и т.д.);
2. Проверяю на 3-5 людях эффективная(удобная) конфигурация или нет. Если ни у кого не возникло сложностей - всё хорошо и пункт 3 нас ждет, если у кого-то возникли - возвращаемся к пункту 1;
3. На базе этой сетки рисую уже сам дизайн и верстаю его после чего повторяем пункт 2 только уже на других людях и уже на самом дизайне, а не на сетке.

Да, я заморачиваюсь с этим, но оно того стоит. Я уверен что каждый читающий эту статью - если он держит свой сайт в сети - хочет увеличить прибыль с сайта, а если не держит - хочет сделать сайт который принесет ему/ей горы денег и мировую славу =) Это конечно-же возможно, но придется трудиться и по большей степени головой. Возьмем в пример самых знаменитых: Марк Цукерберг (фейсбук), Паша Дуров (вконтакте), Сергей Брин (гугл), Аркадий Волож (яндекс) и Брэд Фицпатрик (ЖЖ).
Во-первых все сайты существуют далеко не год и не два, во-вторых у каждого сайта команда довольно таки не маленькая, в третьих бюджет для раскрутки и содержания каждого сайта у них явно переваливает за 100$ и самое главное что хочу сказать - у ВСЕХ дизайн простой (не путать с примитивным), эстетически приятный и УДОБНЫЙ!
Этим я хочу сказать что эффективного дизайна мало для создания нифигасебесайта, но это один из самых важных пунктов в его создании!

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

Приведу пример на Вконтакте (скрин лень было делать).
- Логотип в верхнем левом углу. Обратите внимание что на всех сайтах которые я указал выше - он именно в левом верхнем углу. Обосновать это могу тем, что человек читает сверху вниз и слева направо, то есть подсознательно логотип становится первым элементом который видит пользователь;
- Меню размещено сразу под логотипом и это из тех же соображений. Пользователь его ни когда не ищет;
- Когда, например, приходит новое сообщение - пункт "Мои сообщения" становится жирным и рядом появляется циферка что начинает мозолить глаза и пользователь поневоле обращает на это внимание;
- Редактирование, например, имени - тоже проще простого. Рядом ссылка на редактирование и ни чего не нужно искать;
- И последнее - информация о пользователе красиво отсортирована что опять же улучшает и ускоряет восприятие.
[img]http://www.free-lancers.net/posted_files/543A039D0609.jpg[/img]


На этом пожалуй всё :)


Спасибо сказали: (2)
8.12.2010, 0:39 Сайт клуба традиционного ушу "Саньхэ"-2 (дизайн)
1. Серый с красным хорошо смотрится, а оранжевый (или какой это) мне совсем не нравится.
2. Фотошопом пока пользуешься не очень. В особенности стилями. Практика и еще раз практика)
3. Для кого-то это хорошо, а лично для меня плохо - шаблонность присутствует.
По пробуй отклониться от обыденной разметки :)

зы. Согласен с Димоном - грубо и не аккуратно.
Могу показать пару своих работ 2007 года которые мне вспомнились при виде этих шаблонов.

Мой шаблон по хостингу
[img]http://freelance.ru/img/portfolio/big/13830.jpg[/img]

И ливкип. Тот сайт с которым я заявился на этот форум)
[img]http://st.free-lance.ru/users/FordogeN/upload/f_49055eaa627e9.jpg[/img]

А вот работа 2008 года
[img]http://freelance.ru/img/portfolio/big/212575.jpg[/img]

Публикую чтоб ты обратил внимание как НЕ аккуратно в 2007 и как аккуратно в 2008 ОТНОСИТЕЛЬНО 2007.
Это единственное во что я тебя хочу ткнуть носом - не аккуратность!


Спасибо сказали: (1)
1.12.2010, 23:52 Сайт клуба традиционного ушу "Саньхэ"
Ярко-оранжевая шапка давит. А так обычный, даже я бы сказал "стандартный" сайт.


Спасибо сказали: (1)
25.8.2010, 18:04 Плиз оцените мой сайт
ule оценки сайта
(admin @ 25.8.2010, 12:54) *
FordogeN, может запретить оценку сайтов на юкозе?

Я думал это уже запрещено!
1) Запрещено выкладывать стандартные шаблонные сайты.

Есть конечно крутые сайты на этой каке, но 99% шаблонные и галимые как сайт ТС по этому на мой взгляд первый пункт правил запрещает выкладывать подобное.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


Спасибо сказали: (1)
3.5.2010, 17:01 Как подсчитать количество символов?
А еще можно написать скрипт)
index.html
<script>
function count() {
txt = document.getElementById('text').value; // вытаскиваеем текст
cnt = txt.length; // считаем длинну
document.getElementById('output').value = cnt; // выводим
}
</script>

Символов: <input style="border: 0px; width: 25px;" type="text" id="output">
<textarea style="width: 800px; height: 800px;" onKeyUp="count()"></textarea>

как-то так... не тестил, но должно работать.

ВаСо, обойдемся без оффтопа!


Спасибо сказали: (0)
18.3.2010, 21:10 Время генерации страницы
[php]<?
$referer=$_SERVER['HTTP_REFERER']; // От куда пришли
echo'Успешно добавлено';
echo'<meta http-equiv="Refresh" content="3; URL='.$referer.'">'; // через 3 сек переадресовываем туда, от куда пришли
?>[/php]


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


Спасибо сказали: (1)
20.1.2010, 22:27 Какие разделы ИЗО нужно изучать для техдизайна
По пробуй вот эти фотки отрисовать для начала... может как-то руку в рисовании машин набьешь.
[img]http://www.autodealer.ua/avto/images/auto/galleries/audi/audi-a4/audi-a4-005.jpg[/img]

[img]http://uasort.com/uploads/posts/2008-05/1211471182_6.jpg[/img]


Спасибо сказали: (0)
20.1.2010, 14:31 Как реализовать вывод фотографий на странице?
Не знаю, нужно код по ковырять, а вообще по пробуй сверстать просто как я предложил.
На www.fordogen.ru в портфолио и фотках можешь примеры верстки глянуть.


Спасибо сказали: (1)
13.1.2010, 11:19 Создание файла с помощью php
обьясните чайнику :)
Rashambik, Так может лучше уже на mysql сделать?
Всего одна таблица:
id | name | youtube_code

Потом выводим подобным запросом:
SELECT '*' FROM 'table' WHERE id='$id';

Ну и записываем таким:
INSERT INTO 'table' (id, name, youtube_code) VALUES ('', '$name', '$code');

Плюс еще можно будет и список выводить.


Спасибо сказали: (1)
12.1.2010, 14:08 Создание значка возле заголовка сайта
Как добавить favicon?
кхе-кхе! Мы не злобные ^_^
Этот значек называется favicon.
Вот "генераторы" фавиконок:
http://www.favicon.cc/
http://favicon.ru/

1. Создайте файл favicon.ico с помощью выше указанных сайтов, либо редактора иконок;
2. Положите иконку в основную (корневую);
3. Добавьте следующие строки в каждую страницу вашего сайта между тегами <head> </head> (не обязательно):
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

Или так:
<link rel="icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

Или так:

<link rel="icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">



Спасибо сказали: (1)
5.10.2009, 12:52 Forum.uinsell.net
оцените дизайн и все остальное
Придираться есть к чему, но сделано хорошо! молодца)


Спасибо сказали: (1)
2.10.2009, 19:24 Технический дизайн
Ссылки на уроки
(jack @ 2.10.2009, 18:11) *
Так что, работать им можно, говорите? Хм...может я погорячился за 300 у.е. брать? mellow.gif

Наверно)) Мне моего хватает выше крыши))
Еще с ним в комплекте с дровами идет прога для рисования - там действует основная фишка: чем сильнее давишь, тем жирнее "точка".
Привык к нему не сразу... Примерно часа 2 привыкал))


Спасибо сказали: (1)
1.10.2009, 23:59 Паспортизация Рунета.
(medved112 @ 1.10.2009, 22:57) *
Это не значит, что вы доки предъявляли smile.gif))

та уже дошло)))
зы. Блондин, что еще сказать)


Спасибо сказали: (1)
1.10.2009, 21:42 Оцените дизайн
Хороший дизайн! По поводу шапки - думаю стоит просто подобрать шрифт которым написать название сайта и может немного его модернизировать, но не более wink.gif


Спасибо сказали: (1)
1.10.2009, 21:30 Новенький форум
Лучше чем дизайны которые я видел на форуме до этого, но тоже не фонтан. Цветовая схема не удачно подобрана, но довольно не плохо.


Спасибо сказали: (1)
1.10.2009, 21:28 Оцените сайт
calcionapoli.ru
Фиговый дизайн. Аргументировать не буду - писать уж больно много.


Спасибо сказали: (1)
1.10.2009, 21:25 Оцените пожалуйста
Если хочешь сделать нормальный сайт:
1. Забудь о существовании таких систем как ucoz, о движках на подобие DLE и о существовании шаблонов - сделай все сам! Простенький движок на php можно написать за час.
2. Проработай дизайн до мелочей!

А теперь выскажусь по поводу текущего дизайна:
1. Оранжевые кнопки не сочетаются с розовыми элементами
2. Бирюзовый текст в начале страницы тяжело воспринимается глазом
3. Убери этот глупый опрос "Оцените мой сайт" и чат
Дальше смотреть не буду... Скажу только что очень наляписто и из-за этого тяжело сосредоточиться на чем либо.


Спасибо сказали: (1)
4.8.2009, 16:25 Прошу дать оценку 2 работам.
Прошу дать оценку 2 работам.
(chain_zzz @ 4.8.2009, 14:54) *
Наверно ты прав,но у меня что-бы все собрать ушло, дней так 30. :)

Брутальный ты человек!

зы. chain.ru - не плохо, а savnik.ru мне не нрав. Наверно из-за того что сделан не аккуратно.


Спасибо сказали: (0)
19.7.2009, 10:08 Рамка (по просьбе atwaliss)
Открываем изображение и копируем слой
[img]http://cs4183.vkontakte.ru/u19440245/93741697/x_61c4d1ee.jpg[/img]

Затем на верхнем слое вырезаем все центр, чтоб осталась только будущая рамка
[img]http://cs4183.vkontakte.ru/u19440245/93741697/x_de869f35.jpg[/img]

Заходим в меню Image > Второй пункт (не помню название на англ.) > Hue/Saturation, если на русском - то как на скрине.
Или проще - Ctrl+U
[img]http://cs4183.vkontakte.ru/u19440245/93741697/x_c3ca1102.jpg[/img]

Там повышаем насыщенность и яркость на свое усмотрение
[img]http://cs4183.vkontakte.ru/u19440245/93741697/x_69bcf234.jpg[/img]

Затем применяем к рамке фильтр размытия Guisian Blur

Ну и вот мой результат (делал за минуту, так что не орать что криво :) )
[img]http://cs4183.vkontakte.ru/u19440245/93741697/x_0a06cfc9.jpg[/img]


Спасибо сказали: (0)
18.7.2009, 19:20 Обновления алгоритмов
(admin @ 18.7.2009, 15:59) *
Да блин не оюязательно же :) Если бы я знал какую-то особенность, а они не знали, и у меня было бы немного меньше денег на продвижение чем у них, то не факт, что я не был бы выше них ;)

кароч вывод таков: СЕО - эта зараза которую "хрен проссыш")))
Проще говоря "как повезет")


Спасибо сказали: (1)
16.7.2009, 13:00 Диапазон данных
v1ex, я полагаю нужно так переменные проставить
$sql = "Select Name, Pages From Books";
if (!empty($from) && !empty($to))
{
  $sql += " Where Pages Between $from And $to";
}

И как написала Снежа - $sql это переменная в которой хранится запрос (в ее случае $query). В общем эту переменную нужно вставить как обычный SQL запрос?


Спасибо сказали: (0)
15.7.2009, 16:47 Уроки по SQL
От академии ШАГ
Вот, хорошие уроки по SQL.
Ссылка для скачивания рас http://www.getthebit.com/f/la/abbaaaaaaaaf...sql_lessons.rar


Спасибо сказали: (0)
15.7.2009, 10:26 Оптимизация под Google
...
а еще я думаю нужно чтоб все страницы были максимум 3го уровня. Т.е. 4го уровня чтоб не существовало.


Спасибо сказали: (0)
13.7.2009, 1:10 Помогите с вырезанием логотипа
Нужна срочная помощь
а ты слой ниже отключи и тема вапщет к языкам не относится.
Админы, перенесите в раздел "графика"


Спасибо сказали: (1)
11.7.2009, 22:12 Онлайн редактор picnik
Лично мне очень понравился.
САБЖ - http://www.picnik.com/app#/home/welcome
зы. Мне в этом редакторе больше всего понравилось играться с цветом. Надеюсь и Вам понравится.


Спасибо сказали: (1)

2 страниц V   1 2 >
RSS Текстовая версия Сейчас: 28.11.2020, 21:28
Дизайн