شروع طراحی واکنشگرا – Responsive

Responsive Web Desgin نوعی از تفکر در طراحی وب است که نسبت به طرح دیدی فراگیر دارد که کاربر با هر نوع دستگاهی وبسایت را متناسب با نیاز و اندازه صفحه نمایش دستگاه ببیند.

برای روشن شدن مسله به معنی کلمه Responsive در فرهنگ لغت Longman نگاهی می‌اندازیم:

Responsive | Longman Dictionary

Responsive | Longman Dictionary

کلمه Responsive را به معنی عکس العمل سریع در جهت مثبت معرفی می‌کند، Responsive Web Design که از آن در نسخه جدید ووردپرس فارسی به عنوان “واکنشگرا” نام برده، به مفهوم جابجایی، نمایش و یا عدم نمایش عناصر صفحه است که نسبت به رزولوشن دستگاه بر اساس اولویت نمایش داده شوند.

این نوع از طراحی موضوعی است که از سال‌ها پیش با عناوینی چون ”Progressive enhancement”, “Adaptive web design”, “Graceful degradation” کم و بیش مطرح شده بود اما اصطلاح Responsive Web Design توسط Erhan Marcotte با ظهور CSS3 و قابلیت Media Queries آن به سرعت توسعه یافت و مورد توجه قرار گرفت.

با گسترش روزافزون موبایل و تبلت‌ها و  وجود بیش از ۴ میلیارد موبایل در سراسر جهان دیگر نمی‌توانیم فرض کنیم سایت ما بر روی یک مونیتور با رزولوشن متوسط دیده خواهیم شد. RWD تفاوت‌های مهمی با ساخت نسخه مجزا برای موبایل دارد:

مشکلات طراحی نسخه مجزا برای موبایل: 

  • ایجاد URL مجزا برای نسخه موبایل و وب: که در هنگام اشتراک گذاری یک لینک شما ممکن است لینک نسحه موبایل را به اشتراک بگذارید اما کاربری دیگر با کامیپوتر دسکتاپ لینک شما را باز کند-یا بر عکس-.
  • ایجاد قالب‌های مختلف برای هر نسخه و استفاده از فناوری‌ها و طراحی‌های متفاوت باعث بوجود آمدن سربار و افزایش کار طراحی و پیاده‌سازی وبسایت می‌شود.
  • کاهش توجه به کاربران: اگر عده‌ایی روی نسخه موبایل و عده‌ایی روی نسخه دسکتاپ کار کنند، چه کسی دارای یک چشم انداز واحد و یکپارچه از تجربه کاربری بر روی همه‌ی کاربران شما خواهد داشت؟
  • کاربران موبایل شناسایی می‌شوند و نسخه موبایل نمایش داده می‌شود حال اگر کاربری با تبلت یا دستگاهی با اندازه نامتعارف وارد سایت شود، آیا نسخه‌ایی مناسب آن وجود دارد؟
ویژگی‌های طراحی واکنشگرا:
  • توجه به نسخه موبایل از ابتدا با رویکر معروف “Mobile First” به این معنی که شما اولویت کار را به تمرکز بر نیاز کاربر میگذارید.
  • پیاده‌سازی یک وبسایت که پاسخگو موبایل، تبلت، کامپیوتر دسکتاپ و ایده آل برای هر نوع دستگاهی که در آینده ممکن است وارد بازار شود.
  • وجود یک URL مشخص که در هر دستگاهی نمایش متناسبی خواهد داشت.

مبحث RWD را به دو بخش تقسیم می‌کنم که در آینده بر همین اساس این موضوع را دنبال کنیم:

۱- تفکر Responsive:

برای روشن شدن این مسله به مثال زیر توجه کنید:

مثال خوبی که در این زمینه می‌توان پیدا کرد، وب‌سایت‌های رستوران است. معمولا کاربران کامپیوترهای دسکتاپ برای دیدن منو رستوران، دیدن عکس‌هایی از رستوران و غذاها و حتی دیدن یک تور ویدیویی وارد وبسایت می‌شوند اما کاربری که با تلفن همراه وارد سایت می‌شود به احتمال زیاد برای پیدا کردن آدرس، تلفن و یا فرم رزور وارد شده.

 

