Форма входа и регистрации с помощью HTML5 и CSS3

Автор оригинала: STÉPHANIE WALTER

  • Перевод
  • Tutorial

5504432b962c2b2e0125381fa7b7ff70.jpg Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target. Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации. В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1.

HTML

 

Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы. Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors). Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute, чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes.

CSS

Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!

Стилизуем формы, используя CSS3

Во-первых, давайте назначим нашим формам базовый стиль.

#subscribe, #login{     position: absolute;     top: 0px;     width: 88%;     padding: 18px 6% 60px 6%;     margin: 0 0 35px 0;     background: rgb(247, 247, 247);     border: 1px solid rgba(147, 184, 189,0.8);     box-shadow:         0pt 2px 5px rgba(105, 108, 109,  0.7),         0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;     border-radius: 5px; } #login{     z-index: 22; } 

Мы добавили две тени к элементу: одна — с целью создать внутреннее голубое свечение, а вторая — внешняя тень. Чуть позже я объясню вам z-index. Здесь мы назначим свойства для шапки:

/**** текст ****/ #wrapper h1{     font-size: 48px;     color: rgb(6, 106, 117);     padding: 2px 0 10px 0;     font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;     font-weight: bold;     text-align: center;     padding-bottom: 30px; }   /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{     background:     -webkit-repeating-linear-gradient(-45deg,         rgb(18, 83, 93) ,         rgb(18, 83, 93) 20px,         rgb(64, 111, 118) 20px,         rgb(64, 111, 118) 40px,         rgb(18, 83, 93) 40px);     -webkit-text-fill-color: transparent;     -webkit-background-clip: text; }   #wrapper h1:after{     content:' ';     display:block;     width:100%;     height:2px;     margin-top:10px;     background:         linear-gradient(left,             rgba(147,184,189,0) 0%,             rgba(147,184,189,0.8) 20%,             rgba(147,184,189,1) 53%,             rgba(147,184,189,0.8) 79%,             rgba(147,184,189,0) 100%); } 

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text, поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство. Мы также создали тонкую линию под заголовком с помощью элемента :after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля. Теперь давайте позаботимся о полях ввода и придадим им приятный вид.

/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder  {     color: rgb(190, 188, 188);     font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{     color: rgb(190, 188, 188);     font-style: italic; } input {   outline: none; } 

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства :active и :focus.

/* все поля исключают submit и checkbox */ #wrapper input:not([type="checkbox"]){     width: 92%;     margin-top: 4px;     padding: 10px 5px 10px 32px;     border: 1px solid rgb(178, 178, 178);     box-sizing : content-box;     border-radius: 3px;     box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;     transition: all 0.2s linear; } #wrapper input:not([type="checkbox"]):active, #wrapper input:not([type="checkbox"]):focus{     border: 1px solid rgba(91, 90, 90, 0.7);     background: rgba(238, 236, 240, 0.2);     box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; } 

Здесь мы использовали псевдо класс :not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства :focus и :active. Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы :before и :after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas. Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.

@font-face {     font-family: 'FontomasCustomRegular';     src: url('fonts/fontomas-webfont.eot');     src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),          url('fonts/fontomas-webfont.woff') format('woff'),          url('fonts/fontomas-webfont.ttf') format('truetype'),          url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');     font-weight: normal;     font-style: normal; }   /** магический трюк! **/ [data-icon]:after {     content: attr(data-icon);     font-family: 'FontomasCustomRegular';     color: rgb(106, 159, 171);     position: absolute;     left: 10px;     top: 35px;     width: 30px; } 

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon), чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку. Теперь назначим правила для кнопки отправки формы.

/*стилизуем обе кнопки*/ #wrapper p.button input{     width: 30%;     cursor: pointer;     background: rgb(61, 157, 179);     padding: 8px 5px;     font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;     color: #fff;     font-size: 24px;     border: 1px solid rgb(28, 108, 122);     margin-bottom: 10px;     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);     border-radius: 3px;     box-shadow:         0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,         0px 0px 0px 3px rgb(254, 254, 254),         0px 5px 3px 3px rgb(210, 210, 210);     transition: all 0.2s linear; } #wrapper p.button input:hover{     background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{     background: rgb(40, 137, 154);     position: relative;     top: 1px;     border: 1px solid rgb(12, 76, 87);     box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{     text-align: right;     margin: 5px 0; } 

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия. Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

