Блог за UX и ползваемост » формуляри http://www.lucrat.net/blog Трудно ли е да е лесно Wed, 18 Jan 2012 13:08:02 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Регистрация в сайта на БТК http://www.lucrat.net/blog/advice/btc_register/ http://www.lucrat.net/blog/advice/btc_register/#comments Fri, 26 Jun 2009 05:09:06 +0000 Димитър Симов http://www.e-lesno.com/blog/btc_register/ БТК спират да издават хартиени справки и фактури след 1 юли 2009 година. Отличен ход! Смело и отговорно решение. Поздравления за БТК!

Научих това от дипляна, пристигнала в писмото с последната ми „детайлизирана справка на хартиен носител“. Дипляната казва още да се регистрирам онлайн на www.btc.bg, за да следя сметката си за телефон. Ето и точните думи от дипляната:

Регистрирай се
онлайн на www.btc.bg в секция Моят портал, където можеш да проверяваш сметката си от БТК, както и Детайлизираната справка към нея.

Направих го.
По пътя срещнах доста препъни-камъни – неща, привидно дребни, които пречат на нормалното и удбоно взаимодействие.

Опитайте. Последвайте съвета от дипляната. Какви проблеми забелязвате? Споделете с коментари. Моят отговор, другата седмица.

]]> http://www.lucrat.net/blog/advice/btc_register/feed/ 1 Запиши се за дни на Майкрософт, де http://www.lucrat.net/blog/advice/microsoft_dni_2007/ http://www.lucrat.net/blog/advice/microsoft_dni_2007/#comments Mon, 23 Apr 2007 07:53:19 +0000 Димитър Симов http://www.e-lesno.com/blog/microsoft_dni_2007/ Скоро е едно от най-големите софтуерни събития в България, организирано от една от най-големите софтуерни фирми – Дни на Майкрософт 2007. Искам да се запиша, защото една от сесиите е на тема ползваемост. Това си е велико явление за България. Опитах. Опитах втори път. Опитах пак. Вече ми иде да тръшна, затова си изливам мъката тук. Като свърша, ще опитам пак. Ще се примиря, защото робувам на интереса си.

И друг път съм казвал, че Майкрософт проявяват неуважение към потребителите. Формулярът им за регистрация е връх на сладоледа. Готов съм да се обзаложа, че не е тестван за попълване с нито един човек. Има много кусури, все едно че го е правил човек, който за пръв път в живота си прави формуляр.

Снимка: Формулярът за регистрация
MS-days-registration-form.png
Полетата са наредени хаотично. Мислено е за базата, не за потребителите. Няколко бързи забележки:

  • Имената са разделени в три полета
  • Името на фирмата е след длъжността.
  • Полета за парола и работен статус се намърдват между полетата за адресна информация.
  • Задължителните полета не се знае кои са.

Никой не е разсъждавал за потребителите, мислено е за интегритет, а не за поток на взаимодействието. Първо ще попълня нещата, ще натисна Изпрати и тогава ще разбера дали нещо съм сбъркал – подход за взаимодействие с потребителите от преди около 1000 години – вижте Уеб форми и ползваемост в този блог.

Указанията за попълване на полетата са неясни. Наример за телефон се казва Правилното изписване на телефоннен номер е (код)тел.номер, не повече от 12 цифри, без разстояние между цифрите!

Първо, глупаво е да има ограничение при въвеждане на телефонни номера. Защо е? Може би Майкрософт са направили автоматична система, която ще прозвънява всички записали се!

Второ, неестествено е телефонният ми номер +359(2) 960 6912 да се изпише слято 0035929606912 или (003592)9606912- много трудно се разчита.

Трето, указанието е неясно. Дали да се пишат нулите в кода или не. Не става ясно. Пробваш като малоумен докато улучиш. Аз лично пробвах десетина пъти, докато накрая улучих – кодът се изписва с нула. Правилното изписване на номера ми според формуляра е (02)9606912. Тук Майкрософт престъпват собствените си правила. Според Наръчника на Майкрософт по стил (Microsoft Manual of Style for Technical Publications) телефонните номера се записват във формат (206) 882-8080.

Четвърто, указанието е заповедно – завършва с удивителна. Един вид, писнало им е да обясняват как се вкарва телефонен номер.

Пето, на указанието му липсва основния компонент – пример. Вместо да пишат всички тези 18 думи, за които дори не им е стигнало мястото, та е трябвало да съкращават думата телефонен, трябваше да покажат.

