НадПроф

АЛЬХААФ — Школа Дизайна

Менеджер — это тот, кто уменьшает неопределенность.


Что такое надпрофессиональное образование? — Это уменьшение лоховости во всем, что не касается непосредственно твоей профессии! Но и профессии тоже.

Буду делать хорошо и не буду лохом!


Неважно какие у тебя есть знания, умения и навыки — ну, да, желательно, чтобы их было побольше, их уровень повыше, а глубина поглубже — но! — важно как ты умеешь применять этот пакет имеющихся у тебя знаний, умений и навыков. Как применять этот пакет наиболее эффективно в проекте «твоя жизнь»? — в этом суть надпрофессионального образования.


Развитие современного общества и появление новых проблем, сопровождающих это развитие, делает ясным, что в 21-м веке потребуются не только эксперты по некоторым аспектам отдельных стадий сложных процессов (профессионалов в  старом понимании этого термина). Понадобятся специалисты по решению проблем.
Это означает, что истинные междисциплинарные исследования, основанные на теории сложности, будут в цене. А в университетах будут стараться учить не «предметам», а «стилям мышления».


КРЫЛЬЯ НАДПРОФА

        #23
#22  #21 
#20  #19 
#18  #17 
#16  #15
#14  #13 
#12  #11
#10  #9
#8    #7
#6    #5
#4    #3
#2    #1




НАШИ РАССЫЛКИ

В помощь Дзенствующему
Библиотека Лотоса. Эзотерика. Магия. Религия.
Новости Бодхисаттвической Сети



НАШИ ДРУЗЬЯ

ZenRu

Сообщество ZenRu в ЖЖ

Блог Клейна

Газета Пятое Измерение

Лента Новостей БодхиNet

Бодхисаттвическая сеть

Сайт Лотоса

Блог Сеаната

FAB Russia

ЭZО-сеть

Варга — акустические музыкальные инструменты

Сибирские узоры — сайт Игоря Шухова

Блог Романа Мандрика

Prezentation.ru — всё о мультимедийных презентациях

КСАН — Агентство интерактивного маркетинга

Ксан-презентации — разработка мультимедийных презентаций

neq4 — профессиональная разработка мультимедийных виртуальных туров

Литредактор.ру — корректорская правка и литературное редактирование текстов онлайн

Мультстудия «Анимуба»

Рекламное агентство Навигатор — елочные шары с логотипом

Магазинчик HandMade — авторские подарки ручной работы

«Рисоваська»: аська + рисовать

«Моносота» — дома будущего

Международный Фестиваль «User Generated Клип! 3.0»

Московский лицей №1550

ТопСкидка.ру — мобильный путеводитель по лучшим скидкам Москвы

Ремешки № 1 для iPod nano TikTok и LunaTik в России и СНГ

Интернет-магазин Настоящей Еды «И-Мне» — здоровые продукты и полезные обеды с доставкой.



Главная / ШКОЛА НАДПРОФ / АЛЬХААФ — Школа Дизайна  /  Глава 11. Дизайн сайта от и до. ЛИТРЕДАКТОР.РУ

Глава 11. Дизайн сайта от и до. ЛИТРЕДАКТОР.РУ

Дизайн раздела «Сделать заказ»

[3.05.06]

Хааф:
Привет, Алёна!

    Aлена: Хааф, скажи, пожалуйста, как на 2 странице сделать вставки «Ваш материал содержит ___ знаков с пробелами» и др. аналогичные? Будет ли это вставляться как окошко или неотличающимся от текста шрифтом?
Это не должно быть окошком, окошки означают ввод информации. Это нужно написать обычным шрифтом, но выделить ключевое значение. Можно использовать цвет и/или полужирное начертание шрифта.
    Ян: На всем пути оформления заказа форма «Ваш кабинет», на мой взгляд, не нужна. Новый пользователь ею воспользоваться все равно не может. Пользователь, ранее регистрировавшийся в нашей системе, авторизуется в момент совершения 3-го шага, либо делает заказ непосредственно из своего кабинета.
Да, вход в кабинет в правом верхнем углу на протяжении всех страниц «сделать заказ» нужно убрать. Но пользователь может уже ввести логин и пароль к моменту нажатия на ссылку «сделать заказ», а ссылка из главного меню будет использоваться с большей вероятностью, чем такая же, но закопанная где-то в кабинете.

В этом случае, а также сразу после 3го шага справа вверху нужно выводить логин пользователя, «войти в кабинет» и «закончить сеанс», как обычно. если одна из этих ссылок будет нажата в процессе оформления заказа — нужно вывести предупреждение, что оформление заказа не будет завершено.
    Ян: Паша, я предлагаю после окончания оформления заказа любому (и новому и старому) клиенту показывать первую страничку его кабинета. Если у тебя нет возражений, это означает, что в разделе «Сделать заказ» на страничке пятого шага (там, где мы благодарим клиента) кнопку «Вернуться на главную» надо заменить на кнопку «Ок». При нажатии этой кнопки грузится первая страница кабинета данного пользователя, в которой он в том числе видит данные только что сделанного заказа и его текущий статус. Уже оттуда пользователь может вернуться на главную (если захочет) или вообще покинуть сайт.
