Автори: Алан Купър, Робърт Райман и Дейвид Кронин (Alan Cooper, Robert Reimann, David Cronin)

Книгата е разделена на 3 части:

• Разбиране на проектирането по цели (процес и потребители)
• Проектиране на поведението и формата (прозореца или цялостната рамка)
• Проектиране на подробностите на взаимодействието (елементите)

В Амазон

По-дългият отговор включва ‘зависи колко е подробен прототипът’. Много хора биха се заяли люто за термини като скица, сториборд, уайърфрейм, мокап, прототип (sketch, storyboard, wireframe, mock-up, prototype). За да опростя нещата, предпочитам да гледам на всички като на разновидности на прототип. А приемам, че прототип е всичко, което показва как ще изглежда и работи истинското нещо, когато бъде готово.

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

Общи – предназначени са за други цели, но вършат добра работа

• Хартия. Разбира се трябват и моливи химикали, флумастри, маркери. А може и жълти листчета.
• Бяла дъска. Прилича на хартията. Ако е магнитна, може да се лепят и местят картинки.
• Excel (Ексел). Превъзходен. Много достъпен. Много удобен. Позволява почти всичко.
• PowerPoint (ПауърПоинт).
• Word (Уърд).

За диаграми и схеми

• Visio (Визио)
• OmniGraffle (Омниграфъл) за Мак
• MindManager (МайндМанаджър) от Mindjet (Майндджет)
• SmartDraw (СмартДро)
• Inspiration (Инспирейшън)

За прототипиране на екранни интерфейси. Специализиран софтуер.

• Axure (Акшуър) от Axure
• GUI Design Studio (Гуи Дизайн Студио) от Caretta Software (Карета Софтуер)
• Expression Blend (Експрешън Бленд) от Майкрософт
• Lucid Specs (Лусид Спекс)
• Multimedia Fusion (Мултимедия Фюжън) от ClickTeam (Кликтийм). Предимно за игри
• Intuitect (Интуитект) от Intuitect. Добавка за Визио
• Jumpchart (Джъмпчарт) от Paste (Пейст)
• MockupScreens (МокъпСкрийнс)
• Thermo (Търмо, но при нас ще си стане Термо) – нещо ново, върху което работят в Адоуби
• Irise (Айрайз) от Irise. Хвалят го, а и изглежда читаво. Но пък е скъп.
• Balasmiq Mockups (Балсамик Мокапс). Изглежда много удобно за груби, бързи прототипи. Струва малко, а има и безплатна версия за браузър.
• ProtoShare (Протошеър) – изцяло уеб

За снимане от екрана -  много удобни и полезни. Разнообразието е огромно. Споменавам само нещата, които ползвам напоследък.

• Paint (Пейнт)
• FastStone Capture (ФастСтоун Капчър)

Дизайнерски

• Семейството на Адоуби: Adobe Flash, Fireworks, Dreamweaver, Director, Illustrator, Photoshop, Flex… какво ли още не
• Sketchbook Pro (Скечбук Про)

Изискващи познаване и писане на код – неща от рода HTML, CSS, ASP, XML, PHP…. Има много. Някои от тях:

• Notepad (Ноутпад)
• Dreamweaver (Дриймуивър)
• ActionScript (АкшънСкрипт)
• CSSEdit (СиесесЕдит) за Мак

Други

• Бормашина
• Дървени кубчета и лепенки

Какво изтървам?

Вижте още:

Съдържание за уеб на живо: атрактивност, лекота за четене и възприемане, SEO оптимизация и графично оформление Еднодневен тренинг за оптимизиране на тексове за уеб на живо с майстори в занаята: Борил Караиванов, Димитър Симов и Огнян Младенов (очакваме потвърждение и от други лектори).

