https://virgool.io/feed/@amirhpourmand Product Designer / Contact me : amirhpourmand75@gmail.com fa 2026-04-14 21:40:41 https://files.virgool.io/upload/users/62693/avatar/9y3mSH.png?height=120&width=120 https://virgool.io/@amirhpourmand https://virgool.io/UXWorld/what-is-interaction-design-xvrrudwlxupw طراحی تعامل (IxD) ساختار و رفتار سیستم‌های تعاملی رو تعریف می‌کنه. طراحان تعامل تلاش می‌کنن تا روابط معناداری بین افراد و محصولات و خدماتی که استفاده می‌کنن، از رایانه‌ها گرفته تا دستگاه‌های تلفن همراه و لوازم خانگی و فراتر از اون، ایجاد کنن.طراحی تعاملی رو می‌شه در یک جمله کوتاه (اما نه ذاتا ساده و تقلیل شده) این طور توصیف کرد:"به طراحی ارتباطات و تعاملات دوسویه و مستقیم بین کاربر و محصول، طراحی تعامل یا اینتراکشن دیزاین گفته می‌شه."تعامل بین یک کاربر و یک محصول اغلب شامل عناصری مانند زیبایی شناسی، حرکت، صدا، فضا و بسیاری موارد دیگه است. و البته، هر یک از این عناصر می‌تونن زمینه‌های تخصصی‌تری مانند طراحی صدا برای ساخت صداهای مورد استفاده در تعاملات کاربر رو شامل بشن.طراحی تعامل و طراحی تجربه کاربریهم‌پوشانی زیادی بین طراحی تعامل و طراحی تجربه کاربری وجود داره. به هر حال، طراحی تجربه کاربری در مورد شکل دادن به تجربه استفاده از یک محصول هست و بیشتر بخش این تجربه شامل برخی از تعاملات بین کاربر و محصول می‌شن.طراحی تعامل بخشی از طراحی تجربه کاربری هستاما طراحی تجربه کاربری چیزی بیشتر از طراحی تعاملی صرف هست و همچنین شامل:مطالعه کاربر و یوزر ری‌سرچ (کشف کیستی کاربران در ابتدا)خلق پرسونای کاربر (چرا و تحت چه شرایطی اون‌ها از محصول استفاده می‌کنن؟)اجرا کردن تست‌های کاربری و تست کاربرد پذیری و غیره هم می‌شه ...۵ بُعد طراحی تعاملمدل مفید برای درک این که طراحی تعامل شامل چه چیزیه:Gillian Crampton Smith برای اولین بار مفهوم چهار بعد طراحی تعامل رو معرفی کرد که Kevin Silver، طراح ارشد تعامل در آزمایشگاه IDEXX، پنجمین بُعد رو به اون اضافه کرد.بُعد اول: کلماتکلمات به ویژه اون‌هایی که در تعاملات استفاده می‌شن مانند لیبل دکمه‌ها، باید معنی‌دار و قابل درک باشن. اون‌ها باید اطلاعات رو به کاربران منتقل کنند اما نه اونقدر که کاربر در اون اطلاعات غرق بشه.بُعد دوم: نمایش‌های بصریاین مربوط به عناصر گرافیکی مانند تصاویر، تایپوگرافی و آیکن‌هایی هست که کاربران با اون‌ها تعامل دارند. این‌ها معمولاً مکمل کلمات مورد استفاده برای انتقال اطلاعات به کاربران هستند.بُعد سوم: اشیاء فیزیکی یا فضاکاربران از طریق چه اشیاء فیزیکی با محصول تعامل دارند؟ لپ‌تاپ، با ماوس یا تاچ پد؟ یا گوشی هوشمند، با انگشتان کاربر؟ و کاربر در چه فضای فیزیکی این کار رو انجام می‌دن؟ به عنوان مثال، آیا کاربر هنگام استفاده از برنامه در گوشی هوشمند در قطار شلوغ ایستاده یا روی میز دفتر نشسته و در حال گشت و گذار در وب سایت هست؟ همه این‌ها بر تعامل بین کاربر و محصول تأثیر می‌ذاره.بُعد چهارم: زماندر حالی که این بُعد کمی انتزاعی به نظر می‌رسه، بیشتر به رسانه‌هایی اشاره داره که با زمان تغییر می‌کنه (انیمیشن، فیلم، صدا). حرکت و صداها نقش مهمی در ارائه بازخورد بصری و صوتی به تعاملات کاربران داره. همچنین میزان زمانی که کاربر برای تعامل با محصول صرف می‌کنه، نگران‌کننده است: آیا کاربران می‌توانند پیشرفت خود را پیگیری کنن یا مدتی بعد تعامل خود را از سر بگیرن؟بُعد پنجم: رفتارشامل مکانیزم یک محصول می‌شه : کاربرها چطوری در وب سایت عمل می‌کنن؟ کاربرها با محصول چگونه کار می‌کنن؟ به عبارت دیگه این که بُعدهای قبلی، تعامل با محصول رو چگونه تعریف می‌کنن؟ همچنین شامل عکس‌العمل‌های کاربرها و محصول می‌شه (به عنوان مثال پاسخ‌های احساسی یا فیدبک‌ها).اصول طراحی تعاملدر حالی که فهرست کردن همه اصول طراحی تعامل غیرممکنه، هنوز هم می‌شه چند حوزه کلی رو که به طور گسترده در این زمینه استفاده می‌شن، توصیف کرد:طراحی هدفمند : طراحی هدف محور یک سبک طراحیه که حل مسئله رو بالاترین اولویت قرار می‌ده. این رویکرد بر ارضای نیازها و خواسته‌های خاص فردی که از محصول استفاده خواهد کرد، که هدف طراحی تعامل است، تمرکز دارد.قابلیت استفاده خوب : قابلیت استفاده به این سوال پاسخ می‌ده که "آیا مردم می‌تونن از این محصول استفاده کنن؟" قابلیت استفاده خوب یک نیاز اساسی برای طراحی تعامله.قابلیت یادگیری : کاربر جدید چقدر می‌تونه استفاده از رابط کاربری رو یاد بگیره؟کارایی : کاربران چقدر سریع می‌تونن وظایف رو انجام بدن؟میزان خطا : کاربران در هنگام تعامل با رابط کاربری چقدر خطا می‌کنن؟بازیابی خطا : آیا اون‌ها می‌تونن به سرعت از خطاها بازیابی بشن؟امکان اندازه‌گیری قابلیت استفاده با استفاده از زمان تکمیل کار و رضایت کلی وجود داره (آیا کاربران از استفاده از محصول لذت می‌برن؟).وقتی صحبت از تصمیمات واقعی طراحی می‌شه، طراحان تعامل اغلب خودشون رو با مدل ذهنی کاربر آشنا می‌کنن - ادراک یا بازنمایی که یک فرد در ذهن خود از محصولی که با اون تعامل داره داره. دانشی که از مدل‌های ذهنی به دست میارن به اون‌ها کمک می‌کنه تا سیستم‌های طراحی تجربه کاربری ایجاد کنن که احساس بصری داشته باشن.ارگونومیطراحان تعامل اصول فیزیولوژیکی رو در طراحی محصولات اعمال می‌کنن. هدف از این فرآیند کاهش خطای انسانی، افزایش بهره‌وری و افزایش ایمنی تعامل هست. طراحان تعامل اغلب از یک مدل پیش‌بینی حرکت انسان که به قانون فیتس (Fitts) معروفه، هنگام طراحی تعامل استفاده می‌کنن. این قانون می‌گه که زمان لازم برای حرکت سریع به یک منطقه هدف تابعی از نسبت بین فاصله به هدف و عرض هدف هست. قانون فیتس برای مدل‌سازی عمل اشاره استفاده می‌شه. این رو می‌شه هم هنگامی که عنصر رابط کاربری با دست یا انگشت لمس می‌شه و هم به صورت مجازی با استفاده از یک دستگاه اشاره‌گر اعمال می‌شه.قانون فیتسپاسخ‌های احساسی مثبتطراحان باید طرحی ایجاد کنن که به پاسخ‌های احساسی مثبت در کاربران تأثیر بذارن. طراحان تعامل از عناصری که به پاسخ‌های احساسی کاربر تأثیر می‌ذاره آگاه هستن. پالت‌های رنگی، فونت‌ها، انیمیشن‌ها - همه اون‌ها می‌تونن واکنش‌های احساسی رو تحریک کنن.طراحی برای مردموقتی صحبت از طراحی محصول می‌شه، سخته که برای کاربر انتزاعی طراحی کنیم. طراحان همیشه باید تصمیمشون رو در زمینه یک گروه کاربری خاص ارزیابی کنن. پرسوناها ابزاری عالی برای طراحان هستن.یک پرسونا داده‌های مهم در مورد یک گروه کاربر رو به گونه‌ای کپسوله می‌کنه که طراحان بتونن درک کنن و با اون ارتباط برقرار کنن. جنبه‌های عاطفی طراحان رو برای ایجاد رفتار بهتر محصول تحت تاثیر قرار می‌دن.نمونه‌ای از پرسوناالگوهای طراحیطراحان چگونه به مشکلات تعامل رسیدگی می‌کنن؟ از الگوها استفاده می‌کنن. یک الگو راه حلی برای یک زمینه خاص هست. در بسیاری از موقعیت‌ها، طراحان می‌تونن از طریق اصلاح الگوهای موجود، مشکلات جدید رو برطرف کنن. هدف از طراحی تعامل ایجاد راه حلی‌ست که به خوبی در زمینه استفاده مناسب باشه.معمولاً طراحان تعامل با دستورالعمل‌های رابط شناخته شده مانند دستورالعمل‌های رابط انسانی توسط اپل و طراحی متریال توسط گوگل شروع می‌کنن. دستورالعمل‌ها نه تنها الگوهایی رو ارائه می‌دن که برای کاربران آشنا هستن، بلکه نحوه استفاده از اون‌ها رو در زمینه‌های خاص نیز نشون می‌دن.تکرارهای طراحیطراحان می‌تونن چندین راه حل برای یک مشکل تعامل خاص داشته باشن. تنها راه صحیح برای کاهش تعداد گزینه‌های طراحی اینه که ببینین چگونه برای کاربران واقعی کار می‌کنن (تایید اونا از طریق انجام تست). همه فرض‌ها در مورد طراحی تعامل از تست عبور نمی‌کنن. بیشتر مواقع، طراحان مجبورند برای طراحی یک راه حل جایگزین به تابلوی نقاشی برگردند. به همین دلیله که طراحی تعامل به ندرت خطی هست، اما یک فرآیند تکراری هست.نتیجهطراحی دیجیتال یک مکالمه‌س. این مکالمه بین یک ماشین و شخصی که از اون استفاده می‌کنه اتفاق می‌افته. وقتی مردم با یک محصول تعامل دارن، عاشق داشتن تعاملات روون هستن، اما این تنها زمانی اتفاق می‌افته که طراحان تعامل، همه چیز رو درست کنن. امیرحسین پورمند امیرحسین پورمند Mon, 13 Feb 2023 11:00:35 +0330 https://virgool.io/CreativePie/tapsi-redesign-deefqdu09izt بازطراحی صفحه سفر، پرداخت و امتیاز به رانندهبهبود تجربه‌ی کاربر یکی از موارد مهم در بازطراحی هر محصول است. ما در بوت‌کمپ دیموندلب، نسخه پیشین اپلیکیشن تپسی رو بررسی کردیم که از نظر تجربه کاربر مشکلاتی داشت « هنوز هم داره :)) » که دسترس‌پذیر نبودن و رعایت نشدن افوردنس و... از جمله‌ی آن‌هاست و من در تلاش بودم که در حل چالش‌های تعریف شده از طرف شرکت تپسی به خوبی عمل کنمبنچمارکینگدر اولین مرحله از تحقیقات کاربر، کارم رو با بنچمارک سرویس‌های مشابه شروع کردمپرسونادر مرحله‌ی بعد برای درک بهتر نیازها و مشکلات کاربران، بر اساس گزارش‌های بدست آمده، پرسونای فرضی ساختمپروفایل پرسوناظاهر کلی رابط کاربر بازطراحی شدهدر اسنپ‌شات زیر، ظاهر کلی رابط کاربر و نحوه تعاملش رو مشاهده می‌کنیدرابط کاربر بازطراحی شدهنحوه اینتراکشن صفحه اطلاعات سفردر ادامه‌ی این گزارش به چند مورد از مهم‌ترین تغییراتی که در بازطراحی تپسی با هدف بهبود تجربه‌ی کاربر انجام دادم می‌پردازم۱. دسترس‌پذیری مکالمه با رانندهدر نسخه پیشین تپسی « یک‌بار دیگه عرض کنم که چالش‌های تعریف شده برای ما بر اساس نسخه پیشین تپسی بود :)) »، امکان مکالمه با راننده در صفحه دیگری قرار داشت که همین باعث دسترس‌پذیر نبودن این امکان می‌شود. برای حل این مشکل، کلید تماس با راننده رو در موقعیت قابل دید و قابل دسترس کاربر قرار دادمدسترس‌پذیر بودن دکمه تماس با راننده۲. افزایش افوردنس نحوه باز شدن کشویی صفحه اطلاعات سفربرای بهبود این مسئله، بعد از انجام بررسی‌های مختلف، تغییراتی رو در این بخش دادمحالت بسته صفحه اطلاعات سفرالف. بهبود قرارگیری فِلِش : این فلش نشان‌دهنده قابلیت باز شدن این صفحه است که رنگ نارنجی آن با قرار گرفتن در پس‌زمینه سفید باعث کنتراست بیشتری شده و بهتر وظیفه خودش رو نشان می‌دهدب. کلمه‌ی ویرایش سفر : با قرار دادن این تیتر در کنار قرار گیری فلش، کاربر بهتر متوجه می‌شود برای انجام تغییرات در گزینه‌های سفر « مثل افزودن مقصد جدید و زمان توقف » باید صفحه رو بالا بکشد۳. ساده‌تر شدن پروسه پرداختنشان دادن هزینه سفر در صفحه اول که شامل وضعیت شیوه پرداخت و مقدار هزینه است و رنگ نارنجی به‌کار برده شده کاربر رو ترغیب به کلیک می‌کند و وقتی روی این قسمت بزند یا این قسمت رو بالا بکشد، می‌تواند دکمه پرداخت اعتباری یا تغییر شیوه پرداخت به نقدی رو لمس کندنحوه اینتراکشن بخش هزینه سفرحالت‌های مختلف بخش هزینه‌ی سفر۴. بخش گزینه‌های سفربه‌منظور سهولت و سادگی، این گزینه‌ها رو در بخش ویرایش سفر قرار دادم، همچنین به این خاطر از رنگ اصلی نارنجی استفاده کردم که اهمیت بالاتر اون رو نسبت به سایر دکمه‌های این صفحه نشان دهمبخش گزینه‌های سفر۵. بخش سرگرمی / وبلاگبه جای ورق زدن آیتم‌ها در صفحه‌ی scrollable عمودی که تجربه‌ی ناخوشایندی رو به کاربر می‌دهد، از آیتم‌ها به‌صورت لیست عمودی استفاده کردم. این بخش که برای تبلیغات و پست‌های جدید است، می‌تواند برای سرگرمی هم استفاده شود که اولین آیتم آن برای گیم است. ایده‌های مختلفی هم برای بخش گیم تپسی داشتم ولی در این پست بهش نمی‌پردازم :)بخش سرگرمی / وبلاگ۶. بخش امتیاز به سفیرگزارش‌هایی که از این بخش به‌دست آمده حاکی از آن بود که گروهی از کاربران اطلاعات سفر رو فراموش می‌کنند و اطلاعات اشتباه وارد می‌کنند. به‌همین منظور از نظر رابط و تجربه کاربر تغییراتی در این بخش دادم که به دو بخش تقسیم می‌شوددر اسنپ‌شات سمت چپ امتیاز را وارد می‌کند و بعد در سمت راست می‌تواند دلیل خود را نیز ارسال کندالف. نشان دادن اطلاعات سفر : وقتی سفر پایان می‌یابد، در این صفحه اطلاعات سفر را به کاربر نشان می‌دهد تا به یادآوری تجربه‌ی آن سفر به کاربر کمک کنداطلاعات سفر در بخش نظرسنجیب. استفاده از ایموجی در نظرسنجی : برای تعامل بهتر با کاربر و جلوگیری از گیج شدن او، از پنج ایموجی با حالت‌های مختلف و توصیف هر کدام به‌صورت نوشته استفاده کردمنظرسنجیممنون که همراهم بودین، خوشحال می‌شم نظرتون رو بدونم، امیدوارم در آینده بتونم case studyهای جامع و کامل‌تری بذارم و اگر این پست براتون مفید بود سِیو کنید :) امیرحسین پورمند امیرحسین پورمند Thu, 13 Feb 2020 04:11:11 +0330