Шесто, когато номерът ми изписан като (2)9606912 не бива разпознат – след като натисна Изпрати, получавам съобщение в горната част на екрана, далеко от номера, в червен цвят, Правилното изписване на домашен телефон е (код) тел.номер, не повече от 12 цифри. Ако се вгледате във формуляра, ще видите, че поле домашен номер няма.

След всяко натискане на Изпрати, ако има грешка, паролата в полетата се изтрива. Защо ли ти е парола изобщо! Освен това са сложени полу-свирепи изисквания за парола Дължина на паролата от 4 до 15 символа, малки и големи латински букви или цифри! (И отново указанието завършва с удивителна.) Леле-мале. Отново не е мислено за ползването и удобството. В стремежа да се търси сигурност и защитеност е пренебрегната простата действителност – хората се регистрират в сайта, само защото за Майкрософт е по-удобно така. Потребителите нямат нужда от безопасен канал, за да гледат програмата на събитието, нито имат нужда от парола за да дадат даните за издаване на фактура.

А защо сайтът не ме помни от миналата година? Тогава правих същите неща, в почти същия формуляр.

Работният статус е особено неудачно разположен. Няма нищо общо нито с паролата, която го предхожда, нито с телефонните номера, които го следват. Освен това:

  • Дава ограничен брой възможности – как да кажа че съм студент и работя!
  • Прави разлика между работещ и на свободна практика. Хайде сега, всички знаем, че тези на свободна практика само си клатят краката, ама чак така да ги противопоставяме на работещите не бива.
  • Има и интересна дума ‘безработен(а)’. Сигурен съм, че са искали да напишат ‘безработен(на)’.

Вместо падащ списък тук е по-подходящо да се използват кутийки с отметки – да се позволи на хората да изберат няколко неща.

Да не сбърка някой да сложи кавички в полето за адреса. След натискане на Изпрати, формулярът плаче – За адреса използвайте само букви и арабски или латински цифри. Много интересно ограничение. Свързано е сигурно нещо с базата и сикуъла (SQL), но не съм достатъчно светнат, за да предскажа. Тука няма дори указателен текст – разчита се само на проби и грешки на потребителите.

Обърнете внимание на карето Профил. Там са изредени шест кутийки за отметки (чекбоксове, айде) с по една-две думи след всяка. Текстовете са връзки. Забележете, всички връзки водят на едно и също място и това място е програмата на събитието. Тука отново имаме един чувал глупости:

Първо, основно правило е да не се използва чекбокс, когато трябва да се използва радио бутон. При наличието на чекбоксове човек си мисли, че може да избере няколко профила, като така каже, че го интересуват всичките, които е избрал. Да, ама не. Може да се избере само един. Няма да коментирам повече.

Второ, като цъкне човек някоя от връзките отива на друга страница, сиреч, загубва контекста на текущата. Трябва да се върне с копчето Back на браузъра си във формуляра за регистрация. Ако обаче е попълнил данни, някои от данните (например име) си стоят, а други (например парола) се губят. Не съм проверявал всички полета. Ако на някой му се занимава, да пробва.

Трето, карето е цопнато в средата на формуляра. Много се напънах да разбера защо точно там и се сетих. Там са му намерили място разработчиците. Имали са нужда някъде да го сложат.

Сигурен съм, че има и още. Ето сега забелязвам, че в отметките в дъното на формуляра се използва формата „Бих желал(а)“. Вместо да се опитват да звучат любезно, трябваше просто да напишат „Искам“ – хем е по-кратко, хем е по-ясно, хем няма нужда да се представя в мъжки и женски род.

Вече се изморих и омекнах. Чудя се, аз ли съм толкова крив, че все намирам кусури!

]]> http://www.lucrat.net/blog/advice/microsoft_dni_2007/feed/ 0 Уеб форми и ползваемост http://www.lucrat.net/blog/advice/forms_and_usability/ http://www.lucrat.net/blog/advice/forms_and_usability/#comments Wed, 31 Jan 2007 15:00:24 +0000 Alexo56 http://www.e-lesno.com/blog/forms_and_usability/ Електронните формуляри са вече толкова популярни и масови, че се налага почти всеки ден да се регистрираме за какво ли не. В повечето случаи регистрациите са задължителни и досадни, никой не ги харесва, губят много време и са неудобни за ползване.

]]> Електронните формуляри са вече толкова популярни и масови, че се налага почти всеки ден да се регистрираме за какво ли не. В повечето случаи регистрациите са задължителни и досадни, никой не ги харесва, губят много време и са неудобни за ползване.