Търсачката за имоти – imoten.com, стартира иновативен интернет продукт за единна платформа за представяне на всички актуални оферти за имоти в България. Целта на проекта е да подпомогне потребителите на сайта, като им представя нов метод за търсене по свободни критерии и да им спести време. В imoten.com са представени всички актуални оферти с всички основни параметри към тях. С ефективни методи за търсене и класифициране, офертите лесно и бързо могат да бъдат филтрирани по различни критерии като градове, квартали, райони, цени и много други специфични особености. Към почти всички оферти е наличен и снимков материал.

Прегледах набързо въпросния сайт http://www.imoten.com/. Отдавна искам и очаквам на пазара да се появи добър сайт за имоти. Три са основните съставки на такъв сайт:

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

Лека начална страница

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

Снимка 1: Началната страница на имотен.ком – опростена и лека

Има много бяло пространство – страницата диша. Отлично!

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

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

Любопитно е, че две от най-често търсените думи са троян и къща. Дали това не се дължи на факта, че в полето за търсене като пример са използвани точно тези две думи! Потребителите незнаейки или недосещайки се къде да напишат какво търсят, вероятно просто цъкат оранжевото копче за търсене с надежда да видят какво се получава. Търсенето на къщи е достатъчно често, за да обясни високата честота на появяване на думата къща, но как да си обясним високият интерес към троян! Подобно е положението и при наемите – там примерът съдържа тристаен и младост, съответно двете думи са сред най-търсените.

Предложено е и каре с най-често разглежданите неща. Не е лошо като замисъл, но ми се струва излишно по две причини: 1) не се разбира какво показва – виждат се някакви снимки на сгради и 2) като се изведат най-често посещаваните обекти и се сложат връзки към тях, самото извеждане изопачва резултата. Вероятността потребителите да цъкнат на някоя от петте картинки, изведени на първа страница е много висока; така тези пет картиники ще си останат най-посещавани за вечни времена. По добре да се сложат реклами – поне ще се знае, че са такива.

Интересно е и синьото блокче с името на сайта. Незнайно защо, то е възвратна връзка към началната страница на сайта – сиреч, води към себе си. Това е все едно когато сте в преддверието на апартамента си да имате врата, през която като минете да влизате в преддверието на апартамента си. Този проблем не се среща само при имотен.ком – има го вероятно в 90 на сто от сайтовете.

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

Ненадеждно търсене

В известието се твърди, че начинът на търсене позволява използването на свободни критерии.

• Зададох в полето за търсене следното: неголям офис в софия, гео милев за до 500 евра. Сайтът ми върна два еднакви резултата – „продава офис/магазин за 114 980 евра“. Разбира се оказа се, че съм търсил в продажби.
• Повторих търсенето. Този път получих доста по-добър резултат – отново две еднакви находки – „дава под наем 2-стаен апартамент/офис за 330 евра“.
• Пуснах и разширеното търсене за „офис в София, Гео Милев, от 60 до 100 кв. м.“ върна 3 резултата: един за офис 62 кв. м. за 330 евра и две еднакви за офис 99 кв. м. за 83 408 евра – по нищо не си личи дали се продават или отдават под наем (може да се гадае по цената). Нито един от трите резултата не съвпадаше с получените при другите две търсения.

Толкова за метода за търсене по свободни критерии, който пести време.

Разширената търсачка е съществен момент в един сайт за имоти. Досегашните ми опит и впечатления са, че нито един сайт за имоти няма добра търсачка. Очаквах изненада. Уви – просто някакви кутийки нахвърляни в безпорядък. Търсачките в другите сайтове са далеч по-усъвършенствани (не казвам удобни).

Снимка 2: Търсачката на имотен.ком – нито богата, нито разбираема

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

Енигматични елементи. Не можах да проумея предназначението на 29-те кутийки за отметки. Нито разбрах защо текстовете им са сиви.

Прилични резултати от търсене

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

Снимка 3: Резултати от търсене – смислени, с добри наченки за полезност

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

