نکات طراحی وب: کاربردپذیری – طراحی نامریی
نوشته داود تراب زاده • 22 خرداد 1390
در پست قبل به بررسی اولیه کاربردپذیری پرداختیم، حال میخواهیم به طراحیوب از دیدی دیگر بنگریم. اول باید به مفهوم طراحی برسیم، اینکه طراحی چیست و هدف آن کدام است. طراحی درواقع یک تلاش آمیخته با هنر است برای انتقال یک مفهوم به صورت غیرمستقیم. طراحی برای انتقال معانی به انسان صورت میگیرد همانطور که میدانید انسان نمیتواند فارغ از احساساست و افکار و تجربیات خود تصمیم بگیرد.
اگر میخواهید از طراحی شما سوء برداشت نشود و مفهوم با اولین نگاهها درک گردد، در هنگام طراحی باید این احساسات و افکار را در نظر بگیرید. در طراحیهایی که کاربردپذیری مطلوبی دارد به مشترکات انسانها توجه میشود، در واقع شما با زبانی صحبت میکنید که برای همه قابل فهم است. قبل از شروع طراحی شما باید بدانید که چه احساس و مفاهیمی را میخواهید در بیننده ایجاد کنید. اینجاست که طراحی نامریی معنا پیدا میکند.
شما میآفرینید :
برای مثال وقتی میخواهید برای یک شرکت بزرگ وبسایت طراحی کنید باید به کاربر حس نظم، سادگی، بزرگی، وقار، اطمینان و نزدیکی منتقل شود. حال باید از هر ابزاری برای اینکار استفاده کنیم. از رنگبندی گرفته تا انتخاب عکس و لوگو. تمام این اجزا لازم و ضروری هستند همانند اعضای بدن. بدیهی است که همه اینها باید هماهنگ و همسو باشند. طراحی وب همانند ساختن یک انسان است. شما به آن لباس میپوشانید، شخصیت آنرا میسازید، تکلم به آن میآموزید. به عبارت دیگر وب سایت مثل یکی از کارمندان شما عمل میکند.
درست ببینید:
برای روشنتر شدن موضوع به بررسی همان مثال بالا میپردازیم. فرض کنید که این شرکت فرآیند برندیگ را کامل طی کرده و از یک نوع شخصت تجاری برخوداراست. وقتی شما به دفتر شرکت مراجعه میکنید چه حسی در شما بهوجود میآید؟ سایت هم باید شبیه همین حس را منتقل کند؛ چیزی که در وب فارسی نادیده گرفته شده است. همانطور که پرهام باغستانی عزیز توییت کرده بود ” وب سایتهای شرکتهای بزرگ فناوری اطلاعات هیچ نشانی از بزرگ بودن شرکت ندارند “.
پس از اینکه اهداف وبسایت مشخص شد به سراغ سایتهای مشابه میرویم تا کمی به ما ایده بدهند (قرارنیست ما از جایی کپیبرداری کنیم). دلیل این کار این است که ما با روشهای متداول برای طراحی این چنین سایتهایی آشنا شویم. اینجا یک موضوع دیگر را هم باید در نظرداشت و آن خلاقیت است. طراحی شما باید دارای تعادل کافی میان خلاقیت و کاربردپذیری باشد.
سادگی :
فرض کنید که یک طرح آنقدر نو و خلاقانه باشد که کسی نداند چگونه با آن کارکند. شاید به ذهن همه این مسئله خطورکند که این مشکل را میتوان با گذاشتن راهنما حل نمود اما این راهحل خوبی نیست، بنا به قوانین کاربردپذیری سایت باید در نهایت سادگی باشد .
اما سادگی این سایت تقلبی است. برای درک بهتر به مثال توجه کنید: جستجوی گوگل ذاتا ساده است و نیاز به راهنمایی ندارد، فیسبوک هم همینطور. این بدان معنی است که شما برای استفاده از امکانات این سایتها نیاز چندانی به یادگیری نداردید و استفاده از آنها راحتتر است، اما در مقابل وقتی شما یک سایت پیچیده با راهنما دارید به این معنی است که کاربر باید راهنما را بخواند تا بتواند از سایت استفاده کند. یعنی سایت شما پیچیده است اما شما نقشه راه را میدهید و این باعث ساده شدن راه نمیشود.
پس خلاقیت کجاست؟ شما میتوانید خلاقیت داشته باشد اما خلاقیت قانونمند، به این مفهوم که شما یک سری قوانین که همان قوانین کاربردپذیری است را رعایت کنید. بحث تعادل میان کاربردپذیری و خلاقیت بسیار وسیع است و امیدوارم در پستی جداگانه به بررسی این موضوع بپردازیم.
طراحینامریی:
حال به سراغ بحث اصلی میرویم. طراحی نامریی در واقع همان تکنیکهایی است که طراح برای همسو کردن کاربر و شکل دادن به مدل فکری او استفاده میکند. همانطور که میدانید و در پست قبل هم کمی به آن اشاره شد، مدل فکری کاربر، طراح، برنامهنویس و مشتری، متفاوت و در بعضی از نقاط متناقض است . کاربر با خواندهها و شنیدههایش از محصول شما یک تصویر ذهنی دارد و بر اساس آن از شما و محصولاتتان انتظار دارد حال تصورکنید اگر این دو بسیار متفاوت باشند چه فاجعهایی پیش خواهد آمد.
پس کاربر را به خاطر تصوراشتباه نمیتوان ملامت کرد.از زاویه دید کاربر اینگونه به نظر میرسیده است. این در واقع ضعف در اطلاعرسانی صحیح و عدم درک نیازها و توقعات کاربر است، شما باید با طراحی نامریی یعنی استفاده از المانهایی که برای کاربر معنادار است خود را معرفیکنید .
تا اینجا به کلیات بحث پرداختهایم حال به سراغ چند نمونه خوب میرویم تا با بررسی آنها مفهوم را بهتر لمسکنیم.
این تصویر آنقدر واضح است که نیاز به ذرهایی توضیح ندارد.همانطور که میبینید تعداد شیها در تصویر دوتاست. در پست قبل هم اشاره شد، برای وجود هر شی در طرح باید دلیلی وجود داشته باشد. در این تصویر با توجه به تم رنگ حتی مفهوم گرم یا سرد بودن عطر هم منتقل میشود.
حتما به لوگو بالا دوبار نگاه کردید و دو معنای مرتبط را متوجه شدید. همانطور که در تصویر میبینید اگر حتی متن زیر لوگو هم نبود شما میتوانستید حدس بزنید که این لوگو مربوط به کدام موضوع است. در عین سادگی حجم قابل توجهی از اطلاعات با یک یا چند نگاه منتقل میشود.
نمونههای دیگری از این سبک طراحی:
آنچه در همه این طرحها مشترک است این مورد است که یک لایه معنایی بالاتر از آنچه دیدید وجود دارد که این اشکال را به هم مرتبط میکند. مثلا در مورد لوگوی دوم، طراح از مدل تاج و پرده تئاتر الهام گرفته و با ترکیب این دو، مفهوم تئاتر سلطنتی را رسانده است. همه ما با این دو شی آشنا هستیم پس منظور طراح را درک میکنیم. این اشتراکهای ما و کاربران است.
اما گاهی بعضی از مفاهیم در فرهنگهای متفاوت معنایی چندگانه به خود میگیرند و شما به راحتی نمیتوانید از آنها استفاده کنید. پس در انتخاب اشکال و رنگها دقت نمایید.
استفاده از احساسات و افکار کاربر:
به تصویر زیر نگاه کنید. حتی اگر انگلیسی هم ندانید می توانید بفهمید که این یک نرمافزار برای یادآوری کارهاست. اما چه چیزی باعث میشود شما اینگونه فکرکنید؟
همانطور که میبینید فرم کلی برنامه مانند یک کلاسور است، چیزی که حتما با آن کارکردهاید یا حداقل کارکرد آن را میدانید. به محض دیدن این برنامه، فرم انبار، چک لیست و بررسی کارها برای شما تداعی میشود.
آنچه که کاربر میخواهد آن زمان که نیاز دارد به او بدهید:
نیازهای کاربر در زمانهای مختلف متفاوت است. اگر تمام اطلاعات را یکجا به کاربر بدهیم و او را مجبور به جستجو کنیم کاربر احساس سردرگمی میکند و همین برای داشتن احساس بد در مورد محصول شما کافی است .
نمونه خوب:
کاربر در نگاه اول میخواهد کارهای مهمتر را ببیند، برنامه این کار را انجام داده، کاربر در نگاهاول عدد داخل مربع قرمز را میبیند و میفهمد یک کار مهم را باید انجام دهد. کاربر نمیخواهد چیزی از جا بماند، برنامه اینرا هم برآورده کرده است. بقیه کارها به صورت دستهبندی شده در اختیار کاربر است. تمام اطلاعات یکجا به او داده نشده است.
همانطور که در پست قبل گفته شد کاربر نمیخواند بلکه اسکن میکند، برای همین این برنامه از رنگها استفاده میکند. کاربر هرجا آن رنگ قرمز را ببیند میداند یک مطلب مهم است و در نگاهاول آن را متوجه میشود. در این برنامه از کلمه صندوق پیام استفاده شده که برای همه معنی و عملکرد آن مشخصاست. همچنین در سمت چپ حالت فولدربندی که یک نوع منوی کلی است. دیگر اینکه از آیکون و متن با هم استفاده شده یعنی کاربر را هرچه بیشتر مطمئن میکند که درست فکر میکند، دلیل دیگر آن هم همان داستان اسکن کردن است.
با کاربر ارتباط احساسی داشته باشید:
سعی کنید در نظر کاربر آشنا باشید و کمتر او را مجبور به فکرکردن کنید. خواستههای وی را خالی از دانش ندانید، چرا که شما برای کاربر طراحی می کنید .
حتما وبلاگهایی را دیدهاید که سعی میکنند زیاد به کاربر نزدیک شوند. از نحوه نوشتار گرفته تا عکسها و شکل سایت. ما به دنبال اینگونه صمیمیت نیستیم. این روش به شکست میانجامد. چرا؟ زیرا شما باید به حریم شخصی کاربر احترام بگذارید و سعی نکنید خیلی سریع به او و احساساتش نزدیک شوید .
شما ابتدا باید خود را ثابت کنید تا بتوانید اعتماد کاربر را جلب نمایید. به طور مثال وبلاگ رسمی گوگل را با یک وبلاگ لطیفه پر طرفدار مقایسه کنید. کاربران گوگل هیچگاه نمیخواهند گوگل آنگونه به آنها نزدیک شود، زیرا کاربر خود را بخشی از گوگل میبیند و حاضر نیست شخصیت گوگل با این کار زیر سوال برده شود. این صمیمت را میتوانید با توجه مناسب به نظرات کاربران و پاسخ دادن به آنها ایجاد کنید، آنگاه کاربر شما را دوست خود میداند. هرکسی باید مناسب با موقعیت خود رفتار کند.
هیچگاه بر سر کاربر منت نگذارید:
اگر شما سخت تلاش کردهاید و یک مقاله باکیفیت تولید کردهاید دلیل نمیشود که همه آن را بفهمند و از آن تعریف کنند. شما برای برآورده کردن نیازهای خودتان این کار را انجام میدهید، این در واقع یک معامله است. اگر توقع شما برآورده نشد به این معنی است که اشتباه فکرمیکردید؛ کاربر همان کاربر است.
جمعبندی:
مبحث کاربردپذیری همچنان ناگفتههای بسیار دارد اما برای این پست به همین میزان اکتفا میکنیم.
تا اینجا آموختیم که از تصاویر نباید صرفا جهت پرکردن فضا استفاده کرد، شما با مجموعهای از ابزارها با کاربر ارتباط برقرار میکنید که همه آنها مهمهستند. سعیکنید کارتان دارای اتحادی باشد که کاربر در هرلحظه خواندن مطالب حس کند در سایت شماست. اهداف خود را یکسو کنید، مهمترینها را انتخاب نمایید و همه مسایل را براساس آن شکل دهید. تمام این داستانها برای این است که شما به هدف خود برسید.
طراحیوب فراتر از ترکیب رنگ و طرح است. شما یک وسیله ارتباطی طراحی میکنید پس طوری طراحی کنید که کاربر به سادهترین وجه به مقصود خود برسد. اهداف خود را در اولویت دوم قراردهید تا کاربران، شما را نا امید نکنند.
منابع:
Simple and Usable Web, Mobile, and Interaction Design
smahing book
smashingmagazine.com
baback
با تشکر از تلاشی که برای نوشتن این مقاله انجام دادی! بسیار عالی بود.
خوشحالم که مطالب هدف دارت ادامه داره و به طراحان وب فارسی کمک میکنی تا در نهایت دقت و ظرافت کاری رو انجام بدن.
منتظر ادامه مطالب مفیدت هستم
مسعود گودرزی
سلام داوود جان عالی بود خسته نباشی
مهدی شریف
عالی بود، بسیار عالی، همین!
حسين
خسته نباشيد
آرش رسول زاده
بسیار زیبا بود.
سید جلال
بسیار عای – خیلی خوب بود – ممنونم
مهندس ندا
بسیار عالی در کنار متن خوب عکسای جالبی گذاشته اید … موفق باشید
وحید
داری به وب پارسی خدمت می کنی
عالیه
دمت گرم
پیام
ممنون که به بهتر شدن وب فارسی کمک می کنید
امیدوارم موفق باشید
ati
متشکر و سپاس گزار
reza
عالی بود . موفق باشید
الزا
با سلام عالی بود.موفق باشید
محمود
سلام
هرچی بگم کم گفتم
فقط اینو میدونم که خیلی گلی
مرسی
saeidrad
عالی . واقعا ممنونم.اطلاعات خیلی خوبی توی متن بود
علی
مرسی ادامه بدین …
سوران
خيلي ممنون از مطالب خوبتون
من تازه با اين سايت آشنا شدم و اونو مفيد و پر از مطالب كابردي يافتم
خسته نباشيد باز هم منتظر مطالب خوبتون هستيم
من
برنامه ای که توی قسمت نمونه ی خوب بود اسمش چیه؟؟؟
Farhad
خیلی جالب بود
ممنون
ریبوار
ممنون از مطلب پرکاربردتون،چیزی که اکثر ما بهشون توجه نمی کنیم و اطرافمون هستند.
شایان
بسیار عالی بود واقعا ممنون
علیرضا
سلام
تشکر فراوان
موفق باشید
misagh jafari
بسیار عالی ممنون
Arya
جالب بود. متشکرم.
باید به کاربر احترام گذاشت. استفاده ابزاری از کاربران نیز درست نیست.
Rahim
بسیار آموزنده و عالی بود
ممنون بابات اطلاعاتی که در اختیار ما میگذارید
نسرین
خیلی خوب بود ممنونم.
حسن احمدی
فوق العاده است از نظر من این سایت کاربرد پذیری و تجربه کاربری را با هم تقدیم کاربرانش کرده زیرا الان من حدود120 دقیقه از سایت استفاده می کنم
آرش
مثل همیشه عالی بود…