/* стилизуем чекбокс "запомнить меня"*/ .keeplogin{     margin-top: -5px; } .keeplogin input, .keeplogin label{     display: inline-block;     font-size: 12px;     font-style: italic; } .keeplogin input#loginkeeping{     margin-right: 5px; } .keeplogin label{     width: 80%; } 

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

p.change_link{     position: absolute;     color: rgb(127, 124, 124);     left: 0px;     height: 20px;     width: 440px;     padding: 17px 30px 20px 30px;     font-size: 16px ;     text-align: right;     border-top: 1px solid rgb(219, 229, 232);     border-radius: 0 0  5px 5px;     background: rgb(225, 234, 235);     background: repeating-linear-gradient(-45deg,     rgb(247, 247, 247) ,     rgb(247, 247, 247) 15px,     rgb(225, 234, 235) 15px,     rgb(225, 234, 235) 30px,     rgb(247, 247, 247) 30px     ); } #wrapper p.change_link a {     display: inline-block;     font-weight: bold;     background: rgb(247, 248, 241);     padding: 2px 6px;     color: rgb(29, 162, 193);     margin-left: 10px;     text-decoration: none;     border-radius: 4px;     border: 1px solid rgb(203, 213, 214);     transition: all 0.4s  linear; } #wrapper p.change_link a:hover {     color: rgb(57, 191, 215);     background: rgb(247, 247, 247);     border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{     position: relative;     top: 1px; } 

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

Создаем анимацию

Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

#register{     z-index: 21;     opacity: 0; } 

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа. Теперь самое интересное: меняем формы местами, используя псевдо класс :target. Вам нужно понять одну вещь по поводу :target: для перемещения мы будем использовать якоря. Нормальное поведение якоря — прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{     z-index: 22;     animation-name: fadeInLeft;     animation-delay: .1s; } 

Вот, что происходит: когда мы кликаем на кнопку Присоединиться, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form. Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

.animate{     animation-duration: 0.5s;     animation-timing-function: ease;     animation-fill-mode: both; } @keyframes fadeInLeft {     0% {         opacity: 0;         transform: translateX(-20px);     }       100% {         opacity: 1;         transform: translateX(0);     } } 

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{     animation-name: fadeOutLeftBig; }   @keyframes fadeOutLeft {     0% {         opacity: 1;         transform: translateX(0);     }       100% {         opacity: 0;         transform: translateX(-20px);     } } 

Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс .animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file. Вот и все, друзья. Надеюсь вам понравился этот туториал!Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс :target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

Демо

  1. Слайд влево и затемнение
  2. Слайд влево
  3. Масштабирование

Посмотреть демо | Скачать исходные файлыP.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!

26.jpgРазработка личного кабинета пользователя для сайта — это будущий тренд в развитии CRM систем. Вероятно у вас уже есть пул постоянных клиентов, и вы задумываетесь об оптимизации обслуживания клиентов. Создание личного кабинета клиента в вашем бизнесе может помочь решить эту задачу.

В этой статье мы рассмотрим что такое клиентский сервис, что он дает бизнесу, каие задачи решает, из чего состоит. Также мы покажем наш вариант реализации подобного клиентского сервиса на примере Falcon Resort — кабинет туриста/гостя на курорте/отеле.  После прочтения статьи у вас будет полное понимание по процессу создания подобного решения для своего бизнеса.

Что такое клиентский сервис

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

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

Звучит неплохо, не правда ли? Т.е. по сути, это некий свой «угол» клиента в вашем «бизнес-доме». Личный кабинет клиента — его «угол» в вашем бизнесе.

Зачем это нужно бизнесу?

  • Это повышает лояльность клиента. Если у меня есть 4000 баллов в вашем бизнесе, пойду ли я к конкурентам (при прочих равных)? 
  • Это уменьшает издержки на обслуживание клиента.
  • Уменьшается человеческий фактор. Клиент сам выбирает и заказывает, а затем сам отслеживает заказ.
  • Не нужно держать большой колл центр для разъяснения банальных вопросов покупателей. Теперь они самостоятельно могут смотреть все в личном кабинете. 
  • Это дает постоянный контакт с покупателем. Email письма компаний отправляются в спам. Телемаркетинг только раздражает потребителя. Через личный кабинет вы неявно продвигаете доволнительные услуги и предложения.
  • Находясь на вашей «территории» клиент более благосклонно будет воспринимать любые предложения от вас. 
  • Уменьшить риски воровства и угона клиента. Если все проходит через систему, то гораздо сложнее недобросовестному сотруднику договориться с клиентом о работе в обход фирмы.
  • Также клиентский сервис позволяет частично решить потерю клиента, которого пытается переманить ваш бывший продавец. Клиент теперь не завязан чисто на личность вашего продавца, он взаимодействует с компанией через личный кабинет.
  • Для бизнеса клиентский сервис в виде кабинета делает клиента ближе и доступнее.

