طراحی تعاملی وبسایت یکی از بهترین روش‌های جلب کاربر سخت پسند امروزی و رقابت در بازار اشباع شدۀ وبسایت‌های اینترنتی است. وبسایت‌های استاتیک و معمولی شاید در دوران کودکی اینترنت جذاب و جدید بودند، اما برای مخاطب امروزی چیزی بیشتر از فسیل‌های خشک انعطاف‌ناپذیر نیستند.
روش‌های طراحی مدرن و کاربردی امروز مثل طراحی تعاملی وبسایت همه بر پایۀ اصول دقیق روانشناسی و تجاری طراحی شده‌اند تا به یک هدف خدمت کنند: ایجاد حس رضایت بیشتر در کاربر برای استفادۀ مستمر از سرویس شما و نزدیک‌تر کردن شما به هدفتان؛ حالا این هدف هرچیزی که می‌خواهد باشد، از فروش محصولتان گرفته تا استفادۀ بیشتر مخاطبان از سرویستان.
در این مقاله قصد داریم تا ببینیم طراحی تعاملی وب دقیقا به چه معناست و اصول اولیه و اساسی حاکم بر آن چیست.
طراحی تعاملی یعنی چه؟
تمام شاخه‌های کاری و علمی دنیا تئوریسین‌هایی دارند که بر اساس اصول به‌خصوصی تئوری‌پردازی می‌کنند و قوانین خاصی برای آن شاخه تعیین می‌نمایند؛ ولی در بسیاری موارد این قوانین، در عمل نتیجۀ مطلوبی ندارند.
ولی اصول و قواعدی که برخاسته از پژوهش و مطالعۀ عملی سوژۀ مورد نظر است می‌تواند نتیجۀ بسیار بسیار بهتری داشته باشد. روش طراحی تعاملی دقیقا برخاسته از همین مطالعۀ میدانی است؛ یعنی مطالعۀ رفتار کاربر.
روش طراحی تعاملی ایجاد یو آی یا همان رابط کاربری بر اساس منطق رفتار و عملکرد و عادات کاربر است. هدف اصلی این است که بر اساس عادات شناخته شدۀ مخاطب، نزدیک‌ترین تجربه به چیزی که مخاطب با آن راحت است را در اختیارش قرار بدهیم. در واقع طراحی تجربۀ کاربری ما صرفا بر اساس رفتار خود کاربر است. اگر کمی به آن فکر کنید می‌بینید که این اتفاقا منطقی‌ترین و عاقلانه‌ترین کار ممکن است.
![طراحی تعاملی وبسایت چیست]()
طراحی تعاملی شامل چه چیزهایی می‌شود؟
در طراحی تعاملی طراح با استفاده از مواد اولیۀ مختلف از جمله اسکریپت‌های متنوع و نرم‌افزارهای مخصوص محیطی برای کاربر می‌سازد که کاملا پویاست و مشارکت او را می‌طلبد. این موضوع علاوه بر راهنمایی دقیق کاربر برای رسیدن به خواسته‌اش، میزان مشارکت‌پذیری سایت را نیز بالا می‌برد و در نتیجه میزان احساس رضایت کاربر هم افزایش پیدا می‌کند.
فرض کنید با دو وبسایت فروشگاهی سر و کار داریم که یکی‌شان فقط محصولات را در تایل‌های 20تایی در صفحات مختلف چیده و شما باید در بین صفحات اسکرول کنید تا محصولی که می‌خواهید را پیدا کنید. البته گزینۀ سرچ هم دارید ولی خوب شاید دقیقا ندانید دنبال چه چیزی می‌گردید.
جست‌و‌جو بین 50 تا صفحۀ محصول هم که واقعا آزار دهنده است. وبسایت دوم کلی فیلتر و گزینه سر راهتان گذاشته تا بتوانید محدودۀ جست‌وجویتان را محدود کنید. می‌توانید برند مورد نظرتان را انتخاب کنید. محدودۀ قیمت را مناسب با بودجه‌تان تنظیم کنید. فیلتری روی رنگ محصول اعمال کنید تا مثلا فقط محصولات آبی رنگ را برایتان نمایش بدهد و خیلی چیزهای دیگر.
شخصا کدام وبسایت را ترجیح می‌دهید؟ البته که امروزه اکثر وبسایت‌های فروشگاهی‌ای که می‌بینید، تقریبا شکل و شمایل و امکاناتی این چنینی دارند ولی دلیل آن است که وبسایت‌هایی که اینطور نیستند یکی یکی به حاشیه رانده می‌شوند.
پنج بعد طراحی تعاملی چیست؟
برای درک بهتر اینکه طراحی تعاملی شامل چه مواردی می‌شود، می‌توانیم از مدل سادۀ "پنج بعد طراحی" تعاملی استفاده کنیم.
بعد اول: واژه‌ها و عبارات و اصطلاحات
تمام متنی که استفاده می‌کنید، به‌خصوص آن عبارات و واژه‌هایی که در تعاملاتی چون برچسب‌ها و دکمه‌ها به کار می‌روند، باید قابل درک و آسان انتخاب شوند تا مخاطب را سردرگم نکنند.
وظیفۀ این عبارات این است که اطلاعات را به کاربر منتقل کنند، ولی نباید چنان بیش از حد باشند که باعث آشفتگی او بشوند.
بعد دوم: ارائه‌های بصری
این بعد شامل تمام المان‌های بصری و گرافیکی می‌شود. از عکس‌ها و تصویر‌هایتان گرفته تا آیکون‌ها و تایپو‌گرافی و هر المان بصری دیگری که کاربر با آن تعامل دارد. بعد دوم را می‌توان کامل کنندۀ بعد اول دانست.
بعد سوم: اشیای فیزیکی/ فضای کاری
کاربران چطور با اشیای فیزیکی تعامل دارند؟ موس؟ کیبورد؟ تاچ پد؟ در چه محلی تعاملاتشان را انجام می‌دهند؟ در یک سالن پر رفت و آمد و از طریق نرم‌افزار مخصوص روی کامپیوتر؟ یا وقتی ریلکس کرده‌اند و روی مبل خانه‌شان لم داده‌اند؟
بعد چهارم: زمان
بحث زمان بیشتر مربوط به رسانه‌هایی می‌شود که با گذر زمان دستخوش تغییر می‌شوند.
بعد پنجم: رفتارها
بعد رفتارها شامل تمامی رفتارهای کاربران می‌شود. از احساساتشان تا پرسش‌هایی که درمورد محصولات دارند.
5 بخش کلی طراحی تعاملی
باب بکسی در مقاله‌ای در سال 2002 میلادی به بررسی عمیق طراحی تعاملی سایت پرداخته است.
او در این مقاله طراحی تعاملی را به 5 موضوع کلی تقسیم کرده که در ادامه به آن‌ها می‌پردازیم.
• برقراری ارتباط میان ماشین و انسان. منظور ارتباطی است که کاربران با دستگاهشان خواهند داشت.
• کنش/واکنش که روی نحوۀ تعامل‌های کاربر تمرکز دارد.
• وضعیت: به کاربران اطمینان خاطر می‌دهد که هر آنچه در نرم افزار رخ می‌دهد و دلیل آن به اطلاعشان می‌رسد و چیزی نیست که دور از چشمشان اتفاق بیفتد. • جریان کار: ایجاد اطمینان از این موضوع است که کاربر می‌داند با استفاده از هر ابزار یا فیچر قرار است به چه نتیجه‌ای برسد.
• در نهایت سوء عمل که اشتباهات ناگزیر را مد نظر قرار می‌دهد.
![طراحی تعاملی وبسایت چیست]()
موارد استفاده از طراحی تعاملی
طراحی تعاملی فقط محدود به وبسایت‌های اینترنتی نمی‌شود و در انواع و اقسام قالب‌های دیگر رسانه نیز کاربرد دارد. مثلا در طراحی اپلیکیشن های موبایلی استفاده از طراحی تعاملی بسیار پر‌کاربرد و مهم است.
حتی شاید بتوان گفت که طراحی یو‌آی موبایل بدون در نظر گرفتن متدهای طراحی تعاملی اگر غیر ممکن نباشد، نتیجۀ خوبی هم ندارد. یکی دیگر از موارد استفاده از طراحی تعاملی که بسیار کاربردی است، بازی‌های کامپیوتری هستند.
حتی می‌توان گفت پیش از اینکه این نوع طراحی اسم و رسمی پیدا کند و برای نرم‌افزارهای موبایلی و وبسایت‌های اینترنتی از آن استفاده شود، در بازی‌های کامپیوتری مورد استفاده قرار می‌گرفته است.
تمرکز طراحی تعاملی بر چیست؟
پاسخ این سوال بستگی به عوامل گسترده‌ای دارد. بسیار مهم است که پیش از اقدام به طراحی بدانید دقیقا با چه چیزی طرف هستید و نیت و هدفی که از این‌کار دارید چیست.
برای تشخیص اینکه تمرکز طراحی تعاملی باید روی چه مواردی باشد، لازم است به تعاملات و نحوۀ رفتار کاربر در پلتفرمتان رجوع کنید و در واقع پاسخ را در خود کاربر بیابید.
کاربر چطور از سیستم شما استفاده می‌کند؟ برای رفع چه نیازهایی به سراغ شما آمده است؟ نحوۀ تعامل کاربر با شما چطور است؟ برای راحت‌تر شدن درک این موضوع لیستی از پرسش‌هایی که باید پاسخشان را بدانید تهیه کردیم که می‌توانند برای طراحی تعاملی بهتر به نجاتتان بیاید.
1. ظاهر رابط کاربری‌تان چطور است؟ کاربر می‌تواند از ظاهر آن سر‌نخ خوبی به دست بیاورد.
2. پیش از اینکه کاربر مشغول فعالیت شود، چه اطلاعاتی در اختیار او قرار می‌دهید؟
3. برای جلوگیری از گم‌گشتگی و به بی‌راهه رفتن کاربر، چه محدودیت‌هایی می‌توانید روی گشت‌و‌گذار او اعمال کنید؟
4. نوع تعامل کاربر چطور است؟ با استفاده از موس و کیبورد جستجو می‌کند یا با انگشت و قلم و بر روی صفحۀ کوچکتر؟
5. از فرمت‌های به نام و آشنا استفاده کرده‌اید یا نه؟
6. کاربر در رابط شما می‌تواند چه دستوراتی بدهد و چه فعالیت‌هایی داشته باشد؟
7. تایمی که از زمان اعمال دستور کاربر تا انجام و اتمام آن می‌گذرد چقدر است؟
8. از لبه‌ها و گوشه‌های صفحه به بهترین شکل استفاده کرده‌اید تا المان‌های تعاملی را در بهترین موقعیت ممکن قرار بدهید؟
9. از اصول اولیه و استاندارد‌های این نوع طراحی آگاهید؟ از آن‌ها پیروی می‌کنید؟
10. المان‌‌هایی که در طراحی‌تان از آن‌ها استفاده کرده‌اید سایز مناسبی دارند؟ اندازۀ آن‌ها در مقایسه با المان‌های دیگر استاندارد است؟
11. آیا اخطارهای خطایی که به کاربر داده می‌شود، روش نجات و راه حلی هم برای مشکلش به او ارائه می‌دهند؟
![طراحی تعاملی وبسایت چیست]()
12. پس از تصمیم‌گیری و انجام عمل از سوی کاربر چه نوع بازخوردهایی به او می‌دهید؟
13. خودتان را جای کاربر گذاشته‌اید؟ به‌عنوان کاربر از سیستمی که طراحی کرده‌اید احساس رضایت داشته‌اید؟
طراحی تعاملی و ریسپانسیو بودن
یکی از بخش‌های مهم طراحی تعاملی که شاید پیش از هر چیز دیگری به چشم بیاید ریسپانسیو بودن وبسایت است.
ریسپانسیو بودن به این ایده اشاره دارد که وبسایت شما در هر نمایشگری به درستی و متناسب با ابعاد آن نمایش دباده شود و تمام المان‌های آن در تناسب با سایز صفحه و یکدیگر قرار بگیرند.
طراحی ریسپانسیو بر‌اساس رفت و برگشت اطلاعاتی و اصطلاحا پرس‌و‌جوهای سی‌اس‌اس انجام می‌پذیرد. بسته به دستگاه کاربر برخی از این اطلاعات قوانین خاصی را می‌طلبند و برخی دیگر نا‌دیده گرفته می‌شوند.
در واقع در این روش محتوا همان محتوا است و چیزی تغییر نمی‌کند. فقط با طرح بندی CSS در هر دستگاه ظاهری متمایز خواهد داشت. در طراحی تعاملی اندازه‌ها بر اساس درصد و نه پیکسل هستند.
چرا که صفحات مختلف ممکن است اندازه‌ها و رزولوشن پیکسلی متفاوتی داشته باشند. ولی وقتی بر‌اساس درصد فضای نمایش اندازه‌بندی کنیم، به مشکل به‌هم ریختگی طراحی در صفحات مختلف بر نخواهیم خورد.
وظایف طراح تعاملی
در ابتدا بیایید به این سوال اساسی پاسخ بدهیم که طراح تعاملی کیست؟
طراح تعاملی می‌تواند بخشی از تیم طراحی، توسعه، خلاقیت یا بازاریابی باشد ولی وظیفه‌اش یکسان است. قرار است در تدوین استراتژی طراحی، شناسایی تعاملات اصلی، ساخت نمونۀ آزمایشی، آپدیت بودن محصول و موارد این‌چنینی راهنما و مشاور تیم باشد.
البته شاید چیزی که گفتیم در ظاهر کمی پیچیده به نظر برسد و گسترۀ چتری بزرگی از وظایف را شامل شود. تعریف ساده‌اش در مورد وبسایت این است که طراح تعاملی قرار است اطمینان حاصل کند که کاربران تجربۀ رضایت بخشی از تعاملشان با سایت داشته باشند.
هر چقدر شرکت سفارش دهنده بزرگتر باشد و بودجۀ بیشتری داشته باشد، مشاغل و اعضای تیم تفکیک شده‌تر خواهند بود. در تیم‌های کوچک احتمالا طراح وظایف دیگری هم به عهده بگیرد.
ولی در شرکت‌های بزرگ ممکن است حتی بخش طراحی تعاملی را دو نفر یا یک تیم به عهده بگیرند.
استراتژی طراحی در طراحی تعاملی چیست؟
تهیۀ استراتژی درست به اهداف کاربر بر می‌گردد. مجددا این موضوع هم بستگی به ابعاد پروژه و شرکت مورد بحث دارد.
در شرکت‌های کوچکتر ممکن است طراح مجبور باشد خودش وظیفۀ تحقیقات کاربری را هم به عهده بگیرد تا پیش از اینکه به طراحی استراتژی بپردازد و آن را به تعاملات مورد نظر تبدیل کند، به درستی از اهداف کاربر مطلع باشد.
از موارد دیگری که شامل استراتژی می‌شوند می‌توان به تحقیقات کاربری یعنی یافتن کاربران واقعی و رتبۀ اول، ساخت پرسنای کاربری و انجام آزمایشات متنوع کاربری و آزمودن دسترسی پذیری و موارد دیگر اشاره نمود.