Наскоро попълвах уеб формуляр, който се оказа истинско предизвикателство. Направих пет опита и загубих около 15 минути докато успея да стигна до „Вашата регистрация премина успешно”.

Често срещани проблеми

Изборът на потребителско име бе най-досаден. При два от петте опита, името което избирах не беше свободно и вероятно щях да направя още 10-ина опита, ако не се спрях на име от типа „Alex123456” само и само системата да не ме върне отново. На третия опит „грешката” беше че съм въвел парола, която трябва да е минимум 8 знака и да съдържа и ГЛАВНИ букви.

След като попълних всичко за сетен път, в бързината натиснах бутон „изчисти”, вместо бутон „изпрати” поради простата причина, че са един до друг и страшно много си приличат. Чак след последния опит разбрах, че „година на раждане” е задължителна и няма как да не въведа и нея.

При всеки опит формулярът беше празен и се налагаше да въвеждам всичко отначало. Нито едно поле не бе маркирано като задължително, попълвах по два пъти една и съща информация (повторете паролата, повторете e-пощата), избирах ненужна информация като град София, област Софийска и какво ли още не…

Хитри решения за ползваеми форми

Наскоро попаднах на друга регистрация, която попълних от първият път и ми отне по-малко от минутка. Хората които са работили над сайта бяха решили да не губят времето на потребителите си в безсмислени и многократни опити да станат техни клиенти…

Ето пример за електронен формуляр, който не губи време поради това, че не допуска потребителят да сгреши при въвеждане на нужната информация. Формулярът е интерактивен – пробвайте да го попълните.

[include file=/content/other/test.php]

Задължителни полета *

Няма по-неползваем формуляр от този, в който не знаеш кое е задължително и кое не. В примеа по-горе ще забележите различна подредба от масовите формуляри из интернет. Тук задължителните полета са изнесени най-горе и са маркирани според стандарта със звезда (*). Незадължителните полета оставяме на втори план.

Употреба на етикети

Добавянето на етикети към елементите не е трудно и същевременно е доста полезно, защото правят някои елементи по-лесни за цъкане. В следващия пример са показани две възможности за избор. Обърнете внимание, че текста: “ИЗБОР1″ е цъкаем и активира чавката, за разлика от другия пример където цък върху: текста на “ИЗБОР2″ не върши никаква работа:

Пример 1 – етикети


ИЗБОР2:
 Избор 2:

 

HTML

Етикет

 

CSS

label {cursor: pointer;}

Употреба на алтернативен текст

Понякога може да ни се наложи да добавим допълнително описание към елементите от формуляра. В примера при посочване на поле с мишката се появява описателен алтернативен текст. Текстът може да се сложи както върху името на полето така и върху самото поле. В примера, един и същ описателен текст е сложен и за името и за кутийката на полето Телефон, а за полето Коментари, описателен текст има само на кутийката.

Пример 2 – алтернативен текст

HTML

Бутон “Изчисти” (Reset)

Това е най-безсмисленият елемент в 95% от формите. В повечето случаи този бутон се ползва по грешка, при което се губи цялата информация. Ако някой иска да промени нещо, по-скоро би променил отделно поле отколкото целия формуляр. Понякога подобни бутони може да срещнем под различни имена „Отказ“, „Назад“, „Изчисти“ и др., по добре е да избегнем употребата им.

Умерена информация

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

Пример 3 – групиране на информацията

Проверка на данните (form validation)

Проверката на формуляра за грешно попълнени полета би предпазила потребителите от грешки и съответно от ново попълване на данните. В повечето случаи проверка се извършва посредством JavaScript и е добре да се използва внимателно и само на места, където е най-належащо. В примера по-горе е показана автоматична проверка за свободно потребителско име, което спестява най-много главоболия. Същевременно формата трябва да се провери дали работи добре при по-стари браузери или при изключен JavaScript, където проверка няма да се осъществи, но формата трябва да работи по познатия начин.

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

Предпазване от грешки

При повечето случаи може да улесним попълването като поставим примери в непосредствена близост до полетата за попълване. Например, някои регистрации изискват потвърждаване на въведената информация като изпращат писмо за активация до е-пощата на потребителя с цел да се провери дали регистрацията е валидна и е направена от човек, а не от машина. В този случай, най-добре е да упоменем, че на посочения имейл ще се изпрати писмо за проверка на данните. Потребителите не обичат да въвеждат лична информация, и понякога въвеждат несъществуващ e-mail.

Пример 4 – примери за въвеждане

