Анализ сайта «Сходня Мебель»

01Отступы выбраны случайным образом.
По краям от логотипа следовало бы отступить побольше.

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

Нет смысла в том, чтобы выравнивать телефон и адрес, да ещё и пожертвовав при этом правильным написанием телефона. В первую очередь — это информация, которую нужно правильно донести до клиента, и только во вторую — элемент дизайна.
02Ссылкой почему-то являются и телефон, и е-мейл (одновременно!). При нажатии открывается форма отправки письма.

Ссылки должны быть подчёркнуты: иначе непонятно, что по ним можно кликнуть (исключение составляет только меню сайта).

Телефон не является ссылкой практически никогда.
03Пунктирные линии расположены не точно.
Кроме этого, не рекомендуется использовать в данном случае пунктир двух разных типов.
04Мы сразу же сталкиваемся с ошибками в оформлении текста:
после (495) должен быть пробел.
Телефон желательно писать так: (495) 933-51-10.
Вместо дефисов можно поставить пробелы.

Е-мейл можно дополнить значком конверта для наглядности.
05Графическая отрисовка логотипа выполнена на «2».

Причём это не дань формату JPG (в котором картинка может потерять качество, размазаться), потому что на сайте используется формат PNG, позволяющий передать отличное качество.

Убедитесь в этом: взгляните на второй вариант (для перерисовки была найдена фотография в интернете, с которой был взят логотип: стало на «4»).
06Битые текст, стрелки (ломаные, рваные края).
Не совсем удачно выбрано сочетание цветов.

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

Стрелки указывают именно на какой-то активный пункт доставки, т.е. доставка осуществляется, причём этот процесс идёт прямо сейчас, когда вы изучаете наш сайт.
07

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

Почему вокруг центрального баннера полоски разных цветов (оранжевая и белая)?

08Текст касается краёв баннера: это недопустимо (за исключением случаев, когда это делается специально для достижения нужного эффекта).

Компьютерные "кавычки" — это признак безграмотности: нужно либо “так”, либо «так».

Совет: не доверяйте дизайн и наполнение сайта только программистам.
09Несколько грубых ошибок и, плюс к этому, неумелая переделка в формат GIF (мало цветов, искажения).
Возникает ощущение, что мы находимся в далёком 1996 году.



Приведём пример диалога:

— Итак, ваш заказ
на 61 тысячу рублей...
— Отлично. Значит, вы соберёте
мебель бесплатно?
— ...и вам предоставляется скидочка
в размере 6100 рублей.
То есть с вас 54900!
Увы, для бесплатной сборки
этого недостаточно! :-)
Исправлено основное: текст теперь читаемый (не налезает на стрелку похожего цвета); использовано больше полезной площади картинки; добавлена текстура древесины, а не просто её цвет; округлена (с позволения заказчика, конечно) минимальная сумма заказа.

Из каких соображений выбрано именно 60 500 рублей?
Было бы понятно, если бы большинство товаров имело кратную стоимость (например, 20, 30, 60 тысяч рублей). В этом случае, для получения бесплатного бонуса нужно действительно купить больше товаров (купил на 60 — изволь купить ещё одну недешёвую вещь).
А когда стоимость товаров случайна (например, 1253, 2774 рубля), то 60 000 или 60 500 — разница не существенна.
А вот для запоминания клиентом — важна (и смотрится симпатичнее).

Осталось одно серьёзное замечание: каким образом скидка связана с бесплатной сборкой?
Лучше было бы, конечно, сделать два баннера.
Один относится к 10%-м скидкам (на что-то), а другой — к бесплатной сборке от...
10

Правильно так:

Тел.: (495) 933-54-10, 797-55-89, доб. 281
141420, Московская область, Химкинский р-н, г. Сходня, ул. Некрасова, 2

(разделяем телефоны и адрес; не забываем пробелы в нужных местах;
слово “район” сокращается как “р-н”)
11

Кровати (и некоторые другие предметы интерьера) по возможности не должны обрезаться или примыкать к краям картинки. Многие фотографии из новинок плохо кадрированы.

12
Таблицы на сайте не выровнены, информация расположена и оформлена не лучшим образом.

Элементы меню нельзя переносить на следующую строку, когда этого можно избежать.

Между пунктами меню должны быть отступы, достаточные
для хорошего визуального разделения.
13

Проблема дублирования решается так: отделяем эту группу, даём ей название, которое пишем один раз в заголовке (или сбоку).

Дефис (практически по всему сайту) нужно изменить на тире.

14Версия для печати так важна для интернет-магазина, чтобы её выделять заглавными красными буквами (что обычно считается дурным тоном)?

Лучше было бы сделать менее навязчиво и с характерной иконкой принтера.
15Выделение красной звёздочкой хорошо подходит для домашних страниц, а не для сайта серьёзной фабрики.
16Вам понятно, что изображение слева — это фотоаппарат? Поверьте, если не знать, что это такое, догадаешься не сразу.