Самите резултати от търсенето са представени нелошо – силно визуално. Има снимки, което е изключително удобно, най-вече защото лесно можеш да отсееш еднаквите обяви. Много често един и същ имот се предлага от няколко агенции и е много неприятно да трябва да гадаеш дали става дума за същия имот или не. Липсва обаче възможност за преминаване в невизуален вид, в който вместо 30 бройки на страница да се показват 60 или 100.

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

Липсва възможност за сравняване на обяви. Вероятно такава възможност е предвидено да се предоставя чрез неработещите връзки добави в любими.

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

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

Разбира се потребителите ще решат сами дали да дадат бъдеще на сайта. Желая успех на новия сайт.

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

Снимка 1: Уърд в Офис 2007 – панделката е в горната част на екрана и представя командите групирани и добре видими

Съставена е от няколко насложени една върху друга ленти. Много прилича на предишните ленти с бутони (тулбари), но за разлика от тях:

• В един момент може да се вижда само една лента.
• Лентите са организирани по начин, който според Майкрософт следва логичния път в съставянето на един документ – нещо от рода на писане, вмъкване, подреждане, слагане на препратки и преглед.
• Лентите имат различни имена от имената на менютата, използвани досега.
• Лентите не може да се преподреждат, не може да се пипат и елементите в тях – както са предложени, така се и ползват.
• Не може да се скриват ленти или отделни техни бутони. Може обаче да се скрива цялата панделка.
• Имената и иконите на бутоните не може да се променят.
• Бутоните са по-едри и по-картинни от използваните досега и са организирани в обособени групи.
• Клавишният достъп (Alt+буква) е изцяло сменен и като увеличен като стъпки. Например за командата специално вмъкване (paste special) се използваше Alt+S+E, сега вече е Alt+H+V+S. Запазени са старите комбинации обаче – стига да помниш комбинациите.
• Потребителски менюта и ленти не се поддържат, а ако има такива, които хората са си направили в предишни версии – сори, не ги показваме.

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

С горепоказаната кордела, често седя и търся. Търся къде е копчето, от което да направя някакво действие – например да сложа номера на страниците. След като прецъкам всички ленти, стигам до F1 (копчето, което вика помагалото) и продължавам да търся. В много случаи успявам да намеря каквото ми трябва, но и помагалото и начинът на работа на някои команди са стъпка назад в потребителското взаимодействие.

Снимка 2: Уърд в Офис 2003 – има лента с меню и различни ленти с бутони

За сравнение, във версия 2003 нещата изглеждат така:

• В един момент може да се виждат няколко ленти. Всяка лента се управлява независимо от другите.
• Бутоните в лентите са организирани по предназначение – за редактиране, за писане, за графики и така нататък.
• Лентите са различни от менюто, но работят в синхрон – едни и същи команди могат да се появяват и на ленти и в менюто
• Лентите може да се преподреждат всякак и да се слагат на различни места – в примера горе, непосредствено под менюто има три ленти, а в дъното има още две.
• Може да се скриват ленти или отделни техни бутони.
• Бутоните са обособени в групи.
• Имената и иконите на бутоните може да се променят. Може да се избира дали един бутон да се показва с икона или без.
• Потребителите могат да си правят ленти и менюта – например, на снимката, в лентата с менюта – Styles и Bullets.

(не)Повече екранна площ

На няколко пъти четох, че корделата подобрила използването на екранната площ. Искрено вярвам в това, защото знам как изглеждат екраните на мои колеги и на клиенти, при които съм ходил. Често имат пуснати по десетина ленти. От бутоните по тези ленти вероятно ползват около 20% и за полезната площ остава по-малко от половината екран. Проверих какво се получава при мен:

• височина на панделката в Офис 2007 – 114 пиксела,
• обща височина на лентите и менюто в Офис 2003 – 78 пиксела.

Двете снимки, показани по-горе са направени на двата компютъра, които ползвам – служебния и домашния. При еднаква широчина на екрана, стария ми Офис бие новия с 36 пиксела – ще рече, че Офис 2007 ми губи с 50% повече екранна площ от Офис 2003.

