برای آنکه بتوانید سایت جذاب و کاربر پسند داشته باشید همواره رعایت برخی از نکات ضروری است به شما توصیه می کنیم که به این ده نکته توجه خاص نمایید تا با رعایت این نکات ساده محوریت دستورالعمل های طراحی کاربر پسند در سایت شما پیاده سازی شود.
گاهی هنگامی که سخن از یک وب سایت به زبان می آید، تفکر به سمت مجموعه ای از لینک ها که هر لینک منتهی به یک صفحه می شود، سوق پیدا می کند.. اما باید به این نکته دقت نمایید وب سایت واسطه ای است که در آن مجموعه ای از اشیا و چیزهای مختلف قرار گرفته است . در وب سایت هویت های متفاوت ، شرکت های گوناگون و یا افراد به معرفی خود می پردازند و می توانند اطلاعات خود را به اشتراک بگذارند. با اشتراک گذاری اطلاعات افراد ضمن آشنایی باهم، تاثیر مستقیمی بر هم می گذارند. این تعامل سبب رشد و بهینه تر شدن روابط و گسترش فضای ارتباطی خواهد شد. وظیفه یک طراح وب سایت این است فضای وب سایت را به گونه ای طرح نماید تا تجربه کار برای افراد مختلف بهینه تر شده و کاربرانی که از وب سایت بازدید می کنند، تجربه لذت بخشی را تجربه نمایند. یک طراح رابط کاربری در کار خود باید تمایز و تفاوت را به گونه ای خلق نماید که هر کاربر این تفاوت را در ذهن خود به یاد بیاورد.
برای رسیدن به تمایز و تفکر متمایض باید در درجه اول همواره به کاربر خود فکر نمایید و نیازهای وی را آنالیز کنید.
طراحی وب سایت که در این دهه گسترش یافته است، و رشته به نسبت جدیدی است، علاوه بر نیاز به دانش فنی، به دانش تعامل انسان و رایانه نیز نیازمند است . روابط مستقیم انسان و رایانه که در صطلاح به آن HCI گویند، بخشی از علم روانشانسی است. نه دستوالعمل برای این کار وجود دارد و شما باید در هنگام طراحی وب سایت، این موارد روانشناسی گونه را زیر نظر داشته باشید تا مخلوق شما (وب سایتتان) متمایز از دیگران باشد.
طراحی مبتنی بر واسط روی چیدمان و قراردهی بخش های مختلف وب سایت متمرکز است. در این طراحی یک تصویر بزرگ را در نظر می گیرد و با تمرکز روی این تصویر بزرگ ، نیازهای خود را روی آن متمرکز خواهد نمود. به بیان دیگر در طراحی بدین گونه کمتر رابط ها وجود خواهند داشت.
1- کاربر خود را بشناسید .
در گام اول شما باید کاربر خود را بشناسید. به طور مثال در یک دسته بندی کرابران به کاربران درونی وبرونی تقسیم بندی می شوند. به طور مثال درون سازمان یا برون سازمان و یا دورن کشور یا برون کشور! شما با دانستن این موارد می توانید دموگرافیک جذاب تری را ایجاد نمایید شما با دانشتن دموگرافیک پیاده سازی دقیقتری را خواهید داشت. به زبان ساده تر شما باید نایز مشتری و کاربر خود را شناسایی کرده و بعد ساده ترین و سریع ترین روش برای رسیدن به هدف را پی ریزی نمایید.
برای رسیدن به این هدف و همراستا شدن با کاربران باید تجزیه و تحلیل دقیق تری از کاربر داشته باشید . یک روش بهینه برای این کار صحبت کردن با کاربران است . شما با شناسایی کاربران و صحبت با آن ها به صورت حضوری و مانیتور این افراد هنگام استفاده از وب سایت به نیازها پی می برید و حتی از کرابران می توانید بپرسید که : ” شما در باره این طرح چه تفکری دارید؟”
شما باید ضمن شناسایی اهداف کاربران، باید بدانید چه جیزی رسیدن این افراد به اهداف را سادهتر مینماید. شما باید موارد متعددی که سبب میشود که وبسایت به این افراد کمک کند تا به هدفشان برسند را شناسایی نمایید.
هیچگاه بررسی نیازهای کاربر را متوقف نکنید. نیازهای کاربران هرروز تغییر میکند و شما برای این بررسی نیاز است تجزیهوتحلیلتان عمیقتر شود. سعی کنید نیازهای کاربران را پوشش داده و دسترسی این نیازها را تکمیل نمایید. با شناسایی نیازهای کاربر، به خواستههای این افراد رسیدگی نمایید این کار سبب میشود که نیازهای اساسی وبسایت خود را بهمرور تکمیل نمایید.
شما هنگامیکه با کاربران صحبت میکنید نیازهای این افراد را شناسایی خواهید نمود و به مرور فصل مشترک کل نیازهای افراد مختلف را کشف میکنید تا وبسایت شما برای همه افراد جامع عمل بپوشاند.
2- مشخص کردن چگونگی کار افراد با واسط
قبل از پیاده سازی واسط، باید چگونگی کار افراد باواسط را مشخص نمایید. بسیاری از دستگاههای کنونی بهصورت تاچ هستند و شما باید دیدگاه مناسبی را برای وبسایت برای این دستگاهها داشته باشید.
تیندر: برای راحتی کاربر و تجربه مناسب، باید به سادگی یک کلیک روی آن تعریف شود.
هنگامی که افراد وب سایت را مشاهده مینمایند، دو روش برای استفاده وجود دارد، اول مستقیم که تعامل با عناصر واسط محصول است و دوم غیرمستقیم است (تعامل با UI های خارجی که به محصول متصل میشود)
مثالی از مستقیم:
استفاده از یک دکمه یا کلید
مشخص کردن یک کارت
درگ و دراپ یک مورد با انگشت!
مثالی از غیر مستقیم:
حرکت و کلیک با موس
استفاده از کلیدهای میان بر
تایپ روی فیلدهای فرم
نقاشی روی یک لوح سفید
کاربران شما چه کسانی هستند و وسایلی (موبایل یا تبلت یا ….) که آنها استفاده میکنند باید دقیق به شما اطلاع دهند. شما محدودیت طراحی برای افراد مسن و یا معلول نیز دارید. طراحی برای این افراد باید بسیار ساده باشد. همچنین اگر با برنامهنویسها و مهندسین در ارتباط هستید باید از کلیدهای میانبر و روشهای سریعتر استفاده نمایید.
3- انتظارات را مشخص کنید .
بسیاری از تعاملات با وبسایت و یا برنامههای کاربردی دارای پیامدهایی هستند:
بهطور مثال کلیک روی کلید، میتواند سبب خرج کردن پول، پاک کردن وب سایت و یا توهین درباره یک کامنت کاربر دیگر باشد. هنگامیکه در طراحی یک بخش منجر به یک پیامد شود، اضطراب نیز در این حیطه وجود خواهد داشت.
شما باید مطمئن باشید که بعدازآن کلیک روی دکمه چه پیامدهایی مدنظر کاربر است و این امر باید از قبل پیشبینی شود. برای این کار باید طراحی و یا کپیبرداری را از قبل انجام دهید.
– براوردهسازی انتظارات کاربران با طراحی
یکی از روشها مشخصسازی و برجسته کردن (هایلایت کردن) کلید برای اقدام مورد نظر است. به عنوان مثال استفاده از المانهای متداول میتواند نتیجه جستجو را اثر بخش نماید. مثلا اگر از المان سطل آشغال استفاده کنید کاربران کاربری حذف را به خاطر خواهند آورد و از سویی دیگر اگر از ذرهبین استفاده کنید همه میدانند منظور شما جستجو در وب سایت یا برنامه کاربری شماست همچنین علامت + میتوان به معنای افزودن باشد.
استفاده از رنگ نیز میتواند الهام بخش بسیاری از موارد باشد به طور مثال رنگ سبز به معنای رفتن یا go و رنگ قرمز معنای توقف یا stop را در ذهن تداعی مینماید..
– برای براورده سازی انتظارت از کپی لازم است اقداما زیر صورت گیرد :
ایجاد یک کلید مشخص و واضح برای کپی
ارائه مسیرهای دقیق و مشخص نقشه در فضاهای خالی
پیام های هشدار برای دریافت و درخواست برای تایید
دقت کنید برای پیام هایی که برگشت ناپذیرند و اعمالی نظیر حذف یک چیز صورت می گیرد، باید از افراد پرسش گردد که آیا از انجام عملیات فوق اطمینان دارند ؟
در invision با کلیک روی آیکون trashcan فوراً یک صفحه را حذف نخواهد نمود. در عوض از شما میپرسد که آیا از عملیات فوق اطمینان دارید و به شما میفهماد که این کار برگشتناپذیر و غیرقابلجبران است.
4- پیشبینی اشتباهات
اکساندر پوپ در کتاب تحقیق رأی انتقاد میگوید که خطا برای انسان است تا بخشیده شود.
به این نکته توجه نمایید که افراد و انسان خطا میکنند اما نباید برنامهها به گونهای باشد که عواقب خطا نابخشودنی باشد. دور روش برای کاهش تأثیر خطای نیروی انسانی وجود دارد که نیاز است شما این روشها را مد نظر قرار داده و ان را ارائه دهید.
جلوگیری از اشتباهات قبل از وقع آنها
راهکارهای رفع خطا پس از انجام و وقوع آن
.
شما هموار بسیاری از تکنیکهای پیش گیری از اشتباه را در تجارت الکترونیک و طراحی فرمها مشاهده مینمایید. به طور مثال اگر کلیه فیلدهای فرم را تکمیل ننمایید، کلیدها غیر فعال هستند. یا به طور مثال فرم تشخیص میدهد که آدرس پست الکترونیک به طور دقیق تکمیل نشده است و یا در آدرس آن اشتباهی وجود دارد. در بسیاری از مواقع صفحات پاپآپ به شما هشدار میدهد که سبد خرید نیمه کاره دارید و یا آیا میخواهید سبد خرید جدید را ایجاد نمایید؟ در این باره شرکت آمازون مصرانه و سختگیرانه روی این موضوع تمرکز کرده است و با وجود سختی و اتلاف وقت کاربر روی موضوع مسر بوده و پا فشاری مینماید.
همواره پیشگیری و پیش بینی بهتر از درمان است. به عبارت دیگر شما با پیش بینی میتواند تلاش برای تصحیح کردن را بهبود بخشید. به طور مثال لا کلید “بعدی” و یا ” ثبت” کاربر با تفکر بیشتر روی فرم کلیک میکند و تأمل بهینهتری خواهد داشت..
گاهی نیاز است که اتفاق و مشکل صورت پذیرد و این زمانی است که پیغام خطا به صورت دقیق برای خودشان ظاهر میشود و شما باید این پیام خطا را تنظیم نمایید. باید پیام را به گونهای تنظیم کنید تا کاربر الکی کلیک ننماید. هنگام نوشتن پیام خطا باید اطمینان حاصل کنید که این پیام دو هدف را دنبال میکند:
اول آنکه مشکل را دقیق توضیح بدهید: ” شما گفتید که در مریخ متولدشدهاید ولی هنوز انسانها ان را اشغال نکردهاند؟”
دوم روشهای برطرف سایزی مشکل را شرح دهید: ” لطفاً گزینه محل تولد خود را زمین انتخاب کنید”
دقت کنید روش کاری شما میشود به گونهای باشد که فایلهای پاک شده قابل بازیابی باشد. با کپی گرفتن از اطلاعات امکان بازیابی مهیا خواهد شد. در این زمینه باید به کاربر بگویید که ” شما همیشه فکر میکنید با رفتن به زباله دان و کلیک دوباره میتوانید اطلاعات و فایل را بازیابی نمایید”.
روش جلوگیری از خطا یک اصل ژاپنی به نام پوکا است. پوکا امان روش محافظت از خطا است.
5- ارائه بازخود سریع
همواره طبیعت به ما بازخورد میدهد و فیدبک در آن وجود دارد. به طور مثال ما با پرسش از دیگران بازخورد میگیریم. گاهی با کشتن گربه، صدای خش خش یا خرخر از حنجره گربه به گوش میرسد.
همواره دستگاههای دیجیتالی فیدبک مناسبی به ما نمیدهند و نیاز است که صفحه مجدد بار گذاری گردد و یا لپ تا مجدداً ریستارت شود. وی ا به نزدیکترین صفحه و منو رجوع خواهد شد.
شما باید هنگام وقفه و یا پردازش نوار پردازش گر را به صورت انیمیشن نمایش دهید. باید کلید کلیک را کم رنگ و غیر فعال در زمان پردازش کنید.
باید مطمئن شوید همه چیز سریع اتفاق می افتاد. وب سایت Usability.gov هر ثانیه تاخیر را وقفه تلقی می کنند و بیش از 10 ثانیه را فاجعه می داند.. براساس آمار جدید 3 ثانیه تاخیر برای شهروندان امریکایی کفایت می کند تا بتوانند برای غرامت اقدام نمایند.
باید مطمئن شوید همه چیز سریع اتفاق می افتاد. وب سایت Usability.gov هر ثانیه تأخیر را وقفه تلقی میکنند و بیش از 10 ثانیه را فاجعه میداند.. بر اساس آمار جدید 3 ثانیه تأخیر برای شهروندان امریکایی کفایت میکند تا بتوانند برای غرامت اقدام نمایند.
اگر صفحه نمایش کمتر از 5 ثانیه نمایش داده میشود نیازی به انیمیشن نوار پردازش نیست ولی برای مدت زمان بیشتر این منو نیاز و حیاتی است. استفاده از انیمیشنها و مجازی سازیها نیز توصیه میشود اما اگر زمان بیش از یک مقدار شود در اصطلاح به مرگ مشتری یا PINWHEEL OF DEATH نزدیک شدهاید. سعی کنید نیرنگهایی را ایجاد نمایید که انیمیشن سریعتر به نظر برسد.
6- به موقعیت و ابعاد المانها در صفحه وب سایت دقت کنید.
ثانون فیت که در باره تعامل انسان و رایانه است بیان میکند که:
زمان به دست آوردن هدف رابطه مستقیمی با اندازه و موقعیتشی دارد.
به عبار دیگر هر شی یا چیز که بزرگتر و یا نزدیکتر باشد، کرسر سریعتر روی آن قرار خواهد گرفت. این موضوع بهوضوح تعامل و تکنیک ارتباطی را بیان میدارد، اما سه مورد مهم و اساسی را در اینجا اشاره خواهیم کرد:
دکمهها و اهداف دیگر (مانند آیکونها لینکها) که نیاز است کلیک شوند را به قدر کافی بزرگنمایید. این امر سبب میشود که در تایپوگرافی و فهرستها افراد سردر گم نشوند و صفحات و بخشهای مختلف را باز نکنند. فضای با بین لینکها کاربر را راحتتر خواهد نمود و ارتباط مناسبی را ایجاد میکند.
هرکاید و آیکونی که رایجتر است و متداولتر است را بزرگتر و برجستهتر نمایید.
ناوبری یا NAVIGtion را در صفحه قرار دهید، همچنین سایر عناصر بصری و یا میلههای جستجو که در کنار صفحهنمایش قرار دارند را در مکانی مناسب قرار داده و به دقت مکانان را آنالیز کنید. کاربران نباید دغدغه روی هم افتادن کلیدها و یا این منوها را داشته باشند.
شما بر اساس مدل وب سایت و سیر حرکتی کاربر باید به ابعاد و اندازه عناصر فکر کنید. اگر مدل تعاملی شما از بالا به پایین یا عمودی و یا از راست به چپ یا افقی است باید بر اساس وب سایت محل قرار گیری و اندازه آیکون و یا لینک هر ا تجزیهوتحلیل کنید. باید در نظر بگیرید که کجا و چگونه کاربران را به این نوع تعامل غیر معمول هدایت کنند.
7- استانداردها را حذف نکنید.
سعی کنید همواره روشهای جدید را خلق نمایید اما در نظر داشته باشید این روش سادهترین روش و بهترین روش نیست.
بسیاری از وبسایتها قبلاً شناخته شده است و مردم سادگی با کار آن را آموخته اند و یک روش جدید ممکن است کاربران هدف را دچار سردرگمی کرده و در نهایت دلزده نماید. شما باید روشهای قبلی را بهبود بخشید و ایجاد یک روش جدید سبب کاهش راندمان میشود.
اگر به زبان سادهتر بخواهیم آنالیز کنیم آیا منوی گوگل و یا منوی مایکروسافت در هر ورژن تغییرات بنیادین دارد؟
با کمی بازنگری مشاهده می کنید که نرم افزارهای مربوط به دستگاههای جیبی نیز دچار تغییرات بهینه شده اند :
تا پاییز 2013 کلید آرشیو در بالا صفحه نمایش قرار داشت. مشخصات اندروید نیز گفته بود در بالا قرار گیرد، اما بر اساس عادت کاربری کاربران برای انتخاب گزینه های دیگر این گزینه انتخاب می شد که سبب آرشیو شدن فایل ها می شد. یک تغییر کوچک که در مکان این گزینه صورت گرفت کاربران جدید را 23% افزایش داد.
8- یادگیری واسط ها را آسان نمایید.
بر اساس گزارشان افراد تنها 5 الی 9 مورد را در حافظه کوتاه مدت خود قرار میدهند و بیش از آن در حافظه نمیماند.
هر چیز سادهتر باشد راحتتر در حافظه باقی میماند و این امر کاملاً منطقی است. شما برای به خاطر سپردن مسائل برای کاربران باید از این تکنیک استفاده نمایید. به زبان سادهتر برای ارائه مطالب و نیازهای متعدد به کاربر این قضیه را به لقمههای کوچکتر تقسیم نمایید تا قابلهضم باشد.
این قضیه با قضیه تسلر نیز همخوانی دارد، بر اساس این قضیه برای طراحی واسط سادگی حرف اول را میزند و کاربر باید این موضوع را تا حد امکان ساده نماید. شما باید یک مسئله پیچیده را پشت مجموعهای از مسائل ساده پنهان کنید. مایکروسافت ورد مثالی عملی و زنده برای این موضوع است.
گروهی از ورد برای تایپ استفاده میکنند و گروهی دیگر از قابلیتهای بسیار بالای آن استفاده میکنند و بر اساس نیاز خود از آن بهرهمند میشوند. بسیاری از کاربران از بسیاری از قابلیتهای ورد بیاطلاع هستند
این مفهوم به آشکارسازی پیشرو شهرت دارد و بدان معناست که مجموعهای از خصایص پشت خصایص ساده قرار گرفته است. در وب سایتهای خانگی این روش را مشاهده می نمایید. در جلوی وب سایت تصاویر و مشخصات کلی از محصولات است و با کلیک روی آن به اطلاعات بیشتر و نظر مشتریان و … منتهی میشوید. این روش باری موبایل یک طراحی ایده آل است و بهترین راهکار میباشد.
از ایجاد و درج مطالب اضافی خودداری کنید و لینکها و پیوندهای اضافی را حذف نمایید. کاربران دنبال یادگیری بیشتر نیستند و باید با یک جستجو ساده به هدف موردنظر خود دست پیدا کنند. یک روش ایجاد یک گزینه “learn more” است که در صورت نیاز کاربر به اینسو خواهد رفت.
9- تصمیم سازی را ساده نمایید
در بسیاری از وب سایتها از بنرهای تمام صفحه استفاده می کننند که ناگهان برای کاربر نمایان میشود. این بنرها با صدای بلند و تمام صفحه گویا فریاد میزنند که ما را ببینید و این بنرها زمان کاربر را تلف میکند و بدانید که زمان برای کاربر با رازش است.
بسیاری از مواقع باید یک وبسایت ساده و آرام ایجاد نمود. شما باید طراحی ui را به گونهای انجام دهید که قدرت فکر و انتخاب را به مشتری بدهید تا تصمیمگیری نماید. این مورد همه کاری که برای طراحی وبسایت انجام میدهید را تحت تأثیر قرار میدهد:
منوهای ناوبری
چیدمان کلی
صفحه قیمتها
فهرست بلاگ
تغذیه مربوطه به محتوا
موارد ذکر شده فقط به لیست فوق نیست و در آینده توسعه خواهد یافت. شما برای صفحات فرود وی ا ایمیل های تبلیغاتی به نکات کلیدی و اساسی دقت نمایید. گاهی نیاز است که حجم صفحات را کم کنید و گزینه های خاص را در نظر بگیرید.
10- به داده ها گوش فرا دهید
در طراحی علاوه بر زیبا سازی وب سایت نکته مهم تری وجود دارد و آن نکته سئو و بهینه سازی وب سایتتان است که شما را به هدفتان نزدیک کند.
شما باید براساس تحقیق و آزمایش اطلاعات کاربران را آنالیز نمایید و هدف نهایی را انتخاب کنید. برای این منظور از ابزاری نظیر گوگل وب مستر و گوگل آنالایتیکس . هر دو ابزار مناسبی هستند و برای هر حوزه می تواند بدرخشند.