Зачем это нужно клиенту?

  • Это позволяет экономить. Персональные акции, накопительные скидки.
  • Это дает информацию. Человек может получить оперативно всю необходимую информацию по вашим услугам и объектам (например, если для банка — это информация о ближайших банкоматах). 
  • Это упрощает заказы. Клиент минимизирует издержки на своем взаимодействии с вами. Чем проще покупать — тем ниже шансы, что он сойдет с дистанции на пути заказа у вас.

Из чего состоит клиентский сервис

Все вертится вокруг заказов. Именно за этим пришел потребитель. Практически каждая часть клиентского сервиса так или иначе завязана на механизм заказов.

  • Оформление заказа

Клиент выбирает необходимые услуги и продукцию и создает заказ. Это может сопровождаться оплатой онлайн заказа. Также может быть интеграция с другими системами (например калькулятор транспортных систем).

  • История заказов и просмотр хода заказа

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

  • Баллы, бонусы, накопительная скидка

Каждый заказ — это новые баллы в копилке клиента. Баллы можно обменять на продукцию (а это увеличение среднего чека и повторных покупок). Баллы могут давать некий статус в системе, что увеличивает лояльность клиента.

  • Специальные предложения

Если вы действительно можете делать хорошие спец предложения, то для клиента это будет еще одним поводом пользоваться личным кабинетом. При этом вы можете создавать некие клубы (как Ikea Family), для которых будет действовать специальные скидки. Это глубже втягивает клиента в вашу экосистему. По сути, клубы могут сегментировать вашу аудиторию (молодые мамы, семейные, пенсионеры и т.д.) и направлять на них специальный контент и предложения. 

  • Уведомления

Дорога к обеду ложка. Важно вовремя уведомлять человека о важных для него событиях. «Ваш заказ готов», «Заказ доставлен по такому-то адресу», «Появилось свободное место к мастеру» и т.д. Уведомления могут быть пуш или отправляться в мессенджер. Более старомодный вариант — на почту или СМС. В вашей системе реализованы пуш уведомления и Телеграм, email, СМС.  

  • Информация

Клиент должен по максимуму знать о вашем бизнесе и его услугах. Наверняка у вас бывало так, что вы приезжаете на курорт, и только на 6 день узнаете, что здесь оказывается чуть подальше есть бесплатный теннисный корт. Личный кабинет решал бы эту проблему. Человек по приезду мог бы сразу посмотреть всю информацию — что предлагает отель, что есть поблизости, что сколько стоит. 

  • Очень важна оперативная связь и контакт с клиентом

Для человека важно иметь возможность быстро задать вопрос, получить информацию и двигаться дальше. Телефон для обратной связи — плохой вариант. Почему? Нужна оперативность ответа. Если клиенту не отвечают хотя бы 30 секунд, то это уже негатив.

Если же на сайте будет возможность написать в чат менеджеру, то клиент напишет и пойдет по своим делам. Ожидание ответа по чату у нас инстинктивно может быть больше. Если ответите сразу — очень хорошо. Если в течение часа — тоже неплохо.

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

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

Наше демо клиентского сервиса на примере курорта

Представьте ситуацию, вы приезжаете на курорт. На рецепции говорят на английском, а у вас с этим не очень. Вам что-то говорят на ломаном русском и поясняют что дальше делать. Вы понимаете 20% из сказанного, и как и что-то заполняете, находясь в состоянии глубокого транса.

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

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

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

Вы можете посмотреть какие есть экскурсии и мероприятия, а также забронировать участие в них.

Хочется заказать в номер шампанское? Идет в раздел услуги и смотрим что есть:

Более того вы можете узнать, что входит в бесплатное обслуживание, а за что надо будет доплатить (лучше знать это заранее, чтобы потом не было конфуза). Есть свободная минутка, чтобы посмотреть информацию об отеле и что находится вокруг? Конечно есть. Телефон у человека с собой практически всегда на курорте (у некоторых даже в море).

Вы видите какие есть активности есть на курорте (обсуждения, переписки). Также вы можете напрямую пообщаться с кем-то из посетилей курорта.

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

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

Что входит в решение