Да. Только кнопку надо назвать не «Ок», а «Перейти в личный кабинет».

В дизайне сейчас третья колонка предусмотрена только на главной странице и там размещены новости. Так что контекстная помощь и т.п. вещи в третьей колонке в данном случае не подходят. Большое количество помощи будет размещено прямо в формах.

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

Ян:
    Хааф: кнопку надо назвать не «Ок» а «Перейти в личный кабинет»
Ок!
Паша, Алена, название последней кнопки на 5-ом шаге оформления заказа меняем на предложенное Хаафом.

И еще один момент: в текущей версии дизайна нет ссылки «Забыли пароль?».


[7.05.06]

Алена:
Привет, Хааф!
Привет, Ян! Всем привет!

Это формы.
Хааф, ждем твоих оценок. Спасибо!


Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ»



[10.05.06]

Хааф:
Привет, Алёна!
Хорошо!
Исправления:

I.

Страницы: «Закончить-сеанс», «Закончить-войти».

Информацию в этих блоках нужно расположить покучнее. Сейчас она слишком сильно разбита на две части — «логин», «закончить сеанс» и «войти в кабинет». Кроме того, надписи слишком близко к краям картинки, от этого их сложно читать.

Предлагаю все три надписи: «логин», «закончить сеанс» и «войти в кабинет» выровнять по вертикали по левому краю и немного отодвинуть вправо от картинки. А шрифт «Войти в кабинет» сделать такого же размера, как «закончить сеанс». Положи эти картинки на один из готовых макетов, чтобы увидеть, как они будут выглядеть в окружении остальных элементов страницы.

II.

Страница «Регистрация1»

  1. Заголовки страниц «Регистрация физического лица» и «Регистрация юридического лица» сделаны шрифтом меньшего размера, чем на предыдущих макетах. Нужно сделать таким же.
  2. Розовая плашка под формой сделана уже чем основная страница и это ничем не оправдано. От этого форма «болтается» на странице, особенно учитывая что она довольно длинная. Подложка сделана правильно на макете регистрация2.jpg.
  3. В больших формах становится критично чтобы названия полей располагались только слева или вверху от самих полей. Это связано с порядком восприятия информации. Прежде чем мне что-то ввести, я должен узнать, чего от меня ждут. Если ты перенесешь названия влево от полей — у тебя возникнет сложность с выравниванием самих полей. Лучший способ её разрешить — не обращая внимания на длину текста в названии, выровнять все поля по их левому краю.
  4. Если выберешь разместить названия полей слева — проследи также, чтобы первая строчка названия была выровнена по вертикали точно по середине соответствующего поля. Сейчас названия смещены.
  5. Текст договора и ввод антироботного кода неоправданно вынесены за пределы формы. Но их действительно нужно как-то отделить от остальных полей для того, чтобы было легче воспринять всю форму целиком. Предлагаю для этого между остальными полями сделать поменьше вертикальный отступ (так их легче будет воспринять как один объект),а в качестве разделителя использовать чуть больший отступ и разделительную черту. Черта может проходить внутри формы, по розовой подложке, а может быть однопиксельным разрывом в самой подложке.
  6. Звездочки на названиях обязательных для заполнения полей нужно выделить красным цветом, чтобы привлечь к ним внимание. Плюс, в самом низу формы, а лучше сразу за её пределами (так будет заметнее), перед абзацем «Если всё заполнено правильно…», справа дать расшифровку «* — обязательные для заполнения поля».
  7. Чекбокс «С условиями договора согласен» должен быть снабжён красной звездочкой. Кроме того, в современных интерфейсах сам чекбокс стандартно размещается _слева_ от надписи. Посмотри как это сделано в любой программе.
  8. Картинку с антироботным кодом и поле для его ввода нужно лучше расположить относительно друг друга. Сейчас между ними слишком сильный контраст и переводить взгляд с одного на другое затруднительно. Можно картинку сделать чуть меньше, а поле расположить справа от неё. Либо под ней, но центрировать относительно картинки.
III.

Страница «Регистрация2»
  1. Все те же исправления, что и для макета регистрация1.jpg
  2. "Контактное лицо" и «Для формирования счетов» — заголовки. Перед ними должен быть разделитель формы, а сами они должны быть выделены размером и/или полужирным начертанием шрифта.
  3. Нужно ввести разделитель между полями «БИК» и «Логин*». В этом месте заканчивается блок «Для формирования счетов».