یکی از موارد مهم در طراحی اینگونه سایت‌ها، داشتن تفکر Responsive است-که بسیار نزدیک به مباحث تجارب کاربری(UX) می‌شود-. با توجه به معنی کلمه responsive: عکس العمل سریع در جهت مثبت: عکس العمل سریع استفاده درست از ابزار RWD است و جهت مثبت درواقع تفکر برای چیدمان درست اجزا در صفحه می‌باشد.

۲- ابزار Responsive:

  • تکنیک‌های طراحی واکنشگرا
  • تصاویر و ویدیو‌
  • خبرنامه‌ها(ایمیل)
  • الگو‌ها
  • Frameworks
  • JavaScript & jQuery
  • اشکال زدایی و آزمایش طرح واکنشگرا

نمونه‌های طراحی وب واکنشگرا:

برای درک بهتر این موضوع پیشنهاد میکنم از سایت‌های زیر دیدن کنید و با تغییر اندازه صفحه به چیدمان جدید سایت توجه کنید :

پی‌نوشت:

  1. در مطالب آینده به معرفی ابزار و تکنیک‌های طراحی واکنشگرا می‌پردازیم.
  2. در حال آماده سازی یک قالب Responsive برای وبلاگ خودم هستم که در آینده برای استفاده کاربران ووردپرس خواهم گذاشت.

دیدگاه روانشناسان در طراحی تجارب کاربری(UXD)

با توجه به این که تصمیم گرفتم مطلب تکراری در وبلاگ منتشر نکنم و تمرکز را روی مباحث جدید بذارم، از تعاریف اولیه “طراحی تجربه کاربری” یا “User Experience Design” میگذرم. دوستانی که در این مورد اطلاعی ندارند، پیشنهاد میکنم قبل از خواندن این مطلب نگاهی به تعاریف اولیه طراحی تجربه کاربری(UXD) بیاندازند تا درک بهتری نسبت به این مقاله پیدا کنند.

احتمالا داستان فیل و کوران را شنیده اید:

نگاه روان شناسان به طراحی تجربه کاربری(UX)

نگاه روان شناسان به طراحی تجربه کاربری(UX)

از شش مرد نابینا که تا به حال فیل ندیده بودند، خواسته شد که به فیل دست بکشند و چگونگی این موجود را بیان کنند:
یکی از ایشان بر پای فیل دست کشید و آن را چون ستونی دانست؛ دیگری بر دم فیل دست کشید و گفت که فیل مانند ریسمانی‌است؛ سومین از آن‌ها خرطوم فیل را لمس کرد و گفت که فیل مانند شاخه درخت است؛ چهارمین نابینا بر گوش فیل دست کشید و گفت که فیل همچون بادبزن است؛ پنجمین مرد به شکم فیل دست کشید و فیل را چون دیواری دانست. آخرین مرد نابینا بر عاج فیل دست کشید و فیل را مانند شیپوری دانست.
مرد دانایی سخنان ایشان را شنید و به آن‌ها گفت که سخن همه شما درست است؛ اما اختلاف گفته شما برای این است که هر یک از شما یکی از اعضای فیل را دست کشیده‌اید؛ پس فیل همه خصایصی را که برشمردید، با هم داراست.

این داستان یادآور میشود که نمیشود به انسان از یک بعد نگاه کرد و هرکس با زمینه‌های مختلف، تحصیلات و تجربیات گوناگون به طراحی تجربه کاربری از یک سو نگاه کرده. برای رسیدن به یک طرح درست و کامل باید به ابعاد گوناگون یک انسان نگاه کرد.

Susan Weinschenk روانشناس است که طی مقاله‌ایی که در سایت UX Magazine منتشر کرده: مغز، سیستم بینایی، حافظه و انگیز در طراحی تجربه کاربری را مورد بررسی قرار داده.
نتیجه این بررسی رسیدن به آن تجربه‌هایی از فیل است که هر یک از ما درباره افراد میدانیم و میتوانیم در طراحی تجربه کاربری مورد استفاده قرار دهیم.