И какво се получава – новото, което трябва да е по-добро всъщност не е, защото е различно, неудобно, непознато, не може да се пренарежда, а освен това, за награда, заема повече място. Как да му се зарадваш тогава!

Идеята да се даде на начинаещите потребители структуриран подход към започване на работата с продукта е прекрасна – инструментите са групирани по предназначение. Но какво се случва с потребители, които от години ползват продукта, наредили са си нещата по определен начин, знаят ги къде са, оптимизирали са си лентите така, че да им показват само неща, от които имат нужда? Отново съм прецакан (за кой ли път).

Едва ли е толкова трудно да се позволи пренареждането на лентите. Очаквам следващият Офис да го позволява, а дотогава вероятно ще посвикна с корделата – с всичко се свиква.

Приказка за кухнята

Младо семейство си търсело апартамент (осигурили са парите някак – няма да се отклоняваме сега с тях). При един оглед попаднали на нов апартамент – обзаведен. Имал си и кухня. В нея нещата били подредени в отделни шкафове според вида им и начина на ползване. Всички чаши в един шкаф – за чай, за кафе, за вино, за ракия, за уиски, за шампанско – разделени по вид и чудесно обозначени. Няма значение за какво са и колко често се ползват, те са само в един шкаф и могат да стоят само там.

В другия шкаф се намирали подправките – сол, оцет, чубрица, кетчуп, бахар, соев сос, ванилия, индийско орехче (без него не може, въпреки, че така и не знам за какво се ползва) и каквото там още се сетите. Отново всичко било в този шкаф, отново правилно разделено и добре обозначено и отново не можело да се мести.

И така си имало отделни шкафове за чинии, за тави и тенджери и накрая неща за почистване. В единия край на кухнята имало и едно рафтченце, на което можело да се извадят десетина неща: чаши, подправки, чинии, тави, препарати за миене. Всичко останало си стояло в шкафовете, както е подредено от предишния собственик (или от фирмата, обзавела апартамента, ако тази линия повече ви се услажда).

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

Та един ден съпругата искала да направи вкусна мусака с картофи и искала да ползва картофобелачка. Попитала търсачката „Какичко, къде е картофобелачката?“ Търсачката първо предложила да каже къде се намират картофите (което съпругата знаела). След това търсачката предложила да обясни как се белят картофи (което съпругата също знаела) и още веднъж как се белят картофи с машина (от което жената не се интересувала). Следвали теми като обяснения за ползата и вредата от беленето на плодове и зеленчуци, беленето на краставици, моркови, патладжани и други полезни храни. Нямало нищо за местоположение.

От нямане какво да прави, съпругата преровила шкафовете, но не намерила картофобелачката и пак се върнала със същия въпрос към търсачката. Какичката пак предложила същите отговори. Решила съпругата да пробва с най-близкото – как се белят картофи – като почнала да чете указанията за белене на картофи, една от стъпките казвала откъде да вземе картофобелачката. Мусаката била приготвена навреме.

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

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

• Ръсел Уилсън (Russel Wilson) не харесва панделката http://www.dexodesign.com/2007/08/why-microsofts-ribbon-sucks.html
• Дженсен Харис (Jensen Harris), свързан с разработката на корделата, смята, че тя пести място – http://blogs.msdn.com/jensenh/archive/2006/04/17/577485.aspx
• Крис Бърнард (ударениет опада на а-то; Chris Bernard, Microsoft, User Experience Evangelist) твърди, че новият офис е голям успех http://download.microsoft.com/download/1/f/f/1fff960f-51a2-44b1-b033-bf25a3c7c7ab/BRE001.wmv

• картинки (картини или снимки на обекти),
• линейни рисунки (конкретно представяне на изображения чрез линии),
• абстрактни рисунки (стилизирани начини за представяне на обекти, процеси и понятия).

