Windows Phone: Формата не следва функцията

Около 2 години ползвах Windows Phone. Преди няколко седмици си взех нов телефон. Този път с Андроид.

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

Ето един пример:

фацебоок фор Виндовс Пхоне facebook 6 for android

Фейсбук за Windows Phone (вляво) и Фейсбук за Android (вдясно).

Вижда се колко място се губи за иначе внимателно подбраната картинка и заглавието на страницата в приложението за WP. Заема приблизително 1/4 от екрана. Комбинирано с други дребни детайли – като ненужно големия акцент върху имената на хората (наличието на профилна снимка обезсмисля големия шрифт, използван за името) и твърде голямото пространство около всеки един пост – прави трудно достъпно основното в приложението. А именно съдържанието.

Това ме фрапира толкова не случайно. Ако се зачете човек в дизайн гайдлайните на Майкрософт за приложения за Windows Phone, ще открие една от основните концепции:

more with less

Create a clean and purposeful experience by leaving only the most relevant elements on screen. When it comes to designing great app experiences, we believe in content, not chrome.
Focusing on content over chrome reduces unnecessary elements, allowing your app’s content to shine. Let people be immersed in what they love and they’ll explore the rest.

А то точно обратното. И то точно в приложения правени от самите Майкрософт.

Още един пример. Къде по-добре би могъл човек да използва тая идеология ако не в чат. Където основното е комуникацията между хората и съобщенията, които си разменят.
ff34115d-430a-4c63-8656-63fc6227411c  skype-android
Skype за Windows Phone (вляво) и Skype за Android (вдясно).
Content is king както се казва. Не само за уеб сайтове обаче важи това правило.

Затова – ако правите подобно приложение — особено ако е за такива малки екрани — внимателно преценявайте кое е най-важното и скрийте всичко, което не е абсолютно необходимо да присъства на екрана постоянно.

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

Всъщност това правило важи и не само за малки екрани. Чудесен пример е скорошния редизайн на картите на Гугъл:
Screenshot 2013-05-15 at 12.38.58 AMЦелият екран е една карта. Няма го дори логото на Гугъл. Няма я и лентата с полето за търсене еднаква във всчики други приложения на компанията.

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

Добре че ги има обаче и добрите и лошите примери, за да се поучим от тях :)

Хензел, Гретел и навигацията

Моя статия за българското списание .net.

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

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

Едно често срещано решение на проблема с изгубването (особено в по-големите сайтове) е използването на пътечки от линкове. В английския език терминът e breadcrumbs и буквално се превежда като пътечка от трохи. И както вече се досещате произлиза именно от приказката за Хензел и Гретел, които докато бягат от къщи в гората, оставят по пътя си трохи от хляб, за да могат после да се върнат обратно.

Пътечките представляват хоризонтален списък от имена на страници, които описват всяко ниво от йерархията на сайта от най-горната (началната) страница на сайта до страницата, на която се намира потребителя. Всяко име в списъка е линк към съответната страница.

Бредкръмбовете са особено полезни, когато сайтът има повече нива в йерархията си и основната навигация не може адекватно да покаже на къде точно се намира някоя страница от по-долните нива в йерархията. Те могат да помогнат на потребителите да си отговорят на два от най-важните навигационни въпроси – „Къде съм?” и „Къде мога да отида от тук нататък?”.

Някои препоръки при оформянето на пътечката:

  • Първият линк да не е просто “Начало”, а нещо по-специфично, например името на сайта, защото „Начало” или „Home” е прекалено общо и нищо незначещо понятие.
  • Отделните имена се разделят със знак за по-голямо – „>”. Често се използват и други символи за разделяне като вертикална черта „|”, наклонена черта „/” или „\”, две точки и всякакви други варианти. Най-добре въпреки това е да се използва знакът за по-голямо, защото интуитивно подсказва значението на всяка страница в списъка и принадлежността и по-горното ниво. Т.е. началната страница е най-важна, следващата страница е по-малка и част от по-горното ниво и т.н. Всеки друг символ означава по-скоро разделение, а наклонените черти говорят нещо само на хора, които са виждали команден ред на операционна система.
  • Името на страницата, на която си в момента се включва в пътечката. Ако пътечката и заглавието са разделени визуално потребителят може да не разбере, че представляват едно цяло и имат комбинирано значение – да показват къде се намираш в момента и принадлежността на настоящата страница към някаква по-сложна и многопластова структура.

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

Дизайнерите и IE7

В последно време попадам на редица “дизайнерски” сайтове, които са тотално счупени откъм дизайн в IE7. И това са сайтове, които излизат от ръцете на хора, претендиращи за експертни знания в областта на уеб стандартите.

Пример 1

Пример 2

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

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

Ако бях и на мястото на хилядите блогове и галерии, които слагат линкове към подобни сайтове също бих се засрамил от себе си. Защото показвам възхищението си и соча за пример очевидно неработещи решения.

То верно, че на обущаря децата ходят боси, но чак пък толкова…

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

Филм в чест на Пол Ренд

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

Сега е моментът да спомена очеркa за Пол Ренд, който написах преди време за Groove Manifesto.

Началната страница на capital.bg

От вчера capital.bg е с променен дизайн.

 

На илюстрацията по-горе с червена пунктирана линия е отбелязана видимата площ преди човек да трябва да скролира при резолюция 1024х768. Първият пунктир указва каква част от съдържанието се вижда, когато го има огромният банер “За града”, който явно се показва само при първоначално зареждане на страницата. При повторно зареждане банерът го няма и видимата площ се разширява до втория пунктир.

Струва ми се, че основната промяна е в навигацията. Сега тя се простира на около една трета от първия екран преди скрола (при резолюция 1024х768). Този факт, заедно с разполагането на един голям и един огромен банери в това пространство измества смисленото съдържание чак след скрола.

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

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

Както писа преди време Джарид Спуул от UIE, отделянето на значителни ресурси за глобална навигация в един сайт, защото през по-голяма част от времето на потребителите не им трябва глобална, а локална (контекстно-зависима) навигация. Подобни твърдения има и Джейкъб Нийлсен, който направо пита Полезна ли е навигацията въобще? Добро обобщение на изледванията посветени на навигацията е направил Хенрик Олсен в една статия, която преведох за Groove Manifesto.

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

Но да се върнем на началната страница на capital.bg. Освен с неефективното оформление преди първия скрол, сайтът впечатлява и със загубата на значително пространство чрез неефективния си grid и дизайна на анонсите за новините.

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

Да се надяваме, че версия 5 на сайта ще отстрани тия проблеми, тъй като честно казано статиите в Капитал са интересни сами по себе си и ще е жалко да продължат да страдат от неадекватния дизайн.

Data.BG с нов дизайн

Току-що забелязах, че порталът Data.BG има нов дизайн. Удивително!

Този дизайн е въплъщение на изискванията и представите за уеб сайт на всички най-претенциозни, нищо не разбиращи от интернет и най-вече от собствената си работа клиенти. И виждам това като решение на един от най-посещаваните български сайтове (4-ти по данните на alexa). Удивително!

Началната страница на Data.bg

Връзка: disambiguity – В» pair design pays dividends

pair design. Добра идея. Накратко – една от основните agile практики е програмирането по двойки (pair programming), което само по себе си води до има редица преимущества. Според автора на статията, дизайнът на едно уеб приложение също може да се прави от двойка дизайнери. Мисля, че наистина има логика и смисъл – особено, когато например единият дизайнер е по-добър във визуалната част на нещата, а другият – в интерктивността и двамата взаимно се допълват. Нещо като лява и дясна половина на мозъка.