Ключевые части решения Falcon Resort, которое мы предлагаем: 

  • сама коробка Falcon Space. Falcon space — это скорее платформа для создания бизнес-приложений, а не конкретное решение под бизнес задачу.
  • решение аукциона. Это надстройка базовых функций аукциона с возможностью развивать под свои нужды. Решение можно дальше развивать и адаптировать под себя.
  • настроенный хостинг (или сервер VPS), домен, SSL. Мы можем настроить приложение на вашем сервере Windows Server, либо разместить на хостинге Re.ru (тариф win 0 — этого более чем достаточно). 

Относительно быстро можно запустить базовую часть системы, а затем постепенно ее развивать и адаптировать под свои нужды. Решение можно менять и адаптировать под себя

Точки расширения

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

Любое решение на Falcon Space содержит несколько точек расширения: 

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

Сколько может стоить мой проект?

Базовая стоимость решения Falcon Resort указана на странице Решения. Очень вероятно, что вам потребуется кастомизация под себя и создание новых модулей для вашей специфики. В этом случае необходимо делать проект по доводке решения под ваши реалии.

Что можно сделать чтобы получить первичную оценку подобного проекта?

Определить структуру всех страниц (разделить на кабинеты/роли и для каждой прописать список страниц). Можно отталкиваться от нашего базового решения. Для каждой страницы определить кратко возможности. Прописать все необходимые интеграции с внешними системами. Подобный документ уже позволит вам получить более менее точную оценку (с разбросом в +/-15%) по бюджету и срокам.

Что еще необходимо учесть в своем проекте

  • Дизайн

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

  • Объем

Чем меньше 1 версия для внедрения — тем меньше бюджет, быстрее будет реализован проект и тем быстрее вы получите обратную связь от потребителя. Старайтесь убрать все второстепенное из первой версии своего продукта. Далее все это можно будет развивать на основе обратной связи от пользователей.

99% пользователей будут использовать смартфон

Если говорить о нативных мобильных приложениях (те, что устанавливаются через AppStore и Google Play) — мы их не делаем. Наша платформа полностью адаптивна под мобильные устройства. Также Falcon Space поддерживает технологию PWA. Это практически стирает разницу между мобильным приложением и веб-сайтом:

  • можно создать иконку на экране телефона и запускать его как приложение;
  • есть функции геолокации, доступ к камере и некоторые другие функции.

Преимущества PWA:

Это значительно дешевле, чем делать по сути 3 приложения: веб сайт, IOS и Android. Бюджет сокращается в разы.

  • быстрее можно вносить изменения. В нативном приложении для обновления необходимо, чтобы пользователь переустановил приложение на своем телефоне. На PWA изменения будут мгновенно применяться у всех пользователей, т.к. данные запрашиваются с сервера.
  • нет ненужной прокладки в виде AppStore. Долгая модерация, возможность отказа в публикации. PWA проще себе установить на телефон.
  • просто клик на кнопке (на IOS чуть сложнее — Share/Add to my homescreen).
  • сложно заставить пользователя себе что-то ставить на телефон. По соображениям безопасности, занимаемого места на телефоне.

То, что вашему туристу не нужно ставить мобильное приложение на телефон — скорее плюс, чем минус, т.к. никому не хочется засорять свой телефон временным приложением (которое он планирует использовать только 2 недели). Пора приступить к демо.

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

Упомянутый сервис

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

Red Login Form

Необычность этой формы заключается в круглой кнопке.ДемоСкачать

Log in/Sign up screen animation

ДемоСкачать

Login Form on HTML5

Форма авторизации в виде стопки листов бумаги.ДемоСкачать

Material Compact Login Animation

ДемоСкачать

Sign In

ДемоСкачать

Interactive Sign Up Form

Пошаговая форма регистрации. Хорошо смотрится с анимацией переходов.ДемоСкачать

Fancy Forms

ДемоСкачать

LogIn Form

ДемоСкачать

DailyUI Challenge 001

Красивая фора с полупрозрачным фоном.ДемоСкачать

Sign Up Form UI

ДемоСкачать

Login Form — Modal

ДемоСкачать

Log In Form CSS 2017

ДемоСкачать

Sign In/Up Form Transitions

ДемоСкачать

Authorization badge

ДемоСкачать

Apple Login Form

ДемоСкачать

А какая форма понравилась вам?

Используемые источники:

  • https://habr.com/ru/post/140816/
  • https://startpack.ru/articles/20200525-kak-sdelat-klientskiy-servis-v-vide-lichnogo-kabineta-klienta
  • https://codyshop.ru/kollektsiya-iz-15-krasivyih-form-registratsii-i-avtorizatsii/

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116