Според изследване на Кунат, Корнел и Кисилка, изнесено от Хюман Факторс Интернашънъл (HFI) конкретните икони (линейните рисунки и картинките) подпомагат справянето със задачите най-добре при първо взаимодействие, както и след ползване в продължение на 20-30 минути. Сиреч, хората по-бързо и вярно разпознават иконата и предназанчението и, когато е реалистична картинка, отколкото когато е абстрактна рисунка.

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

За жалост не става ясно дали иконите са толкова полезни и за дълговременно ползване. Твърди се, че потребителите постепенно се научават да ползват само иконите и спират да имат нужда от текста. Но това вероятно се отнася само до действия, които се ползват много често – например всички потребители на Майкрософт Офис (а и на други програми) познават добре иконата за запис на текущия документ и нямат нужда да видждат текста до нея. (Забавното е, че самата икона представлява дискета, а напоследък компютрите не ползват такива инструменти за записване.) Ако отидем една стъпка по-далеко, вероятно ще се окаже, че опитните потребители нямат нужда да виждат нито иконата, нито текста, а ползват клавишна комбинация – CTRL+S в случая със записване на документ. При по-рядко ползваните команди, вероятно никога не се стига до подобно научаване – задължително има нужда от текст.

Други неизвестности остават:

• Дали споменатите своиства на иконите се отнасят само за команди или и за елементи в списък? Струва ми се, че в списък, където иконата се ползва, за да покаже вида на обекта, много лесно и удобно може да се замени икона и текст само с икона. Представете си списък на превозни средства (коли, камиони, автобуси, джипове, велосипеди, та ако щете и каручки) – не е нужно след иконата за лек автомобил да пише лек автомобил. При по-абстрактни обекти, нещата са по-трудни. Например, в списък с хора от различни професии, някои се обозначават лесно – летец, лекар, леяр, но е трудно само с картинка да се обозначат програмист, тестер, документатор, адвокат, прокурор.
• Как влияе големината на иконите? От закона на Фиц знаем, че колкото по-малък е един обект на екрана, толкова по-труден е той за улучване. Съответно, по-големите икони ще са по-лесни за улучване, а сигурно и за забелязване. Също така се знае, че децата и възрастните хора имат нужда от по-едри обекти, значи, ако продуктът е предназначен за такива потребители, то иконите сигурно трябва да са по-едри.
• Как влияе цветовото разнообразие? В Уиндоус Експлорър във Виста – 2 коментирах, че шареността на иконите създава неудобства като прави по-трудно разпознаването на устройствата в компютъра.
• Каква е оптималната гъстота на ползване на икони – на всичко ли трябва да се слага икона, само на често използваните елементи, само на някои, според преценката на дизайнера? Верният отговор е различен в зависимост от контекста и предназначението, но както с всяко друго нещо, трябва умереност – много хубаво не е на хубаво – прекалено много икони претрупват екрана и създават усещане за обърканост.

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

• Правило 1 – Всички размери и пропорции трябва да са взаимосвързани: отнся се както за обектите, така и за разстояниата между тях.
• Правило 2 – Винаги трябва заглавие (и то да е разпознаваемо като заглавие.)
• Правило 3 – Има два цвята за фон – бял и черен. Всички останали, включително сивият, са за неудчаници.

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

За пропорциите
Биват два вида: геомтерични и естествени. Геометрични са:

• 1 X 1
• 1 X 2
• 1 X 3
• 2 X 3

Изключения: Човешкото око трудно забелязва непропорционалности при големи обекти, както и при много широки и много дълги обекти: 1 X 19 е същото на вид като 1 X 18,2.

Естествените са

• 1 x 1,618 – златното сечение. Това е разделяне на една отсечка на две части така, че сумата на двете части да се отнася към по-дългата част така, както по-дългата част се отнася към по-късата. Математематическото обознчение е φ.
• 1 x 1,3141 – π (пи). Дължината на окръжност с диаметър равен на единица.
• 1 x 2,718 – е. Основата на натуралните логаритми.
• 1 x 1,414 – квадратен корен от 2. Дължината на диагонала на квадрат със страна равна на единица.