Друг начин за избягване на грешки е там където е възможно да ползваме предварително дефинирани възможности за избор чрез падащо меню (drop menu), вместо да се налага потребителят да въвежда информация на ръка. Освен това, може да разделим възможностите за избор по групи.

Пример 5 – дефиниран избор

HTML


Обекти

или

Добре е да избягваме безмислени повторения за избор. Например: Изберете Град (София), Изберете Област (Софийска). Ако ни е нужна областта, лесно ще си я проверим.

Някои елементи от формуляра може да са повече от очевидни, че трябва да бъдат избрани от потребителите. Добре е предварително да ги нагласим по подразбиране (default). Такива елементи са от типа: „Съгласен съм с условията на сайта“ или по-подразбиране сме избрали държава – България.

Добре е да оразмерим полетата в които е необходимо да се въведат точно определен брой символи. Ако например питаме за година на раждане е по-добре да ограничим въвеждането до четири символа, отколкото полето да е с възможност за въвеждане на 20 символа. Ако е с повече символи потребителите биха предположили, че трябва да въведат и дата и месец – възможността за грешка е по-голяма. Полетата за въвеждане на текст (textarea) би трябвало да са с по-големи размери, което ги прави по-удобни за писане и редактиране.

Външен вид

Най-добре е да организираме формата чрез стилове – CSS, като дефинираме размера на шрифта да е в проценти, което ще позволи на потребителя да променя размера на текста директно от своя браузер. Също така, по-големите по размер полета са за предпочитане, защото въвеждането при тях е по-лесно (вж. пример на сайта на WordPress). Възможно е да структурираме формата и в таблица, но не е за предпочитане, защото би довело до проблеми с достъпността. Там където е належащо формата да се структурира в таблица е добре да се направи допълнителна оптимизация, за да се избегнат някои проблеми с достъпността. Повече за организирането на формите в таблици четете статия: Using Layout Tables for Forms. Едно интересно изследване (Label Placement in Forms от 12 юли 2006г), направено чрез система за следене на погледа (eyetracking или окослед) показва, че за имената на полетата е по-добре:

  • да ги поставим веднага над полетата, вместо от ляво;
  • ако все пак ги поставим от ляво, да ги равняваме на дясно към полетата, вместо на ляво;
  • да не ги удебеляваме (bold);

Подходящо оформяне на форми

Скрити елементи и неочаквани събития

Виждали сме и формуляри, които в стремежа си да са удобни и „умни“ показват частично полетата за попълване и се активират при определен избор от потребителя. В повечето случаи са доста неудобни, защото потребителите не виждат всички възможности за избор. Прекалено „опростеният“ им вид ги прави объркващи. Тяхната употреба трябва да е изключително внимателна и умерена и само на места където няма да породят двусмислие или объркване. Пробвайте да попълните следващия формуляр:

Да, ползвам
Имате ли компютър

Да

Такива форми са рядкост, но все пак се срещат. Логиката е напълно объркана. На места не е ясно какво точно трябва да се попълни. Въпросите са отляво, а не над елементите, което затруднява отговора. Прекалено много елементи са скрити и дори бутонът „Запис“ е нелогичен като наименование. Надявам се все по-малко да ни се налага да попълваме подобни „умни“ формуляри.

Кодове в картинки

Наричат ги CAPTCHA (вж. повече информация в Уикипедия) и какво ли още не, но по същество са си кодове за достъп. Кодовете най-често се ползват за да се провери дали този, който попълва формуляра или влиза в своя профил е човек, а не машина. Код в картинкаПостепенно започват да се появяват навсякъде, и по-скоро дразнят отколкото да вършат добра работа. Вярно защитата е важна, но е лошо когато това оказва влияние върху взаимодействието със сайта. Понякога дори не може да различим символите, защото знаците са повече от изкривени, а други са с бледи цветове. Повече алтернативни решения четете на: Inaccessibility of CAPTCHA

Буквата (О) и цифрата (0)

Повечето сайтове с подобна защита използват всички символи при генерирането на кода. Но при това положение изниква един проблем между цифрата нула (0) и буквата (О), те си приличат толкова, че когато са разкривени не могат да се различат. Ето това би принудило стотици потребители да грешат многократно.

Брой символи

Прилагането на всички символи за генериране на кода допълнително допринася за грешки при въвеждане. Много по-удобно би било ако кодовете се генерират само от цифри. Те се разпознават по-лесно, по-лесно се въвеждат от клавиатурата, и са само десет на брой. Въпреки, че кодът е генериран само от цифри защитата си остава достатъчно здрава.