این مقاله نگاهی کوتاه به دیدگاه روانشناسان در شناخت ابعاد مختلف طراحی تجربه کاربری دارد:

  1. افراد نمی‌خواهند بیشتر از آن چیزی که لازم است فکر کنند
    • افراد حداقل کار ممکن را برای رسیدن به یک هدف انجام می‌دهند.
    • بهتره که خلاصه‌ایی از اطلاعات را به کاربر نشان دهید و اجازه دهید در صورت تمایل جزییات را ببیند(۱).
    • در طراحی به کیفیت قابل درک بودن اشیا دقت کنید(۲). به عنوان مثال اگر شئی در صفحه قابل کلیک است، مطمئن شوید که قابل کلیک بنظر می‌آید(در آینده درباره مفهوم Affordance و کارایی آن در طراحی وب بیشتر خواهم نوشت)
    • تنها ویژگی‌هایی که کاربران نیاز دارند را ارایه کنید. به افکار شخصیتان درباره اینکه کاربر چه چیزی نیاز دارد تکیه نکنید، ماجرای فیل را که یادتان هست: شما فقط یک بعد را میبیند پس درباره نیاز‌های کاربرانتان تحقیق کنید. تجربه نشان داده ارایه اطلاعات زیادی فقط مردم را گیج میکند.
    • از پیش‌فرض‌ها استفاده کنید. پیش‌فرض‌ها باعث می‌شوند مردم کار کمتری را برای رسیدن به هدف انجام دهند.
  2. افراد محدودیت‌هایی دارند
    • فقط اطلاعاتی را ارایه کنید که کاربر در آن زمان به آن احتیاج دارد.
    • چیدمان اطلاعات در صفحه به گونه‌ایی باشد که کاربر به راحتی بتواند آن را اسکن کند.
    • از عنوان‌ها با بلوک‌های کوتاه متن استفاده کنید.
    • افراد نمی‌توانند multitask باشند. این تحقیق به سادگی نشان دهنده این مسله است پس از کاربران انتظار چند کار همزمان را نداشته باشیم.
    • مردم خطوط کوتاه را ترجیح می‌دهند اما آن‌ها خطوط بلند را بهتر می‌خوانند! این یک مسله پیچیدست پس بین ترجیح یا کارایی تصیمیم بگیرید؟ این در مورد شما خیلی مهم است، البته همانطور که میدانید مردم درخواست‌هایی دارند که برای آن‌ها همیشه بهترین حالت نیست.
  3. افراد اشتباه میکنند
    • فرض کنید افراد اشتباه میکنند. اشتباهات را پیش‌بینی و جلوی آن‌ها را بگیرید.
    • اگر اتفاق افتادن خطایی خطرناک یا حل آن سخت است، قبل از اینکه کاربر آن عمل را انجام دهد صحت اطلاعات را بررسی کنید.
    • عمل خنثی کردن(undo) را آسان کنید.
    • جلوگیری از وقوع یک خطا همیشه بهتر از کمک به حل آن بعد از اتفاق افتادن است.
    • اگر یک عملی مستعد ایجاد خطاست، آن را به کارهای کوچکتر تقسیم کنید.
    • اگر کاربر یک خطایی ایجاد میکند و شما میتوانید آن را اصلاح کنید پس آن را درست کنید و به کاربر نشان دهید چه کار کرده‌اید.
    • در طراحی UX  به خطا‌های زیادی برمیخورید. بنابراین مطمئن شوید که زمان و انرژی برای گرفتن بازخورد کاربران و تکرار و آزمایش را دارید.
  4. حافظه انسان‌ها پیچیدست
    • مردم ذهنشان را ترمیم می‌کنند، این به این معناست که آن‌ها همیشه در حال تغییرند. کاربران را در عمل بررسی و از نتایج استفاده کنید.
    • حافظه ضعیف است و به سرعت تنزل می‌یابد و مقدار زیادی اشتباه میکند. مردم را مجبور نکنید چیزهایی را به‌یاد بیاورند که از یک کار یا یک صفحه به صفحه‌ی دیگر باید به خاطر میسپاردند.
    • تحقیقات نشان می‌دهد مردم فقط ۳ – ۴ مورد را در یک زمان به‌یاد می‌آورند.
  5. مردم اجتماعی‌اند
    • مردم همیشه تلاش کرده‌اند از تکنولوژی برای اجتماعی شدن استفاده کنند. این واقعیت از هزاران سال پیش بوده است.
    • مردم برای گرفتن راهنمایی به یکدیگر نگاه می کنند که چه کار کنند، بخصوص زمانی که نا مطمئن اند. این اعتبار سنجی اجتماعی نامیده میشوند. به همین دلیل هم در وبسایت‌ها امتیاز و نظر دهی خیلی قوی عمل میکند.
    • اگر مردم کار‌ی را هم‌زمان با هم انجام دهند(رفتار همزمانی) آن  کار بین آن‌ها پیوستگی ایجاد می‌کند. که درواقع این‌ها واکنش‌های شیمیایی در مغز است. خنده نیز چنین همزمانی و پیوستگی را بین مردم ایجاد می‌کند.
    • اگر شما لطفی به من بکنید من احساس میکنم مدیونم و باید کار شما را جبران بکنم(عمل متقابل). تحقیقات نشان می‌دهد اگر شما میخواهید مردم یک فرم را پر کنند به آن‌ها چیزی را بدهید که میخواهند و بعد از آن‌ها بخواهید تا فرم شما را پر کنند، نه بر عکس.
    • وقتی شما می‌بینید کسی کاری را انجام می‌دهد یک بخش در مغز شما فعال می‌شود که آن کار را خودتان انجام دهید(این نرون‌های آینه‌ای نامیده می‌شود).  ما از نظر زیست‌شناسی برای تقلید برنامه‌ریزی شده‌اییم. اگر میخواهید مردم کاری را انجام دهند، به آن‌ها نشان دهید که کس دیگری این کار را کرده است.
    • شما میتوانید فقط ۱۵۰ رابطه قوی داشته باشید. رابطه قوی به معنی رابطه با انسان‌هاییست که ارتباط فیزیکی دارید. اما میتوانید هزاران رابطه ضعیف داشته باشید که این بسیار موثر است(مانند ارتباطات در فیسبوک و دیگر شبکه‌های اجتماعی).
  6. جلب توجه
    • من شروع به فکر کردن درباره کل موضوع میکنم و اینکه چگونه با استفاده از طراحی رابط کاربری درست توجه کاربر را به هدف جلب کنم. جلب توجه و منحرف نشدن حواس کسی که به چیزی توجه کرده یکی از نگرانی‌های کلیدی است.
    • مردم برنامه‌ریزی شده‌اند تا به چیزی که متفاوت و جدید است توجه کنند. اگر شما چیزی متفاوت درست کنید، جلب توجه خواهد کرد.
    • شما می توانید از حواس برای جلب توجه استفاده کنید. رنگ های روشن، فونت های بزرگ، صدا ها توجه را جلب خواهند کرد.
    • حواس کاربران به راحتی پرت می‌شود. اگر در صفحه فلاش بزنید یا فیلمی ناخواسته پخش شود، مردم پریشان می‌شوند.
  7. افراد خواستار اطلاعاتند
    • افراد اغلب اطلاعات بیشتری از آن مقداری که پردازش می‌کنند میخواهند. داشتن اطلاعات زیادی حس انتخاب‌های بیشتر و انتخاب‌های بیشتر حس کنترل را  و حس کنترل باعث می‌شود مردم احساس کنند بهتر زندگی خواهند کرد.
    • انسان‌ها به بازخورد و عکس العمل نیازمندند. کامپیوتر نیازی ندارد که به کاربر بگوید فایل در حال بارگذاری است اما کاربر نیاز دارد که در جریان انجام کار قرار گیرد.
  8. پردازش ناخودآگاه
    • بیشتر پردازش ذهنی در ناخودآگاهی رخ می‌دهد.
    • اگر شما کاربر را به یک عمل کوچک مثل عضویت رایگان متقاعد کنید آن وقت احتمال اینکه بعدا به یک کار بزرگتر مثل ارتقا اکانت به اکانت پولی متقاعد شود خیلی بیشتر است.
    • بخش احساسی مغز از تصاویر و به خصوص عکس‌های انسان‌ها به اندازه یک داستان متاثر می‌شود. بخش احساسی مغز بیشترین تاثیر را بر تصمیم‌گیری ما دارد.
    • بخش احساسی و منطقی مغز هر دو بدون دانش آگاهانه عمل می‌کنند. بخش منطقی مغز مشخص میکند که چرا یک عملی را انجام میدهیم اما این دلیل کاملی بر انجام یک کار نیست.
  9. مردم مدل‌هایی می‌سازند
    • افراد همیشه یک مدل ذهنی دارند درباره یک شی خاص و یا یک وظیفه مشخص(مانند پرداخت قبض، خواندن کتاب).
    • مدل ذهنی که افراد در مورد یک عمل خاص دارند باعث می‌شود که کار با یک رابط کاربری برایشان ساده یا سخت‌تر شود.
    • برای ایجاد یک UX مفید، شما هم می‌توانید مدل مفهومی محصول و وبسایت را بر اساس مدل ذهنی کاربر پیاده کنید و یا  اینکه می‌توانید ذهن کاربر را آموزش دهید تا مدل ذهنی جدیدی برایش ایجاد کنید.
    • تشبیه‌ها به کاربران کمک می کنند که طرح‌های مفهومی را “درک” کنند. برای نمونه: ” این درست مثل خوندن یه کتاب میمونه”.
    • مهم‌ترین دلیل تحقیق درباره کاربران بدست آوردن اطلاعات درباره مدل ذهنی آن‌هاست.(مدل ذهنی و مدل مفهومی یکی از جالب‌ترین بحث‌ها در زمینه UXD است که در آینده بیشتر در موردش خواهم نوشت)
  10. سیستم بینایی
    • اگر صفحه به هم ریخته باشد، افراد نمی‌توانند اطلاعات را پیدا کنند. استفاده از دسته‌بندی اطلاعات می‌تواند به چشم کمک کند که روی موضوع تمرکز کنند.
    • چیز‌های که خیلی به هم نزدیک هستند، بنظر می‌آیند که باهمند.
    • از فونت در اندازه بزرگ و فونت‌هایی استفاده کنید که به راحتی خوانده شوند.
    • سخت‌ترین رنگ برای در کنار هم قرار گرفتن رنگ قرمز و آبی است. از قرار دادن این رنگ‌ها کنار هم خود‌داری کنید.
    • از رنگ برای ارتباط اجزا مرتبط در صفحه میتوان استفاده کرد. اما باید از راه‌های دیگر هم اطلاعات را برای افراد کور رنگ به‌هم مرتبط کرد.