IV.

Все макеты «Сделать заказ».
  1. Сложно воспринимаются подзаголовки, а это важная информация. Их лучше внести в начало текстового поля страницы. Выделить жирным шрифтом и немного отступить до начала текста. Заголовок «Сделать заказ» разместить там же, где расположен заголовок на всех предыдущих макетах.
  2. Размер и расположение розовых подложек, а так же разделители на всех макетах «сделать заказ» нужно сделать такими же, как в формах «регистрация».
  3. На всех макетах две кнопки внизу форм должны быть одинакового размера и располагаться на одном уровне по вертикали, слева и справа, сразу за окончанием розовой подложки. Это сделает более легким восприятие всех форм как шагов одного процесса. На первом макете должна остаться только правая кнопка. На последнем макете кнопка должна остаться по центру, а правильная надпись на ней — «Перейти в личный кабинет».
  4. На всех макетах важные цифры, которые выделены красным нужно также выделить полужирным шрифтом. Сейчас контраст с остальным текстом слишком маленький и их трудно заметить.
V.

Страница «Сделать-заказ»
«Введите здесь один или несколько файлов в формате .doc или .txt …» Расширения файлов нужно выделить полужирным шрифтом. Это важно, их должно быть возможно легко выхватить взглядом из остального текста.

Страница «Стоимость-и-срок»
Информацию о файлах нужно отделить отступами сверху и снизу. Текст «Изменен» убрать, т.к. смысл приведенной даты и так легко читается, а имена файлов и их размер могут быть длиннее и тогда не влезут в страницу по ширине. Имена фалов, их размер и дату модификации нужно выровнять по колонкам.

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

Страница «Информация-о-заказчике»
Нужно уменьшить расстояние между полями «логин» и «пароль». Кнопу «ок» нужно убрать. На этом макете нужно будет нажимать кнопку внизу справа — «Оформить заказ >>».

Страница «Оформление-заказа»
Все те же исправления, что и для страницы «Стоимость-и-срок»

Страница «Благодарим-за-заказ»
Начиная со слов «Если сейчас выходной день…» и «По всем вопросам обращайтесь…» нужно сделать новые абзацы. Чтобы разбить текст на логические блоки и сделать легче его восприятие.

«10.00», «18.00», емэйл и номер телефона нужно выделить.

Привет!
Хааф.


[14.05.06]

Алена:
Хааф, вроде все твои замечания учли, посмотри, пожалуйста.
Привет!

Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ» Дизайн сайта для проекта «ЛИТРЕДАКТОР.РУ»






Материалы по теме:

Проект «Канал ПОГОВОРИМ О ЯПОНИИ»
Проект «Клипы на песни Богушевской делаем сами!»
Проект «Worldspeaks»
Проект «Обучающие скринсейверы»





Технопарк Среды

DOBR_CONSULTING - Новый проект для Малого бизнеса

Китайский Проводник

проект СельхозЕва

Интернет-Магазин Настоящей Еды И-МНЕ

Comindwork: эмоменеджмент + человеческая схема оплаты

Международный Фестиваль <User Generated Клип! 3.0>

Проект Инди-Инди. Инди — это такой способ жить. Когда делаешь только то, что ценно — без каких-то компромиссов.

Arty Talk или Рисоваська - "Аська" в которой рисуют

НадПроф-TV — это не сервис, это эфир!

Проект 108 актуальных репортажей из Индии

Зимний Летний проектный лагерь проекта НадПроф - НадПрофессиональное образование и Школы по Второй логике - Индия-2008. Погружение

Только Для Девочек

HandMade shop

Проект БАСОМАНИЯ и сообщество bassomania

Japan Channel

Маха-ТВ

Готовь мультимедийные сани летом!

Интернет-лаборатория «Ксан»: создание мультимедийных презентаций, изготоволение электронных визитных карточек (CD-визиток)

Корректорская правка и литературное редактирование текстов on-line

Проект "neq4: мультимедийные виртуальные туры"

Компания УМА — создание интернет-магазинов

Корпоративные мультимедийные открытки

KSANCARDS.RU CD визитки, CD cards, электронные визитные карточки

Издание бумажной «Виртуальной книги НадПроф»

Сад зацелованных фруктов

Инновационные рекламные конструкции EasyShow

Школа поинга Poister.ru - учимся крутить пои вместе!

АЛЬХААФ — Школа Дизайна

Эпохальный альбом Песни Пуха

Акция! ТАНЦУЕМ НА УЛИЦАХ ГОРОДОВ МИРА!

Интернет-магазин ZenRu

Семинары по Второй Логике

Мультимедийные презентации

English party
© 2003-2006 НадПроф info@nadprof.ru
Rambler's Top100 Рейтинг@Mail.ru