Прекалено дълги кодове

Попадал съм на места където кодът се състои от 10 символа – цифри, големи и малки букви. Дългите кодове трудно се въвеждат, отнемат повече време, възможни са повече грешки. Добре е да се редуцират до 4-5 символа, само малки букви.

Добри решения

Представяте ли си, че се налага всеки ден по три пъти да ползвате своя достъп за електронно банкиране и трябва да въвеждате по три пъти кода за достъп всеки път и ако грешите по два пъти на опит, сметката става голяма. Ето едно отлично решение на което се натъкнах на сайта на Банка ДСК. Разработчиците са се постарали да направят проверката за „човечност“ да се появява след третия грешен опит, а не още с влизането на сайта – това пести много време.

На сайта на Банка ДСК картинката за проверка се появява само след трети грешен опит

А ето друго полезно решение на сайта на Hotmail. Разработчиците са предоставили възможност кодът от картинката да бъде произнесен гласово, което позволява на незрящи хора също да ползват тяхната услуга. Позволили са на потребителя да „смени“ картинката с кода като използва бутон – обнови (refresh), което е много удобно ако кодът не е достатъчно четим.

На сайта на hotmail картинката за проверка се изговаря гласово

Не е задължително да прилагаме тези неща за всички форми и регистрации, но когато става въпрос за електронен формуляр, който касае банкова или друга голяма институция е повече от задължително формулярът да е удобен и бърз за попълване…

А пък този екземпляр тук сигурно отнема часове: Жалба пред европейския омбудсман.
Гледайте да не се объркате да натиснете бутон „Възстанови“ вместо „Изпрати“ :)

Външни препратки:

  1. Accessible Data Forms – The University of Wisconsin-Madison
  2. Accessible HTML/XHTML Forms – The Web Standards Project
  3. Accessible forms: Guidelines, examples and accessible JavaScript tricks – WebSemantics – Accessibility
  4. Creating Usable Forms – WebQuarter Design
  5. Creating Accessible Forms – WebAIM
  6. Forms, usability, and the W3C DOM – Digital Web
  7. How to Create User-Friendly Forms – About.com
  8. Simple Tricks for More Usable Forms – SitePoint
  9. Usability and HTML Forms – ECommerce-Guide
  10. Web Application Form Design – LukeW
]]> http://www.lucrat.net/blog/advice/forms_and_usability/feed/ 0 Изчисти http://www.lucrat.net/blog/advice/btc-izchisti/ http://www.lucrat.net/blog/advice/btc-izchisti/#comments Tue, 21 Nov 2006 07:58:06 +0000 Димитър Симов http://www.e-lesno.com/blog/btc-izchisti/ Почти бях забравил копчето Reset или Изчисти. Това копче се появявяше преди време много често в различни формуляри. Напоследък е вече рядкост. Днес си го припомних във формуляр за регистрация на сайта на БТК.

Част от формуляра с копчето
BTC

Какво се случва, когато се натисне това копче? Ами изтриват се всички данни, въведени от потребителя. Безвъзвратно. Представете си как старателно си въвеждате всичко – потребителско име, паролата два пъти, таен въпрос и таен отговор, абонатен код и други и вместо да цъкнете Регистрация, без да искате цъквате Изчистване. Бум – данните ви ги няма. Много е лесно да се случи – копчетата са едно до друго.

Ако сте голям фен на БТК или ако нямате друг избор ще повторите упражнението и този път ще внимавате какво натискате. Вероятно ще обвините себе си, че сами сте си криви. Не. Крив е проектантът на формуляра, защото не се е замислил достатъчно за взаимодействие на потребителите с формуляра.

Какво би трябвало да направи? Не би трябвало изобщо да слага такова копче точно в този формуляр. От такова копче тук няма никаква нужда. Подобно копче е отживелица от една отминала епоха. Тъй като вероятно има хора, които не знаят, че данните им не се записват преди да натиснат Регистрация, дизайнерът би трябвало да сложи и кратък текст, поясняващ това.

В редки случаи може да се наложи такова копче да съществува. Какво би трябвало да направи тогава добрият дизайнер? Да сложи копчето на друго място, не в непосредствена близост до копчето за потвърждаване на регистрацията. Би го направил и по-малко от копчето за регистрация. Освен това би заложил едно питане „Сигурни ли сте, че искате да зачистите всичко, въведено до момента във формуляра?“. И тук има място за грешка, но вече вероятността е много по-малка.

]]> http://www.lucrat.net/blog/advice/btc-izchisti/feed/ 0