پی‌نوشت:

  1. این کار بخشی از مفهوم Progressive disclosure که به بحث روی تکنولوژی طراحی تعامل می‌پردازد که اغلب برای تعامل بین کامپیوتر و انسان برای کمک به جلب توجه و تمرکز کاربر با کاهش به‌هم ریختگی و پراکندگی  استفاده میشود.
  2. کیفیت قابل درک بودن به جای کلمه Affordance به کار برده شده. اگر معادل مناسبی برای این کلمه دارید ممنون میشم پیشنهاد بدهید.

به نام بی نام دوست

برای من همیشه شروع جز سخت‌ترین بخش‌های هرکاری بود و حالا هم ماجرای انتخاب قالب و نوشتن اولین مطلب …

اما بهترین کار اینه که به ساده‌ترین روش و با خیالی آسوده شروع کرد  :)

پرهام خوشبخت هستم، علاقه و کارم طراحی و توسعه وب است و البته گه‌گاهی به هنر و عکاسی هم میزنم. (اطلاعات بیشتر)

تصمیم دارم در این وبلاگ از تجربیات و چالش‌هایی که در کار برخورد میکنم بنویسم، موضوعاتی نظیر:

محتوای این وبلاگ بسته به فعالیت من در زمینه کاری‌ام دارد، درواقع اینجا نتیجه فعالیت‌هایم در محیط کار را به صورت معرفی یا آموزش استفاده بهتر از یک سیستم یا تکنیک ارایه خواهم کرد.