Рядом с пиктограммами шкафов этот символ воспринимается как предмет из той же группы. Например, как тёмный комод с наведённой на него лупой.

Возможно, вместо фотоаппарата лучше изобразить мелкую пиктограмму изображения (одинаковую для всех товаров). А если изображать фотоаппарат, то лучше в другом ракурсе, чтобы чётко отделить его от шкафов.
17

Контакты — либо у микросхемы, либо между людьми.
Лучше написать «Контактная информация».

Оформление плохое, и дело не только в том, что нет картинок, разделителей и выделения цветом.

Предоставленную информацию нужно заново структурировать;
если не получится в рамках одной страницы — сделать на двух-трёх.

18
Телефон нельзя переносить на следующую строку.

На сайте sfbm.ru телефоны переносятся всегда, независимо от размеров окна браузера.

Также заметим, что если вы открываете 20 товаров на странице, то у вас 20 раз перенесётся телефон, и 20 раз повторится фраза с красной звёздочкой.

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

2. Двоеточия здесь не нужны, и пробелы между колонками получились слишком уж длинные.
20

Пунктирные края у таблицы лучше убрать.

Правую кавычку можно использовать в маленьком размере, в котором она становится похожа на две стрелочки.
Здесь же сразу видно, что это — кавычка, и она тут не к месту.

Где же ровное, красивое расположение информации? Края не стыкуются, элементы не выровнены.

Фотография плохого качества: в другом графическом формате (JPG, а не GIF), выглядело бы без корявых цветовых переходов (посмотрите на «тень» от стола).

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

21

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

Почему отсутствует артикул?
22Имеет ли право на существование вот эта волнистая линия (вдоль кнопочек)?

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

А в данном случае нужно подумать, зачем они вообще здесь нужны (если нам нужно указать, что по ссылке можно кликнуть, то нужно её просто подчеркнуть).
23Кнопку нужно называть согласно действию: «Проверить».

При загрузке страницы нужно помещать в это поле курсор, чтобы можно было сразу вводить номер счёта и нажимать «Enter».

Выводы и пути решения проблем

1Безобразное графическое оформление сайта: нестыковки линий, низкокачественная, искажённая графика и такие же шрифты.Для выравнивания потребуется знание HTML и CSS (чтобы подправить значения, управляющие разметкой).В некоторых местах можно обойтись только заменой картинок, изменением размера фотографий или заменой имеющихся фоновых изображений на белые.Низкокачественные изображения нужно заново перерисовать (сфотографировать) и заменить.
2Неудачное предоставление информации о товарах (мелко, хаотично). Таблицы сделаны неграмотно, сложны для восприятия.Вся текстовая информация перерабатывается и оформляется заново. Структуру таблиц без залезания в код исправить не удастся, но некоторые улучшения возможны (к примеру, подчеркнуть ссылки, увеличить размер шрифтов, выровнять стобцы в соответствии с информацией, убрать лишнее графическое оформление, кнопки (из п. 22) заменить на прозрачные пустышки и т. п.).
3Орфографических ошибок не отмечено, зато ошибок в оформлении текстовой информации — куча! Сокращения, телефоны, адреса, знаки препинания, отступы и т. д.Любой текст на сайте можно изменить, даже не имея никакого представления о программировании. Либо через систему администрирования, либо поиском нужного текста в файлах на сервере и заменой на правильный.
Для исправления отступов, неправильного переноса информации на следующую строку потребуются начальные понятия об HTML и CSS.
4Текст не отличается от ссылок, активные элементы не отличаются от пассивных (а если отличаются, то оформлено это очень плохо).Даже не добавляя соответствующих пиктограмм, ссылки можно оформить обычным текстом красиво, понятно и доступно. Некоторые ссылки нужно вообще убрать, а там, где необходимо, добавить новые.

Стили отображения текста, ссылок исправляются при помощи CSS. Статические ссылки можно установить, зная только HTML. А вот для добавления динамических ссылок потребуются навыки в PHP.
5Имеющиеся фотографии (не все) плохо откадрированы, не проведены цветокоррекция и ретушь.Фотографии для сайта должны быть где-то собраны в сыром виде.
Если они утеряны, то нужно подкорректировать имеющиеся и заново отснять не поддающиеся поправке.

Нужен специалист, имеющий навыки в фотографии, композиции и технической обработке в программе Photoshop.
6Страница не растягивается по горизонтали.
На современных мониторах шрифт на сайте выглядит слишком мелко.
В тех браузерах, которые позволяют менять размер шрифта принудительно, мы видим ужасную картину.
Там, где это необходимо, нужно сделать страницу растягивающейся (потребуются те же знания, что для пункта 1).

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

Справятся: технический дизайнер, верстальщик HTML+CSS.

Заметка была полезной? Поделитесь в соцсетях:

Ваш комментарий

comments powered by HyperComments

Следующая заметка

Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2006