Въпреки че тези пропорции, изразени с числа изглеждат нехармочнично, възприемаме обектите, които ги използват като приятни и хармонични. Няма как, ние сме част от природата.

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

Писма
Откакто успях да се регистрирам за дните на Майкрософт, съм получил пет писма – петото, току що. Всички те са на тема Дни на Майкрософт 2007, но нито едно от тях не праща към сайта на дните на Майкрософт. (Малко изключение прави писмото, потвърждаващо регистрацията. В него имаше връзки за потвърждаване и редактиране на личните данни, които съм въвел при регистрирането си.) В главата на всяко писмо има огромна полупразна картинка, която е връзка, но води към сайта на Майкрософт – www.microsoft.com. Проблемът е, че всеки път, когато поискам да видя нещо в сайта на събитието, пускам Гугъл, за да намеря сайта. От една страна е неудобно, от друго е малко смешно.

Програма
Програмата на събитието е представена чудесно. Различните потоци са един до друг, което позволява на потребителите лесно да избират и сравняват.

Снимка: Извадка от програмата

Виждат се четири колони с различните потоци. Във всяка колона има по една тема. Всяка тема е връзка към подробности, а името на всеки лектор е връзка към информация за лектора.

Неудобството се появява, когато се отиде на подробности за тема или лектор. Изведнъж всичкият контекст изчезва и потребителят трябва да помни куп неща. Нарушава се едно от основните правила в проектиране на потребителското взаимодействие – „Не карай потребителя да помни неща, които машината може лесно да покаже.“

В страницата с подробности за лекцията липсват каквито и да било помощни данни. А трябва да има като минимум информация и връзки към:

• От колко часа е.
• В коя зала се провежда.
• Кой е лекторът.
• В кой поток е.
• Кои са предишната и следващите теми.

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

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

Навигация
Менюто е сравнително добре различимо, но има някои отклонения от удобния начин за показване на меню в сайт. Ще спомена две:

• Текущата страница или секция не се отразява в него. Добра практика е, бутонът, който води към текущата страница или секция да променя вида си, когато потребителят се намира в страница от текущата секция.
• Всичките елементи на менюто са възвратни: бутонът, който води към текущата страница продължава да е действаща връзка, която води към текущата избрана страница. Това е като да влезеш в стаята през вратата и да се озовеш пред същата врата, която води към същата стая – леко объркващо.

И какво от това?

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

Лекцията, на която искам да отида се нарича Програмиране с мисъл за потребителя. Няма да програмирам, защото не съм програмист, но пък се занимавам с ползваемост и много се радвам, че в България най-после се появява нещо на тази тема, в което не участвам. Искрено се надявам след тази лекция да последват и други. Живот и здраве, догодина сайтът на дни на Майкрософт 2007 може да се справи по-добре с ползваемостта.

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

Снимка: Формулярът за регистрация

Полетата са наредени хаотично. Мислено е за базата, не за потребителите. Няколко бързи забележки:

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

Никой не е разсъждавал за потребителите, мислено е за интегритет, а не за поток на взаимодействието. Първо ще попълня нещата, ще натисна Изпрати и тогава ще разбера дали нещо съм сбъркал – подход за взаимодействие с потребителите от преди около 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 на браузъра си във формуляра за регистрация. Ако обаче е попълнил данни, някои от данните (например име) си стоят, а други (например парола) се губят. Не съм проверявал всички полета. Ако на някой му се занимава, да пробва.

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

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

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

Ха честита Баба Марта!

Всичко на този екран е на един цък разстояние – а дали хората, които го ползват (са го ползвали) се чувсват щастливи!

Много ми харесва как бутончетата са толкова смалени, че картинките им не се събират. Опитах да преброя цветовете, полетата и бутоните, но ми се премережи погледът. Няма да опитвам повече – който го направи, има една бира от мен.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Имейл: На посочения имейл ще получите писмо за потвърждение!

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

Изберете обект:

Изберете обект: