Всем привет. Все мы, пользователи плагина WP Recall, желаем ему процветания и развития. Однако, время не стоит на месте. Меняется всё: привычки пользователей сети, представления об удобстве и ожидания. Многое, что было популярно 5-10 лет назад, сегодня безнадёжно устарело. Чтобы не отставать от времени и потребностей пользователей WP Recall должен тоже меняться, подстраиваясь под ветры перемен.
У меня появилось немного свободного времени, чтобы нарисовать макет. Сегодня хочу представить на ваш суд новую концепцию дизайна личного кабинета. Этой статьёй я ни в коем случае не хочу критиковать имеющиеся дизайны. Просто, я размышляю на тему "как могло бы быть". Не смущайтесь, если вы увидите мотивы из дизайна других социальных сетей. Если эта тема вам не безразлична, добро пожаловать!
Описание концепта
Несколько месяцев назад вопрос о идеальном личном кабинете уже поднимался. Пользователи в комментариях отправляли несколько хороших вариантов. Кому интересно, можете заглянуть в тему.
Перед началом я определил цели:
- Дизайн должен быть лёгким и "воздушным" 🙂
- Использовать текущий иконочный шрифт (в случае чего, чтобы программинг был наиболее простым и имел совместимость с другими дополнениями).
Так что же на мой взгляд можно было бы улучшить?
- Обложка. А нужна ли она вообще? Когда я думал над этим вопросом, то не смог найти достаточно веские аргументы. Красивое оформление. Вот собственно и всё? И этот аргумент достаточно спорный. Обложка занимает много пространства и не несёт какого-то практического смысла. Кроме того, если личный кабинет используется не на развлекательных сайтах, а например, для сбора показаний счётчиков на сайте управляющей компании, все "красивости" просто лишние. Именно поэтому в новом концепте я убрал обложку.
- Лёгкость. В новом дизайне хотелось передать лёгкость и простоту. Именно поэтому были использованы светлые тона и достаточно большие пространства между логическими блоками: карточка пользователя (в самом верху), элементы ленты постов, блок переключателя на другие типы контента (фото, видео, музыка, товары, услуги, список можно продолжить), блок чата.
- А где интерактив? Идея следующая. Видите 3 точки? Это менюшка. Там где аватарка, а также в правом углу элементов ленты. Пользователь наведёт на них, появится список возможностей. Например, под аватаркой можно сделать пункты: изменить аватар, информация о пользователе, в чёрный список, сделать перевод. Я не стал тратить время на это, так как не знаю, понравится вам ли новый концепт.
- Карточка пользователя. Здесь размещаются данные о пользователе. И, внимание! Новый блок - блок услуг пользователя.
- Пару слов про меню и блок чата. Эти блоки по замыслу - липкие. То есть, при скроллинге они следуют за пользователем.
- Первая и главная вкладка - лента пользователя (не настройки профиля). Хотя здесь всё зависит от задач личного кабинета.
Это основные моменты. Чтобы посмотреть мекет во всей красе, откройте его в новой вкладке в 100% размере. В стандартной галерее поста он немного мутноватый.
Если вам понравится, возможно этот концепт я постараюсь развить и позже показать, как могли бы выглядеть другие вкладки кабинета. На этом, пожалуй, всё. Спасибо за внимание. Пишите комментарии.
Автор публикации
Ну этот дизайн отлично подойдет для какой-нибудь социальной сети, но будет ли он хорошо вписываться в другие тематики?
Ведь на большинстве сайтов ЛК выводится после верхнего, основного меню самого сайта, а так же на многих сайтах есть сайдбар - как бы в таком случае это выглядело?
С личным кабинетом, дело обстоит, наверно, как с форумом: использовать страницу без сайдбара.
Может рассмотреть возможность админу "собирать" кабинет? Включать и отключать блоки в зависимости от направленности сайта. Сам вид макета хорош, но он реально социальный, если отключить, что-то, то будет ок и для масс так сказать. Чем больше шаблонов, тем лучше!!
Мне данная концепция нравится, выглядит приятно, дает возможность по новому взглянуть на личный кабинет, прикинуть возможность появления новых зон внутри ЛК, но надо всегда предвидеть возможное переполнение элементов внутри такой зоны. Допустим, зона со счетчиками: подписки, подписчики и тд, а если их будет не 4, а 6 как поведет себя шаблон? Такие вопросы придется задавать себе постоянно.
Но повторю, сам шаблон мне нравится, если получится в результате его обсуждения получить какой то конечный продукт, то буду только рад. Могу предположить, что в следующей версии плагина будут поддерживаться дополнительные зоны ЛК, которые были предложены в этом шаблоне.
Да, я тоже думал на счёт переполнения. В этом случае, логично сужать области до определённого количества. Например, в зоне счётчиков заложить 5-6 блоков. При большем количестве выводить кнопку-стрелку, как на стартовой странице Яндекса, раздел "Афиша".
Я вообще последнее время приверженец минимализма, так как вектор сместился в мобильные приблуды и сайты в принципе уже должны просто летать. И данная концепция удачна в этом плане. Так как можно сделать, как оно и должно быть, центром именно стену, а все остальное легко и без потерь вырубить в мобиле. Надо может подумать, что акцентировать и вокруг этого уже навешать для компа. Я просто рассматривая сейчас все, что можно сделать легче и делаю собственно))
Судя по данным WordPress, Recall имеет около 4000 установок. Интересно узнать, кто как его использует: соцсеть, просто сбор данных клиентов компанией (сбор показаний счётчиков например), или что-то другое. Это хоть поможет как-то портрет пользователя нарисовать. А так, пока не понятно, кто конечный пользователь. Дизайн получается наугад 🙁 Или чисто по внутренним ощущениям.
Да кто во что горазд... Плагин в принципе под чего угодно можно определить, в большей степени уверен что ближе в сторону сайтов продажников/магазинов/фриланса. Но большая часть на сайтах висят с телефонов - вот в эту сторону и нужно смотреть.
На вид шаблон норм. мне понравился!
Красиво, но мне кажется он не для всех подойдет. Потому что большинство сайтов с белым фоном или еще каким нибудь другим.
Мне похожий дизайн делали тоже с таким же серым фоном и блоки были белые так же с отступами, было красиво, но мне не подходил потому что сам серый фон для сайта не подходил и пришлось убрать.
Это красиво если сайт с серым фоном таким же. Мое мнение.
К примеру вот как этот сайт, под этот сайт красиво впишется. Тут и блоки такие же с отступами прям для такого дизайна в самый раз.
Внимательно читаю обсуждение и слежу за происходящим вокруг нового предложения, поскольку ЛК на сайте для меня является приоритетным.
Моя тематика - литература, где, как нигде, важен и нужен высокий уровень социализации. Общение творческих людей, участие в конкурсах и играх, продажа книг - всё это трудно представить без присутствия пользователя лично на ресурсе, и, соответственно, без личного кабинета.
Поэтому мои соображения прошу рассматривать не как ложку дёгтя, а как искреннее желание помочь сделать интересный, новый и востребованный продукт. Чем больше мнений - хороших и разных - тем лучше можно реализовать это предложение для массового пользователя, не так ли?
Итак, нюансы, которые вызывают некоторое сомнение в их целесообразности:
1. Отсутствие фоновой картинки.
Во-первых, чисто зрительно и по личным ощущениям, она придаёт уверенность и незыблемость кабинету в целом. Это настолько привычный элемент, что без него чувствуешь себя голым и каким-то обделённым.
Во-вторых, это один из немногих элементов ЛК, где пользователь может проявить творческий подход: где ещё он может реализовать себя, кроме аватара?
2. Актуализация информационных блоков посередине ЛК: подписчики-подписки-рейтинг-баланс.
Для чего их выпячивать и укрупнять? Что даёт эта информация хозяину кабинета и/или пользователям, чтобы бить ею по глазам? Как часто она востребована? Я вообще не обращаю внимания на эти позиции, за исключением, пожалуй, баланса. Но, существующее решение - вынести его отдельной иконкой в Реколл-бар - считаю оптимальным.
3. Вынесение услуг на видимое место (рекламный блок справа вверху), тоже считаю несколько спорным: у меня сразу возникает ощущение, что мне пытаются здесь что-то "втюхать", особенно услуги "психиатОра".
4. Главное, пожалуй, замечание, что этот концепт очень похож на личную страницу... ВКонтакте, с той только разницей, что в нем всё запутанно так же, как и на Фейсбуке, интерфейс которого не понимаю и не принимаю, поэтому на него захожу по крайней нужде: как правило, по большой 😆
Вполне возможно, что это первое впечатление, и, поюзав, как следует, можно во всём разобраться, но - не будем забывать, что лучшее - это враг хорошего.
Буду и дальше с воодушевлением следить за развитием событий.
Спасибо Вам Ян, за то, что развиваете один из основных элементов социализации на сайте!
Жаль что вы в той теме (ссылку вначале что дали) за этот год не написали свои идеи.
Спасибо что подняли еще раз тему - надо шевелить тех, кто использует плагин.
Идеальный ЛК чтоб построить - надо брать и делать и отдавать как есть. Потом по живому уже смотреть и ловить обратную связь. Мы сделали 2 стандартных ЛК. + в моем портфолио еще 3 темы (и pro версия) и по опыту - нет фидбека. А это что значит? Или всё идеально или нет фидбека. Хотя лет, от внедрения в реколл понятия "шаблоны ЛК" прошло много (кто с нами давно - помнит что раньше просто css отдавали - и это были тоже шаблоны 🙂 )
Для себя и 17-й версии я вынес несколько идей - но все они призваны улучшить 2-ве стандартные темы: sunshine и grace. Они великолепны - но несколько настроек им добавить надо. + причесать и освежить. Думаю мое правило "6px" там внедрю. Пока это тестируется на шаблоне дополнения групп.
Почему считаю дефолтные темы хорошими?
1. потому что они работают.
2. меню горизонтальное и вертикальное;
3. вкладки при переполнении складываются в мобильное меню;
4. зона правого сайдбара в саншайн - вообще идеально для широких макетов;
Ну освежить верстку и несколько настроек через кастомайзер внедрить - это надо будет сделать.
Мобильный ЛК не занимает много места. Но у меня есть идея как его еще уменьшить. Сейчас работаю над темой для групп - там я подобный прием сделал.
По вашему макету пройдемся:
отключаем всё стороннее. Стены нету, справа слайдер услуг - нету. Контактов еще нет
Теперь все чисто: https://yadi.sk/i/QtnW6zzadcDLOw
но люди не любят давать информацию о себе: https://yadi.sk/i/HzPakMe7HMN8JA и много белого и "воздуха".
А вот теперь посмотрите на ЛК с обложкой (мой профиль на этом сайте например) - там белого нет, есть брендированная обложка или если юзер сам поставит - уже индивидуальность. Так что я за наличие обложки (а может серия из 4-х фото например?). Но админу опцией её давать отключать/включать надо - вы правильно написали - не всегда в ЛК и проекте она нужна. Но мы то отдаем плагин в массы - а значит должны удовлетворять все потребности.
Ну и если посмотреть второй скриншот и представить что представленный макет имеет возможность включить обложку - то он похож на 2 дефолтных ЛК из плагина.
Но вы не показали мобильный макет ЛК - это интересно тоже и в 60% важней широкого экрана.
Мое мнение таково - выше головы не прыгнешь и увы идеальный ЛК для всех не будет.
Какой выход вижу я и над чем работаю не спеша - ЛК интегрированный в какую либо ВП тему. Там можно поработать и над реколлбаром (да, как ни крути - это тоже элемент ЛК и важный. Думаю он разовьется в 17-й версии. Реколлбару тоже нужен кастомайзер и опции).
В таком ЛК в ВП теме можно дать людям не только обложку ЛК, но и задний фон (бекграунд как в одноклассниках) и контролировать вывод некоторых аддонов в нужных местах если такие допы включены (возраст, город...). Для этого области ЛК не нужны. Все сейчас на js вставляется куда нужно. И это работает. Знаешь селектор - что куда перенести и вот оно в нужном месте. Визуально это не заметно - т.е. оно просто появилось как будто там и должно (мой доп дней рождений https://yadi.sk/i/axpwte7W0Bib3Q ). Усложнять ЛК новыми зонами - я считаю что это боль для нас - разработчиков ядра. т.к. мы это предложили и значит все разрывы шаблонов нам поддерживать (ага а еще и на мобильных попробуй скомпонуй эти области).
Давайте поработаем над существующими 2-мя ЛК. Говорите что нужно: кастомайзер - чтоб видно сразу что делаешь и круглая ава/квадратная, обложка/нет обложки. Что еще? Темы несколько раз поднимались - мы это все еще прочитаем и переосмыслим к выходу 17-й версии поработаем. Я бы и внутрь личного чата загрузку картинки сделал бы. Мелочь - а индивидуальности добавляет. Это тоже элемент ЛК. А вдруг кому-то нужен ночной режим? Если бы это было в ядре переключение пользователем - то многие допы подтянули эту фишку - чтобы ночью глаза не ломать ярким белым.
Но без поддержки и фидбека - "Вау - это надо" идеи так и останутся на уровне идей. И отдадутся на изыскания сторонних разработчиков. Нам просто так время потратить всегда есть куда и на что. Но вдруг какая идея действительно улучшит жизнь многим пользователям? Тогда мы постараемся это внедрить. Но опять же - давите что это надо!
извините что много букв))
Лайки это хорошо - но диалог - еще лучше. Кто за пост голосовал и не высказался - гоу в комментарии. Ну и мне лойсы кто поставил - тоже давайте слово скажите.
Устроили молчанку 🙂
У меня пожелания примерно такие:
1) Обложка ЛК на одном сайте мне вроде как точно нужна, т.к. сайт соц. направленности и без её кабинет будет действительно каким-то пустым. Хотелось бы, чтоб обложка была как можно уже (без лишних пространств сверху и низу - на уровне с размером аватара) - в общем чтоб на видном месте умещались блоки, сверху: Логин - либо Имена и Фамилии, Возраст, Титул и Статус. Далее посередине (только для авторизированных): Подписаться, Сделать подарок, Достижения и Черный список, а уже в самом низу обложки располагался ряд с блоками (зона со счетчиками) Рейтинг, Подписчики, Подарки и Достижения. Остальная информация (контакты и т.д.) скрывается настройками приватности и выводится в отдельном блоке по клику (вообще неважно каком - всплывающем или каком-то другом), только зарегистрированным пользователям.
2) Аватар слева (квадратный или круглый - без разницы, но высота примерно на уровне с высотой обложки) - вывод прямо на обложке, а не где-то под ней.
3) Меню вертикальное - можно оставить на виду только иконки, а при наведении чтоб выезжали сами кнопки с надписями. Хотя меня и стандартное (горизонтальное и вертикальное - складываются в мобильное) меню - устраивает сполна!
4) Зона правого сайдбара ЛК - у меня используется для рекламы от пользователей, у других может быть для именинников, доски почета или чего-то другого.
5) Также можно добавить возможность выбора и установки в кабинете (только из предложенных сайтом) заднего фона - светлый, темный, женский, мужской и т.п.
Для второго сайта нужно примерно всё то же самое (вывод информации о пользователе там минимальный), но обложка ЛК там уже вовсе не обязательна - просто ни к чему.
В принципе это вк. Есть пара ньюансов:
как это будет выглядеть на телефоне?
слишком нагроможденное информацией рабочее пространство может запутать пользователей (на мой взгляд)
Нужна ли для этого лк своя собственная полноэкранная тема?
и как будет выглядеть другой пользователь?
В свое время тоже задавался целью сделать что-то подобное, но в итоге решил не заморачиватья, так как есть вк, а он явно мощнее.
И я бы поменял 2 сайдбара местами: лента, фото, видео и т д на место моя страница, баланс и т д, так как это менее востребованные функции, чем социальные. но и кроить эти сайдбары по кнопкам придется неслабо, чтобы ненужные функции не мозолили глаза
Не подумай, что критика, а, как обычно, мысли вслух, идеи и т д)))
Добрый день.
Подскажите, пожалуйста, Вы в итоге его реализовали?
Нет, это так и осталось только на картинке.