Мобилен уеб дизайн 10 съвета за по-добра използваемост

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

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

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

1. Решете резолюцията на екрана

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

Ето списък на популярните уеб мобилни устройства от февруари 2011 г., представен от Uxbooth.com с публикуваната им статия, Съображения за мобилен уеб дизайн (част 2): Размери, от Дейвид Легет. Авторът обяснява няколко въпроса за размерите на дисплея и решенията за дизайна на оформлението.

2. Разделете уеб страниците на малки части

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

За примера по-долу версията на мобилния уебсайт на CBS News показва само основния раздел за новини и разделя статии на новините на малки части. Докато Treehugger се представя с последните си статии и най-новите туитове с някои от функциите на пълния уебсайт. И двата сайта трябва да кликнат върху текстов линк, за да видят останалата част от статията.

CBS News

Treehugger

3. Опростете дизайна

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

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

Най-добра покупка

YouTube

4. Възможност за преглед на пълния уебсайт

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

Например, Ars Technica имат бутон за връзка към стандартния уебсайт, поставен в заглавието. Докато Shangri-La имат пълна връзка към уебсайта, поставена в долния колонтитул.

Ars Technica

Земен рай

5. Разположение на навигацията

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

D & G

политик

Ежедневен хороскоп

6. Използвайте текстови връзки

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

A List Apart

Reddit

7. Направете разграничение между избраната връзка

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

Geek Squad

дизел

8. Баланс връзки

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

Flickr

кикотене

9. Намалете въвеждането на текст на потребителя

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

За нашата извадка по-долу Fedex използва списък за проверка и падащи менюта. Докато Tumblr ви накара да изберете вашия език, използвайте падащото меню.

Fedex

Tumblr

10. Не пукайте или освежавайте

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

Накратко

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

Имате ли предпочитани мобилни сайтове, които наистина ви вдъхновяват? Можете ли да споделите някои от вашите съвети за мобилен уеб дизайн? Осведоми ни!

Допълнителна информация

1. Отзивчиви уеб дизайн (Alistapart.com)
2. Направете вашия сайт Mobile Friendly (Thinkvitamin.com)
3. W3C mobileOK Проверка (W3.org)
4. iPhone Simulator