محسن نجفی استودیو محسن نجفی استودیو
  • صفحه اصلی
  • مقالات
  • کلاس و کارگاه
    • دوره‌های طراحی
      • دوره صفر تا صد طراحی رابط کاربری
    • ورکشاپ‌ها
      • ورکشاپ تخصصی تجربه کاربری
      • ورکشاپ گیمیفیکیشن و اینترنت اشیا
      • ورکشاپ دیزاین سیستم
      • ورکشاپ فوت و فن مصاحبه طراحی
      • ورکشاپ طراحی تعاملی
  • نمونه کار
  • چک لیست طراحی
  • تماس با ما
  • بیشتر
    • فرصت شغلی
    • درباره ما
محسن نجفی استودیو
18فروردین

نکات ساده برای طراحی موبایل

18/01/1400 محسن نجفی تجربه کاربری 32

اگر می خواهید برای موبایل طراحی کنید، احتمالاً باید نحوه استفاده از دستگاه و مشخصات خاص آن را در نظر بگیرید. برخی اصول کلی و نکات ساده برای طراحی موبایل وجود دارد که می تواند به طراحان برای شروع کار بر روی تلفن همراه کمک کند، اما فراموش نکنید که این موارد جایگزین نیاز به تحقیقات کاربر(user research) نمی شوند. آنها یک راهنما هستند و نه قوانین سخت و سریع.

در هنگام طراحی برای موبایل موارد بسیاری وجود دارد که باید در نظر گرفت و درحالی که بسیاری از آن ملاحظات، استانداردهای UX هستند، ملاحظات طراحی خاص موبایل نیز وجود دارد. آیا می خواهید پیشنهاد تلفن همراه خود را با پیشنهاد فعلی خود ادغام کنید؟ اگر اینطور باشد، آیا از ­­طراحی تعاملی استفاده می کنید یا طراحی تطبیقی؟

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

این بدان معناست که شما باید نکات ساده برای طراحی موبایل در نظر بگیرید که چگونه عوامل حواس پرتی را کاهش دهید و تمرکز کاربر بر روی عمل خود را نیز برایش آسان کنید.

جاش کلارک ، نویسنده کتاب Tapworthy- Designing Great iPhone Apps ، سه دسته برای دسترسی به موبایل وب را ارائه می دهد:

  •  Microtasking: هنگامی که کاربر برای مدت کوتاه اما دیوانه وار با دستگاه خود کار می کند.
  • محلی: وقتی کاربر بخواهد بداند در اطرافش چه خبر است.
  • بی حوصله: هنگامی که کاربر هیچ کاری بهتر از این انجام نمی دهد و به دنبال سرگرمی یا پرت کردن حواس خود است.

در ادامه نکات ساده برای طراحی موبایل را بیشتر بررسی می کنیم.

ملاحظات اساسی برای طراحی موبایل

صفحه های کوچک

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

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

یک روند خوب برای دنبال کردن این خواهد بود:

  • انواع دستگاهها را بر اساس اندازه صفحه نمایش مشابه گروه بندی کنید و سعی کنید این تعداد را برای تعداد قابل کنترلی از گروه ها حفظ کنید.
  • قوانین محتوا و قوانین انطباق را طراحی کنید، به شما امکان می دهد همه چیز را به خوبی در هر گروه از دستگاه ها نمایش دهید.
  • سعی کنید هنگام اجرای طرح های انعطاف پذیر تا حد ممکن به استانداردهای وب (W3) پایبند باشید.

فراموش نکنید که انواع مختلفی از مرورگرها برای وب موبایل موجود است. شما می خواهید اطمینان حاصل کنید که حتی المقدور از این موارد پشتیبانی می کنید؛ حتی آنهایی که دیگر در حال حاضر موجود نیستند ( مانند BlackBerry و Nokia WebKit)

نکات ساده برای طراحی موبایل

جهت یابی را ساده نگه دارید

صفحه کلیدها و صفحه های لمسی مانند موس ها  جهت یابی دقیق ایجاد نمی کنند، بنابراین سعی کنید:

  • اولویت بندی جهت یابی را براساس روش کار کاربران با ویژگی های محصول انجام دهید؛ محبوب ترین در بالای صفحه.
  • سطح جهت یابی را به حداقل برسانید.
  • اطمینان حاصل کنید که علامت زدن برای جهت یابی روشن و مختصر است.
  • دسترسی با کمترین کلید به ویژگی های مختلف را ارائه دهید.
  • به یاد داشته باشید که برای نقاط قابل لمس صفحه لمسی، یک فضای 30 در 30 پیکسلی ارائه دهید.
  • اطمینان حاصل کنید که لینکها از نظر بصری متمایز هستند و مشخص است که فعال شده اند یا نه.
  • جابجایی بین موبایل و سایت کامل را آسان کنید (اگر می خواهید نسخه های جداگانه را پیاده سازی کنید)

محتوا را به حداقل برسانید

کاربران خود را تحت فشار قرار ندهید؛به فضای کوچک صفحه احترام بگذارید. محتوا را به حداقل برسانید.

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

برای بوکمارک‌های مربوطه، توضیحات صفحه را کوتاه و دقیق کنید.

ورودی های مورد نیاز کاربران را کاهش دهید

هرچه کمتر کاربر مجبور باشد با تلفن خود کلنجار رود، بیشتر از استفاده از وب سایت همراه شما لذت خواهند برد.

در نظر داشته باشید:

  • کوتاه نگه داشتن URL ها.
  • ارائه مکانیسم های ورودی جایگزین (ویدئو ، صدا و غیره)
  • به حداقل رساندن ورودی ها در فرم ها (همیشه وقتی کاربر وارد دسک تاپ می شود می توانید اطلاعات بیشتری بخواهید)
  • اجازه ورود دائمی به سیستم (اکثر تلفن های هوشمند از رمز عبور یا اثر انگشت محافظت می کنند در نتیجه خطرات ورود به سیستم کمتر از میز کار است)
  • میزان اسکرول را به حداقل برسانید و فقط آن را در یک جهت مجاز کنید.
نکات ساده برای طراحی موبایل

به یاد داشته باشید اتصالات با تلفن همراه پایدار نیستند

اتصالات با تلفن همراه می توانند یک معضل عظیم در مناطقی با سرویسهای کوچک باشند. به کاربران سخت نگیرید. این نکته ها را امتحان کنید:

  • نگهداری اطلاعات به گونه ای که در قطع اتصال از بین نروند.
  • به حداقل رساندن اندازه صفحه برای بارگذاری سریع.
  • از بین بردن شبکه های تبلیغاتی و غیره در سایت های تلفن همراه که مقدار زیادی پهنای باند و حجم اینترنت را مصرف می کنند.
  • تصاویر کوچک و کاهش اندازه آنها.
  • به حداقل رساندن تعداد تصاویر جاسازی شده (برای تسریع در زمان بارگیری)

نکات ساده برای طراحی موبایل

تجارب مشابه و یکپارچه

از آنجایی که کاربران بین تلفن همراه و دسکتاپ در حرکتند، انتظار تجربیات مشابه را دارند. به یاد داشته باشید که:

  • تداوم را حفظ کنید. اگر آنها از طریق تلفن همراه به فروشگاه وب شما وارد شوند، باید بتوانند سفارشات را ردیابی کنند و خریدها را دقیقاً مانند آنچه که در رایانه انجام می شود، انجام دهند.
  • یکپارچگی را حفظ کنید. گزینه جابجایی بین پیشنهادات تلفن همراه و دسک تاپ را به دلخواه خود ارائه دهید.
  • برند را حفظ کنید. ظاهر و احساس هر نسخه باید شبیه به هم باشد.

نگاهی به دور

تلفن همراه با محیط دسکتاپ سنتی متفاوت است و در حالی که استانداردهای  UX و ملاحظاتی درباره ی قابل استفاده بودن در زمینه موبایل مورد توجه است، محیط موبایل ملاحظات جدیدی برای طراحی هم به ارمغان می آورد. برای طراحان موبایل توجه به جزئیات برای ارائه بهترین تجربه های ممکن به کاربر بسیار مهم است.

 

منبع: interaction-design.org

خواندن بیشتر
13فروردین

6 اصل داستان نویسی برای بهبود UX شما

13/01/1400 الهام خوشی تجربه کاربری 11

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

در یک حالت ایده آل، محصولات و خدمات عالی در سطح درونی، رفتاری و بازتابنده (3 سطح طراحی، دون نورمن) ما را مجذوب خود می کنند. در حالی که سطح درونی با جذابیت بصری سروکار دارد، سطح رفتاری با استفاده و قابلیت استفاده سروکار دارد. آخر اینکه سطح انعکاسی تعیین می کند که آیا و چگونه ما یک تجربه را پردازش می‌کنیم و به خاطر می آوریم و به اشتراک می گذاریم. این تنها یک مورد است که عنصر داستان با UX رابطه عاشقانه برقرار می کند. استفاده از تکنیک‌ها و روش‌های قصه گویی از بسیاری جنبه‌ها به طراحی UX و روند کار شما کمک می کند. ایجاد شخصیت، نقشه برداری از سفر کاربر، نوشتن داستان کاربر، و غیره. آخرین و مهمترین نکته، گفتن و “فروش” درست داستان شما به خرید در سهامداران کمک می کند.

 عناصر داستان سرایی زیر را در روند UX و UX خود اعمال کنید.

-دلیل داستان شما

-شخصیت اصلی (قهرمان)

-با یک درگیری شروع کنید

-ساختار ایجاد آگاهی ویروسی

یک دلیل:

واضح و روشن باشید و هدف بالاتر از این که چرا این کار را می کنید و انجام می دهید را درک کنید. شما، محصول، خدمات یا مارک تجاری خود به چه معنایی معرفی می شوید؟ چرا همیشه یک نکته خوب برای شروع است. به عنوان مثال هنگامی که یک شخصیت UX ایجاد می کنید ، می خواهید آنچه را که انسان نمایندگی در زندگی دنبال می کند تعریف کنید. در یک تجربه نگاشت ، ابتدا می خواهید بدانید که چرا این کار را می کنید! با چرا (سیمون سینک) شروع کنید.

شخصیت اصلی:

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

با یک درگیری شروع کنید:

در یک دنیای ایده آل ، شما می خواهید مشکل کسی را حل کنید یا با یک چالش مقابله کنید. درگیری ها جایی است که بسیاری از داستان های خوب آغاز می شود. طراحی UX در مورد رفع تعارضاتی است که کاربر با آن سروکار دارد. بنابراین ، شما با درک خوبی از کاربر خود و نقاط درد یک کاربر شروع می کنید!

ساختار

روشهای مختلفی برای ساختن داستان وجود دارد. چیزی که ثابت شده است موفقیت آمیز است ، سه کاره است. به زبان ساده ، یک داستان شروع ، یک قسمت میانی و یک پایان وجود دارد. این ساختار با سفر معمول مشتری یا چرخه زندگی هماهنگ است. این می تواند به عنوان یک ساختار کلی از نقشه برداری سفر UX مورد استفاده قرار گیرد: استخدام (خرید کاربر) ، نگهداری (استفاده از محصول یا خدمات خود) ، بازیابی (پایان استفاده ، ایده آل تجدید و حمایت).

ایجاد آگاهی

ایجاد آگاهی در داستان ها ایجاد واکنش های احساسی است. شادی 😀 ، تعجب 😯 ، غمگینی 😔 ، عصبانیت 😡 ، ترس fear ، انزجار. تا زمانی که ترسناکترین تجربه rollercoaster را طراحی نکنید ، احتمالاً می خواهید کاربر خود را به خاطر احساسات منفی راحت کنید و هدفش شادی در بیشتر موارد باشد.

ویروسی

داستان های خوب به اشتراک گذاشته می شوند اگر کاربران شما تجربه مثبت خود را در رابطه با خدمات ، مارک یا محصول شما به اشتراک می گذارند ، شما احتمالاً کار خوبی انجام داده اید. آنها را قادر به انجام این کار کنید!

 

خواندن بیشتر
02فروردین

ساخت یک سیستم طراحی از صفر

02/01/1400 درسا سادات حسینی پور دیزاین سیستم 21

در سال 2020 قصد داشتم برخی از اوقات فراغت خود را در پروژه های شخصی صرف یادگیری فنون و مهارت های جدید بخصوص در زمینه طراحی و ساخت ابزارهای دیجیتالی کنم. چندین سال که به صورت حرفه ای روی سیستم های طراحی کار کرده بودم ، اولین قدم منطقی برای من این بود که یک کتابخانه مولفه داشته باشم که بتوانم از آن برای پروژه هایم استفاده مجدد کنم:

    سایز کوچک: فقط شامل اجزای بسیار اصلی و ویژگی های آن است

    قابل تنظیم: برای اجازه دادن به بیان نام تجاری در برنامه های مختلف

    علامت گذاری: چارچوب برای استفاده در هردسته از برنامه ها

با جستجوی راه حل های موجود، نمی توانم راه حلی پیدا کنم که تمام این شرایط را برآورده کند.

برخی از آنها دارای ویژگی های زیادی بودند که من نیازی به آنها نداشتم ، برخی از آنها سفارشی سازی کم را مجاز نمی دانند و بیشتر آنها براساس یک چارچوب خاص مانند React ، Vue یا Angular ساخته شده اند.

من ساختن Kor را در 21 نوامبر 2019 آغاز کردم و اولین نسخه 4 روز بعد منتشر شد. از امروز ، 7000+ بارگیری در npm ، 92 ستاره در GitHub و 300 کاربر متوسط ماهانه دارد.

۱- تعریف قوانین پایه سیستم های طراحی

بر اساس اصولی ساخته شده اند که در مولفه های UI مشترک هستند. داشتن یک پایه محکم به منسجم بودن راه حل نهایی کمک می کند و زمینه ای برای شخصی سازی آسان فراهم می کند.

ابعاد

ابعاد تأثیر زیادی در هماهنگی ادراک شده رابط کاربر دارد و بهترین راه برای دستیابی به آن تعریف واحد پایه است. در مورد Kor ، این واحد به عنوان 8 px  تعریف شد ، قراردادی که توسط اکثر سیستم های طراحی متناسب با رایج ترین وضوح صفحه نمایش دنبال می شود. معمولاً واحدها به شرح زیر تعریف می شوند:

8px: فاصله بین عناصر یک جز

16px: حاشیه اجزای خارجی

24px: اندازه نمادها و ارتفاع خط

در موارد نادر مانند رابط های کاربری متراکم با اطلاعات ، شبکه 8px را می توان یک بار دیگر تقسیم کرد و در نتیجه 4 مانند 4 ، 12 یا 20 افزایش می یابد.

رنگ ها

از رنگ ها برای انتقال سلسله مراتب ، برجسته سازی حالت ها و جلب توجه به برخی از مولفه های UI استفاده می شود. برای کاهش پیچیدگی و تغییر آسان تم ها ، در Kor من بر کاهش تعداد رنگ ها به حداقل توجه کرده ام و در مجموع 4 دسته تعریف شده است:

   پایه: پس زمینه محتوا(مانند نوار برنامه ، کارت ها ، صفحه)

  خنثی: رنگهای مثبت و منفی (مانند متن ، خطوط تقسیم کننده و موارد برجسته شفاف)

  لهجه: رنگهای برجسته حالت فعال و فراخوان

 عملکردی: رنگهای تأیید ، هشدار ، خطا و حالت خنثی

طرح های پیش فرض رنگ روشن و تیره تعریف شده و به کاربران توصیه می شود تا با تغییر دادن متناسب با متغیرهای رنگی ، تم های جدیدی را طراحی کنند.

تایپوگرافی

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

با مختصر نگه داشتن مقدار سبک ها ، 4 سبک قلم تعریف شده و از طریق متغیرها قابل تنظیم هستند:

هدر 1: برچسب نوار برنامه و عناوین محتوا

هدر 2: عناوین مولفه ها (به عنوان مثال برگه ها ، کارت ها)

 متن 1: برچسب های مولفه (به عنوان مثال برچسب ها ، کادرهای تأیید)

 متن 2: متن ثانویه مولفه (به عنوان مثال آواتار)

ارتفاع

روش مفید دیگر برای سازماندهی UI و انتقال سلسله مراتب محتوا ، استفاده از ارتفاعات است. در Kor من 4 لایه تعریف کرده ام که با استفاده از رنگ و سایه تنظیم می شوند. مقادیر رنگی برای هر لایه بر اساس تأثیر طبیعی نور بر روی سطوح تعریف شده است، به این معنی که لایه های نزدیکتر به بیننده در هر دو مضمون روشن و تاریک روشن تر از لایه های دیگر هستند.

بسته به زبان بصری برنامه ، می توان سایه ها و رنگ ها را در صورت ترجیح دادن ظاهر مسطح ، دوباره تعریف یا حذف کرد.

لایه 1: پس زمینه صفحه

لایه 2: محتوای کناری (صفحه ها ، میله های ناو)

لایه 3: ظروف محتوا (کارت ، آکاردئون)

لایه 4: محتوای پوشانده شده (اعلان ها ، روش ها)

شمایل نگاری (کشیدن ایکون)

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

۳-ساخت کامپوننت‌ها

کامپوننت‌های سیستم طراحی واحدهای UI هستند که عمومی هستند (که می توانند در موارد مختلف استفاده شوند) و با استفاده از ویژگی ها، اسلات ها و رویدادها قابل تنظیم هستند. برنامه ها معمولاً از 80٪ مولفه های رایج مانند دکمه ها یا فرم‌های اینپوت و 20٪ از موارد منحصر به فرد مانند نقشه ها یا تقویم ها تشکیل شده اند.

در سیستم طراحی Kor من موارد متداول را متمرکز کرده ام تا آن را مختصر و سبک وزن نگه دارم.

  • ویژگی ها دکمه هایی هستند که از طریق آنها می توان اجزا را سفارشی کرد (به عنوان مثال برچسب دکمه ها).
  • رویدادها توسط اجزای برنامه فعال می شوند (به عنوان مثال کلیک روی دکمه)
  • اسلات‌ها ظرفهایی هستند که می توان محتوای سفارشی را در آنها قرار داد (به عنوان مثال متن داخل کارت)

۳:کشیدن و رها کردن سندباکس

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

اگرچه ابزار نمونه سازی زیادی در دسترس است، نتیجه آنها معمولاً فقط می تواند به عنوان مرجعی برای اجرا باشد، و بیشتر تلاش های طراح باید توسط توسعه دهنده دوباره تکرار شود، بنابراین با این سندباکس سعی کردم این شکاف را با تولید کاهش دهم. این پروژه اولین جایزه پلاتین من بود در Reddit، که من بسیار افتخار می کنم.

۴. مستندات، راهنمایی و پشتیبانی

به موازات طراحی و توسعه سیستم طراحی، من در صفحه اصلی اسناد برای توضیح نحوه تنظیم، مصرف و کمک به Kor کار کرده ام.

کل برنامه وب با خود کتابخانه مولفه ساخته شده است.

منبع: uxplanet.org

خواندن بیشتر
28مهر

شروع پروژه خلاقانه به ۵ روش

28/07/1398 نگین متین تجربه کاربری 29

گسترش کلمه طراحی

اخیراً، کلمه “طراحی” از محصول سنتی و قلمروهای ارتباطاتی فراتر رفته است. مردم انتظار دارند که طراحی نقشی بیشتر از مداخلات فنی – اجتماعی را ایفا کند. مانند تجربه‌ها، خدمات و نوآوریهای اجتماعی. علاوه بر این، طراحی به لایه‌های نهایی بین رشته‌ای مانند فرهنگ، سیاست و جامعه به عنوان CMU’s Transition Design بسط داده می‌شود. مثلا تأسیس آزمایشگاه سیاست انگلیس در سال 2014 تحت نظر دفتر دولت یک رویداد خلاقانه بود تا باعث ایجاد رویکردهای طراحی باز و مردم‌محور در زمینه سیاست‌گذاری شود. هدف از طراحی‌، تنها حل مسئله‌ای که دقیقاً جلوی ماست، نیست. طراحی خردمندانه زمینه جدیدی از طراحی است که هدف آن ارائه مشکلات آینده ‌است که در کتاب Speculative Everything معرفی شده است. علاوه بر این، با توجه به افزایش تقاضا برای ایجاد چشم‌اندازهای سیاره‌ای مانند SDGها ، چگونگی حل کردن مشکلات دردسرساز و پل زدن به آینده پایدار ، به موضوعی بزرگ برای طراحان قرن بیست و یکم تبدیل شده است.

بر اساس این دو محور ، من افق‌های فعلی را در تئوری طراحی سازماندهی کردم. در ابتدا به طراحی انتقالی(Transition Design) توجه داشتم که ارزش‌های مردم را در مقیاس اجتماعی طراحی می‌کند. این تئوری طراحی در مقیاس فوق‌العاده بزرگ،نشان‌دهنده نقش جدید طراح در نتیجه گسترش حوزه طراحی در قرن بیست و یکم است. پنج روش طراحی نماینده فعلی، از جمله طرح انتقال،را خلاصه کردم. نمودارهای مدل زیر یک فرایند معمولی را به تصویر می‌کشند و من نمی‌گویم اینها تنها فرایندها هستند. استراتژیها و روشهای مختلفی هر روز در حال تلفیق و تکامل هستند و انتظار دارم که هر رویکرد همچنان در حال تغییر و تحول باشد.

توسعه اهداف طراحی

۱- رویکرد پیش بینی

به آینده فکر کنید از گذشته و حال .

۱-۱- تفکر طراحی

design thinking

ویژگی

رویکرد کاربرمحور و از پایین به بالا. با کاربران خاص، همدردی کنید، نیازها و دردهای آنها را استخراج کنید، ایده‌ها و پروتوتایپ‌های اولیه را ایجاد کنید تا مسائلتان را هوشمندانه حل کنید.

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

استخراج 100٪ ارزش طراحی تفکر‌، چالش برانگیز است، مگر اینکه عضوی باشد که ذات روش را درک کند و به آن تسلط یابد. شما نمی‌توانید با دانستن و استفاده از روش‌ها و ابزارهای طراحی تفکر، آثار باستانی خلق کنید.

نکات کلیدی

چهره کاربر را از ابتدا تا انتها مشاهده کنید.
تجسم و پروتوتایپ را به سرعت انجام دهید و تکرار کنید.
فرضیات را آزمایش کنید و به شکل انعطاف‌پذیری پاسخ دهید.

این‌ها نکات اساسی و بی‌نظیر تفکر طراحی است. در نهایت باید در داخل کاربر غوطه‌ور شوید و همیشه از چشم کاربر فکر کنید. بسیاری از مطالعات و دانش‌های کاربردی، عمدتاً در جامعه طراحی UX وجود دارد که با مراجعه به موارد موفق می‌توان به یک استراتژی عالی دست یافت.

۲-۱- تفکر سیستمی

تفکر سیستمی

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

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

۳-۱- طراحی مبتنی بر نوآوری

طراحی مبتنی بر نوآوری

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

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

۲- رویکرد Backcasting

به آنچه باید اکنون برای آینده انجام دهید فکر کنید.

۱-۲- روش پیشنهادی مشکل

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

وضعیت فعلی و نکات کلیدی

این مفهوم توسط Dunne & Raby و دانشجویان آنها مانند Sputniko ، James Auger, E. Montgomery و C. Woebken مطرح شده است که در دانشگاه های سراسر جهان در حال تدریس هستند تاDNA  طراحی خردمندانه را حفظ کند.

با این حال، انتقادی در مورد چگونگی ارتباط با وضعیت فعلی وجود داشته است. زیرا طراحی خردمندانه فقط آینده احتمالی را پیشنهاد می‌کند. در چنین شرایطی Dunne & Raby هنگام حضور در RCA به جای مهندسین و دانشمندان ، با انسان‌شناسان و فیلسوفان در Parsons همکاری می‌کنند . آنها در حال تحقیق در مورد مفهوم واقعیت طراحی شده هستند که به جای تجسم آینده‌ای که تکنولوژی می‌تواند آن را به وجود آورد، فلسفه پشت تکنولوژی را تجسم می‌کنند.

طراحی تحولی

ویژگی

یک رویکرد سیستم‌محور و backcasting کلان. این یک سبک زندگی پایدار و ایده‌آل را پیش بینی می‌کند که در آن “مشکلات دردسرساز” دیگر وجود نداشته باشد و به طرح پیشنهادی پروژه بازگشت، برای رسیدن به آینده ای بلند مدت بازگردد.

وضعیت فعلی و نکات کلیدی
پیشنهاد شده توسط دانشگاه کارنگی ملون در سال 2015. این یک رویکرد طراحی فوق بین رشته‌ای است که دیدگاه شیوه زندگی مردم را شامل می‌شود (از طرز تفکر طراحی) ، مفهوم holarchy (از سیستم‌های تفکر) ، تصور رادیکال (از طراحی خردمندانه) ، و نگرش بازگشت به زمان حال از طریق  backcasting .

از طرف دیگر ، این یک تئوری ایده‌آل است ، و هنوز هم مطالعات عملی اندکی وجود دارد. با این وجود، تئوری طراحی چالش برانگیز و ارزشمند است زیرا پیش‌بینی چشم اندازهای بلند مدت و رویاهای آینده چالش برانگیز است. من معتقدم که برای طراحان آینده این توانایی لازم خواهد بود. علاوه‌براین ، این به فناوری آینده ربطی ندارد بلکه سبک زندگی آینده را در نظر می‌گیرد ، بدین معنی که طراحی انتقالی بر چگونگی ارزش‌ها و باورهای مردم متمرکز است. این یک فلسفه مشابه واقعیت طراحی شده Dunne & Raby است.

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

۳- رویکرد طراحی مشارکتی

۱-۳- طراحی مشارکتی
۲-۳- طراحی فراگیر
۳-۳- طراحی مشترک

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

افکار نهایی

آیا رویکرد جهانی وجود دارد؟

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

ایجاد سناریو یک مهارت جهانی برای طراحان است.

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

خواندن بیشتر
18شهریور

مهم‌ترین رنگ در طراحی رابط‌ کاربری

18/06/1398 سعیده آگاهی گرافال 23

احتمالا حدس زده‌اید که این مقاله به رنگ آبی اختصاص داده شده است. بدون شک، رنگ آبی یکی از مهم‌ترین رنگ‌ها در طراحی رابط کاربری است و بیشترین استفاده را دارد. کافی‌ است به اپلیکیشن‌های موبایل خود نگاهی کنید و ببینید که بیشترِ آنها مانند ‌Facebook، Twitter، Shazam، Safari و بسیاری دیگر، آبی هستند.

رنگ آبی
رنگ آبی

حالا چرا آبی رنگ منتخب است؟

دلایل مختلفی برای استفاده از این رنگ وجود دارد که به چند مورد آن اشاره می‌کنیم:

  • مردم این رنگ را دوست دارند. بررسی‌ها نشان می‌دهند رنگ مورد علاقه‌ی اکثر مردم،آبی است. این رنگ در دنیا، آرامش‌بخش‌ترین رنگ شناخته شده است.
  • میزان علاقه مندی مردم به رنگ آبی
    میزان علاقه مندی مردم به رنگ آبی

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

  • آبی، رنگی برای طبیعت
    آبی، رنگی برای طبیعت

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

  • رنگی با حس نوآورانه. شرکت‌ها اغلب از آبی استفاده می‌کنند، چرا که تکنولوژی و نوآوری را به ذهن می‌آورد.
  • حس امنیت می‌دهد. این رنگ در بین وبسایت‌ها و اپلیکیشن‌های صنعت گردشگری، بسیار متداول است و با ایجاد حس اطمینان، رنگی کاملاً مناسب برای این زمینه  به شمار می‌رود.
  • محصول را قابل اعتماد نشان می‌دهد. معمولا سعی بر این است که کاربر قانع شود یک محصول خاص، انتخابی درست است. در این راستا، هدف از اضافه کردن رنگ آبی، قانع کردن کاربر به معتبر بودن محصول است. برند‌های حوزه‌ی فناوری مانند Dell، IBM، Intel، AT&T و PayPal از ویژگی قابل‌اعتماد بودن رنگ آبی استفاده می‌کنند. آنها محصولاتی تولید می‌کنند که هر روز بیشتر مورد اعتماد مردم قرار می‌گیرد.
  • کور رنگی. در رایج‌ترین انواع کور ‌رنگی (Protanopia و Deuteranopia) رنگ آبی دیده می‌شود. این موضوع در مورد رنگ‌های سبز و قرمز صدق نمی‌کند.

رنگ غالب Facebook آبی است، چراکه Mark Zuckerberg کور رنگ است. او می‌گوید: «آبی برای من قوی‌ترین رنگ است، من می‌توانم تمام رنگ‌های آبی را ببینم».

نتیجه
امیدوارم بعد از خواندن این مقاله، متوجه شده باشید که چرا رنگ آبی در بین طراحان تا این حد محبوب است. با این حال، این به این معنی نیست که حتما باید رنگ اپلیکیشن یا وبسایت خود را به آبی تغییر دهید. آبی بهترین رنگ بین‌المللی نیست، اصلا «بهترین» رنگ وجود ندارد. چیزی که در یک اپلیکیشن یا سایت کاملاً مناسب به نظر می‌رسد، لزوما در موارد دیگر بهترین گزینه نیست.

در نهایت، رنگ مناسب برای طراحی شما، رنگی است که کاربرتان می‌پسندد.
منبع: uxplanet.org

خواندن بیشتر
11شهریور

10 دلیل ساده برای استفاده از اسکچ به جای فتوشاپ

11/06/1398 علی دباغ منش نرم‌افزار 35

بعد از ۱۰ سال استفاده از فتوشاپ، و ۶ سال استفاده از آن برای طراحی رابط کاربری اپلیکیشن و وبسایت، تصمیم گرفتم از اسکچ استفاده کنم. ممکن است خنده دار به نظر برسد، اما این تصمیم سختی بود، چون فتوشاپ برای من مثل قلم مو برای نقاش یا چوب درام برای درامر بود.

بعد از شش ماه استفاده دائم از اسکچ امیدوارم هیچوقت مجبور نشوم برای طراحی رابط کاربری از فتوشاپ استفاده کنم. اینها دلایل من هستند:

طراحی وکتور بیس
با اسکچ، دیگر نیاز نیست به تراکم صفحه ها فکر کنید. کافیست یک آرت بورد به اندازه مناسب (مثلا 640*360 برای اندروید) بسازید، مهم نیست صفحه رتینا باشد یا تلویریون سامسونگ، اسکچ بقیه کار ها را برایتان انجام میدهد. به یاد دارم زمانی فایل های فتوشاپ با حجم هایی مثل 500 مگابایت و رزولوشن 1920×1080 داشتم، زیرا باید مطمئن میشدم میتوانم طراحی را در رزولوشن مورد نیاز تحویل دهم و طرح ها موقع زوم کردن کیفییت خود را حفظ کنند. بعد از مدتی به تقسیم سایز فونت ها و حاشیه ها به 2 (در ios) و یا 3 (android) برای استفاده در کد نویسی عادت کردم، اما این کار همیشه زمان بر بود و احتمال اشتباه در ان وجود داشت. احساس میکردم این روند کار شامل مراحل اضافی و مزاحم بود، چون فتوشاپ بر اساس پیکسل کار میکند و برای طراحی رابط کاربری، به خصوص موبایل، ساخته نشده.

تغییر اندازه تکست باکس ها با اضافه شدن متن
وقتی یک لایه متنی در فتوشاپ ایجاد میکنید و بیشتر از میزانی که ارتفاع آن به شما اجازه میدهد،به آن متن اضافه میکنید، یا باید سایز پاراگراف را تغییر دهید یا خودتان دستی متن را تنظیم کنید. اسکچ بدون هیچ دخالتی از جانب شما، تکست باکس را بزرگتر میکند، دقیقا به اندازه لازم، نه کمتر و نه بیشتر.

خصوصیات تکست باکس ها
در اسکچ، حاشیه بالا و پایین متن ها به ارتفاع خط بستگی دارد. برای مثال، یک متن با فونت ۲۰ پیکسل و ارتفاع خط ۳۰ پیکسل، دارای ۵ پیکسل حاشیه در بالا و ۵ پیکسل در پایین است. دقیقا همانطور که در کد html اتفاق میفتد. این ویژگی تاثیر زیادی روی حاشیه های عمودی بین عناصر بالا و پایین متن دارد. فتوشاپ این موضوع را نادیده میگیرد، اما اسکچ نه. این یعنی با اسکچ شما مجبور نیستید حاشیه های بین متن را حدس بزنید. کافیست حاشیه هایی را که در اسکچ میبینید کپی کنید و به توسعه دهنده بدهید. با Zeplin این فرایند آسان تر نیز خواهد شد.

دنیای بزرگ پلاگین ها
تعداد بیشماری پلاگین برای اسکچ عرضه شده. پلاگین هایی که من از انها استفاده میکنم(مثلا dynamic buttons،  asset export for iOS and android،  palettes،  fluid) روند کاریم را بسیار روان تر میکنند. برای هر کسی و هر نوع نیازی پلاگینی وجود دارد که میتواند کارتان را اسان تر کند.برای نصب آسان از  Toolbox استفاده کنید.

پلاگین fluid چیدمان شما را انعطاف پذیر میکند
حالا شما میتوانید مقدار ثابتی حاشیه بین عناصر یا درون گروه ها یا آرت‌بورد ها تعریف کنید. به این معنی که اگر محتوا اضافه کنید، کافیست دکمه update را بزنید تا چیدمان شما با آن تغییرهماهنگ شود. دیگر نیازی به مرتب کردن مجدد عناصر بعد از تغییر سایز آنها نیست. یا اگر میخئاهید ببینید طرح شما در صفحه های بزرگتر چگونه دیده میشود، حاشیه چپ و راست را تعیین کنید، سایز آرت‌بوردتان را تغییر دهید و دکمه update را بزنید. نیازی به تغییر عرض عنصر نیست چون به صورت خودکار انجام می‌‍شود.فوق‌العادس!

سیمبل جدید قابل ویرایش (درون یک نماد)
حالا شما این قابلیت را دارید که یک سیمبل را درون نماد دیگری بگذارید. یعنی مثلا میتوانید یک سیمبل دکمه یا آیکن بسازید و آن را در هر نماد دیگری قرار دهید. همچنین می‌توانید برای نماد ها مقیاس تعیین کنید و در آخر، میتوانید در جای عکس و متن هر نماد، از محتوای دلخواهتان استفاده کنید. این ویژگی‌ها سیمبل‌ها را بیش از قبل کاربردی و منعطف میکند.

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

تغییر نام لایه ها با cmd+r به جای دبل کلیک
خنده دار به نظر میرسد اما چون من همیشه از میانبر ها استفاده میکنم، زدن cmd+r خیلی سریع تر از دبل کلیک کردن با قلم یا ماوس روی اسم کوچک لایه است. و تعداد زیاد لایه ها این کار را سخت تر میکند.

سایه ها، گوشه‌های گرد، مرز ها و ویژگی های دیگر
در اسکچ هر ویژگی به راحتی ساخته و اعمال میشود. نیازی به اعمال افکت بر لایه ها نیست. مجبور نیستید از پنجره افکت لایه های فتوشاپ با هزاران تنظیم گیج کننده و اضافی استفاده کنید. همه چیز بر اساس css است. این بسیار خوب است چون شما میتوانید به توسعه دهنده بگویید از چه مقادیر و تنظیماتی در کد خود استفاده کند. یا اگز میخواهید یک توسعه دهنده را خیلی خوشحال کنید، تکه کد css به او بدهید. اجرای نهایی دقیقا شبیه طراحی شما خواهد بود.

حجم کم فایل های اسکچ
نمیدانم شما چقدر فضای ذخیره سازی در اختیار دارید، اما هارد من محدود است. پس خوشحالم که اسکچ باعث میشود نیازی به نگرانی درباره نگه داشتن نسخه های مختلف از فایل های طراحی نداشته باشم. تعداد بسیار زیادی امکانات دیگر وجود دارد که میتوان به انها اشاره کرد.بعد از شش ماه استفاده از اسکچ برای طراحی های بصری که باید تمیز، کامل و ریسپانسیو باشند، اینها ویژگی هایی هستند که من دائما از انها استفاده میکنم (و لذت میبرم) و نمیتوانم طراحی رابط کاربری را بدون انها تصور کنم. قطعا همه چیز بی‌نقص نیست و میتوانستم به قسمت های ازار دهنده اسکچ نیز اشاره کنم، اما موضوع مقاله این نیود. واقعیت این است که اسکچ هرروز بهتر و بهتر میشود. اخرین اپدیت بزرگ عالی بود.اگر bohemian این اپدیت های با کیفیت را ادامه دهد، در آینده هیچ نیازی به فتوشاپ نخواهم داشت.

منبع: meduim.com

خواندن بیشتر
26مرداد

طراحی تجربه کاربری برای اینترنت اشیا: پنج تصمیم مهم

26/05/1398 علی دباغ منش تجربه کاربری 20

گفتگوی بسیار خوبی با جنی راموس، طراح تجربه کاربری و یکی از برگزار کنندگان دورهمی تجربه کاربری اورلاندو داشتم. او به شوخی گفت طراحی برای صفحه نمایش شامل جابه جا کردن یک مشت “مستطیل شیک” است.
با وجود این که این تعریف تماما پیچیدگی های طراحی تجربه کاربری را دست کم میگیرد، منظور جنی را درک میکنم. پس از سالها طراحی برای صفحه نمایش، میلیون ها طراح حرفه ای در مجموع به راه حل های موثری برای تقریبا هر مسئله ای که بتواند در قالب پیکسل ظاهر شود، دست یافته اند.

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

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

برای شروع، در مورد پنج دسته از مهمترین تصمیماتی که در مسیر ساخت یک راهکار نوین و کاربردی در زمینه اینترنت اشیا باید بگیرید توضیح داده ام:

۱- تجربه بهتری ارائه دهید
این دسته همه چیز را در برمیگیرد. تصمیم های زیادی هستند که میتوان به انها اشاره کرد: کاربران نباید نگران عمر باتری باشند،مطمئن شوید تجربه کاربران از عملکرد دستگاهتان بی وقفه است و در اخر؛ به جای اضافه کردن بار شناختی (تلاش ذهنی که کاربر باید برای فهمیدن طرز کار دستگاه شما به کار بگیرد) سعی کنید از ان بکاهید
اگر میخواهید اتصال چیزی به اینترنت را توجیه کنید، احتمالا از زاویه اشتباهی به مسئله نگاه میکنید.

پرسیدن این سوال که چه اتفاقی می افتاد اگر قهوه ساز من به ساعتم وصل بود، سپس فهمیدن چرایی ان میتواند تمرین جذابی باشد. اما سوالی که باید از خود بپرسید این است: یک قهوه ساز بی نقص چگونه کار میکند؟ بعد از پاسخ به این سوال به این فکر کنید که اتصال قهوه ساز به اینترنت چگونه میتواند به رسیدن ان به یک عملکرد بی نقص کمک کند.

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

۲- دستگاهتان باید بتواند بدون اینترنت کار کند
هیچکس،حتی پاپ (یا شاید به حصوص پاپ!) همیشه به اینترنت دسترسی ندارد. وقتی برای اینترنت اشیا تجربه کاربری طراحی میکنید، به اتصال همیشگی به اینترنت اعتماد نکنید.

حالت ایده ال این است که فرض کنید اینترنت وجود ندارد، و ببینید چه کارکرد هایی را میتوانید قبل از نیاز به اتصال به اینترنت اضافه کنید. مثلا اگر در حال طراحی یک چتر هستید که هنگام باران نور ابی از خود ساطع میکند، برای زمانهایی که چتر نمیتواند اب و هوا را از طریق اینترنت چک کند یک رطوبت سنج به ان اضافه کنید.
(چتری که راجب ان صحبت شد توسط دیوید رز، نویسنده کتاب اشیا طلسم شده ساخته شده است. پیشنهاد میکنم نگاهی به کتاب بیاندازید.)

حتی اگر تضمینی وجود داشته باشد که در اینده همه چیز به اینترنت وصل خواهد شد، (و نمیتوان چنین تضمینی ارائه داد) احتمال کاملا واقع بینانه ای وجود دارد که سرور های شما تا ابد سرپا نباشند. شرکت هایی که خریده یا ورشکست میشوند معمولا کاربرانشان را دست خالی رها میکنند. در حالی که این موضوع در موارد روی صفحه نمایش قابل مدیریت است، وقتی ان کامپیوتر کوچک به یک دستگاه بزرگ متصل است، عوض کردن ان بسیار دشوار تر خواهد شد.

۳- قابلیت به روز رسانی
عمر مفید دستگاه های متصل به اینترنت بسیار بیشتر از ان است که بتوان فرض کرد که کاربران انها را مثل تلفن های همراهشان هر دوسال یک بار عوض کنند. تولید کنندگان تلفن همراه میتوانند هر چیزی را در تولیداتشان تعبیه کنند، چون میدانند کاربران حدودا دو سال انها را نگه میدارند و بعد گوشی جدیدی میخرند. عمر مفید دستگاه هایی مثل ماشین ظرفشویی یا اجاق گاز بین ۵-۱۰ سال و برای بعضی کاربران حتی ازین هم بیشتر است. به یاد دارید گوشی تلفنتان ۱۰ سال پیش چه شکلی بود؟

به جای گرفتار کردن کاربران با سخت افزار های از رده خارجی که تا ابد به ماشین ظرفشویی کاملا سالم و قابل استفاده شان متصل است، یک طراحی خوب باید قابلیت ارتقا واحد پردازش را (به راحتی و بدون تاثیری روی خود دستگاه) به کاربر ارائه کند. در اینجا منظور از به راحتی بدون استفاده از ابزار است. طراحی ماژولار میتواند امکان فروش بروز رسانی ها را بعد از فروش اولیه برای کسب و کار فراهم کند. یک بازی برد برد برای مصرف کننده و تولید کننده.

این موضوع راجب نرم افزار نیز صدق میکند. سیاست های واضح و قابل فهمی برای برای پشتیبانی ارائه کنید. اگر میخواهید بدانید این کار چگونه انجام میشود، نگاهی به شرکت های نرم افزاری مانند مایکروسافت بیاندازید. انها به صورت شفاف به مشتریان خود توضیح میدهند که هر یک از محصولاتشان تا چه زمانی پشتیبانی میشوند و شما نیز باید این کار را انجام دهید.

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

سیاست های شما باید شامل این موارد باشند: کاربران چه زمانی دیگر اپدیت های مستقیم را دریافت نخواهند کرد، چه زمانی باید برای پشتیبانی تلفنی هزینه کنند (اگر باید هزینه ای بپردازند)، در صورت تعطیل شدن کسب و کار شما چه اتفاقی برای انها میافتد، چه نوع تضمینی برای ادامه کار سرویس های متصل به اینترنت ارائه میکنید و در صورت توقف پشتیبانی چه اتفاقی خواهد افتاد.

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

۴- گسترش پذیری
ای پی آی! کلمه سه حرفی زیبایی که برای گوش هر توسعه دهنده ای مانند موسیقی است. اطمینان حاصل کنید که هر چیزی که میسازید از ان برخوردار باشد، زیرا محصولتان استفاده هایی خواهد داشت که شما هیچگاه به ان فکر نکرده اید. قدرت اینترنت اشیا در ارتباط یک به یک محصول شما با فضای ابری که ان را مدیریت میکنید نیست، بلکه در تعامل دستگاه شما با بقیه دستگاه هاست.

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

۵- امنیت
ایا امنیت یک تصمیم مربوط به تجربه کاربری است؟ میتوانید این سوال را از کاربرانی بپرسید که دستگاه های نظارت بر نوزادشان هک شده. البته هک شدن اصطلاح بی موردی است زمانی که شما امنیت محصولتان را تامین نمیکنید.چیزی که میخواهم بگویم این است که در طراحی به امنیت فکر کنید. کسی از طراح تجربه کاربری انتظار ندارد بتواند اخرین تمهیدات امنیتی را در محصول به کار بگیرد. اما أصول اولیه را بدانید و سعی کنید از کاربرانتان محافظت کنید.

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

همه این مزایا به لطف کار شما به عنوان طراح تجربه کاربری اینترنت اشیا وجود خواهد داشت.

منلع: iotforall.com

خواندن بیشتر
26مرداد

دکمه غیر فعال و نحوه نمایش حالت غیر فعال

26/05/1398 علی دباغ منش تجربه کاربری, گرافال 39

خاکستری بودن دکمه‌ های غیر فعال کار درستی است؟

با دکمه های غیر فعال چه باید کرد؟ حذف کردن دکمه از مکان اصلیش و ظاهر کردن دوباره آن میتواند کاربر را گیج کند. به جای این کار، طراحان فعال نبودن دکمه را مشخص می کنند تا تغییر زیادی در رابط کاربری به وجود نیاید. راهی که بیشتر طراحان برای نشان دادن وضعیت غیر فعال از آن استفاده میکنند خاکستری کردن دکمه است. گرچه این راه حل هم باعث سردرگمی کاربر خواهد شد، زیرا حالت فعال دکمه شباهت کمی به حالت غیر فعال آن دارد.

 

دکمه غیر فعال
دکمه در دو حالت فعال و عدم فعال

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

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

دکمه غیر فعال

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

احتمال کمتری وجود دارد که کاربران دکمه های شفاف را با دکمه های دیگر اشتباه بگیرند. خاکستری بودن یک دکمه لزوما به معنی غیر فعال بودن آن نیست. گاهی از رنگ خاکستری برای نشان دادن اولویت پایین یک دکمه در میان گروهی از دکمه ها استفاده میشود (مثلا دکمه انصراف). کاربران به راحتی میتوانند یک دکمه عدم فعال خاکستری را با یک فراخوان عمل ثانویه یا بد تر از ان یک دکمه با طراحی بد و کنتراست پایین اشتباه بگیرند.
برای طراحی دکمه های غیر فعال، به جای تغییر رنگ از تغییر شفافیت استفاده کنید. مقدار شفافیت مناسب بستگی به رنگ پس زمینه دارد. اما به صورت کلی میتوانید از شفافیت ۴۰٪ یا کمتر استفاده کنید. مهم است که شفافیت را به اندازه کافی پایین بیاورید، وگرنه بعضی کاربران همچنان آن را به عنوان دکمه فعال خواهند دید.
با پیروی ازین نکته،بدون ایجاد غافلگیری برای کاربر فعال نبودن دکمه هایتان را به آن ها نشان میدهید و در عوض کاربران از نرمی و روان بودن طراحی شما غافلگیر خواهند شد!

منبع: uxmovement.com

خواندن بیشتر
12مرداد

طراحی تعاملی (Interaction Design) چیست؟

12/05/1398 نگین متین طراحی تعاملی 31

طراحی تعاملی یکی از اجزای مهم در تجربه کاربری (User Experience) است. در این مقاله به توضیح طراحی تعاملی و تعدادی از مدل های مفید آن می‌پردازیم. همچنین به طور مختصر وظایف یک طراح تعاملی را شرح می‌دهیم.

تعریف طراح تعاملی به زبان ساده و کاربردی

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

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

باتوجه به نکات ذکر شده در بالا، بین طراحی تعاملی و طراحی تجربه کاربری یک هم‌پوشانی وجود دارد. طراحی UX درباره شکل دادن به تجربه استفاده از یک محصول است و بخش اعظم آن تجربه شامل تعامل بین کاربر و محصول است. در واقع طراحی تجربه کاربری فراتر از طراحی تعاملی است، زیرا شامل تحقیقات کاربری (مشخص کردن کاربران هدف در وهله اول)، ایجاد پرسنای کاربر(چرا و تحت چه شرایطی کاربر از محصول استفاده می‌کند؟)، تست کاربری، تست کاربردپذیری و …است.

طراحی تعاملی 5 بعدی

این طراحی یکی از مدل‌های مفید برای درک طراحی تعاملی می‌باشد. Gillian Crampton Smith، استاد طراحی تعامل، ابتدا مفهوم زبان طراحی تعامل 4 بعدی را معرفی کرد  که Kevin Silver، طراح ارشد تعامل در آزمایشگاه‌های IDEXX، پنجمین مورد را اضافه کرد.

بعد اول: کلمات

کلمات، به ویژه آن‌هایی که در تعاملات استفاده می‌شوند مانند برچسب دکمه‌ها (Button Labels) باید قابل درک و ساده باشند. آنها باید به اندازه کافی به کاربر اطلاعات بدهند زیرا در صورت زیاد بودن اطلاعات موجب رنجش کاربر می‌شوند.

بعد دوم : نمایش بصری

این بعد مربوط به عناصر گرافیکی مانند تصاویر، تایپوگرافی و آیکن‌هایی است که کاربران با آنها سر‌‌‌‌‌‌وکار دارند . اینها تکمیل کننده بعد اول یا کلمات هستند .

بعد سوم: اشیا فیزیکی یا فضا

در این بعد به طریقه ارتباط کاربران با اشیا فیزیکی یا محصول میپردازیم.  به طور مثال هنگام استفاده از لپ‌تاپ از موس استفاده می‌کنند یا صفحه لمسی؟ یا در خصوص تلفن هوشمند آیا کاربران تمایل دارند از انگشتانشان استفاده کنند؟ کاربر در چه نوع فضای فیزیکی از محصولات استفاده می‌کند؟ به عنوان مثال آیا کاربر در حین استفاده از برنامه روی گوشی در قطار شلوغ ایستاده است؟ یا در دفتر کارش نشسته است و در اینترنت گشت و گذار می‌کند؟ این موارد روی تعامل بین کاربر و محصول اثر میگذارد.

بعد چهارم: زمان

در حالی که این بعد کمی انتزاعی به نظر می‌رسد، بیشتر مربوط به رسانه‌هایی است که با گذشت زمان تغییر می‌کنند (مانند انیمیشن ، فیلم ها و صداها). حرکت‌ها و صداها در تعامل با کاربران نقش مهمی در بازخورد بصری و صوتی دارند.

بعد پنجم: ‌رفتارها

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

سوالات مهمی که هر طراح تعاملی باید بپرسد:

چگونه طراحان تعامل از مدل 5 بعدی بالا در جهت ایجاد تعامل‌های معنی‌دار استفاده می‌کنند؟ برای درک این موضوع ما نگاهی به سوالات مهمی که طراح تعامل باید هنگام طراحی محصول برای کاربران از خود بپرسد می‌پردازیم.

  • کاربر با موس، انگشت و قلم چه کار میتواند بکند تا به صورت مستقیم با رابط ارتباط پیدا کند؟(به ما کمک میکند تا تعاملات احتمالی کاربر با محصول را تعریف کنیم)
  • در مورد ظاهر(رنگ ،شکل ، سایز و …) به کاربر درباره عملکرد محصول سرنخ میدهد (به ما کمک میکند تا به کاربران سرنخ هایی درباره رفتارهای احتمالی بدهیم)
  • پیام‌های خطایی به کاربر نشان دهیم تا اشتباهش را بفهمد یا توضیح دهد چرا این خطا رخ داده است؟ که باعث امکان پیش‌بینی و کاهش خطا می‌شود.
  • کاربر بعد از انجام هر عمل چه بازخوردی دریافت می‌کند؟ با این مورد ما اطمینان پیدا می‌کنیم که سیستم در زمان معقول بعد از اقدامات کاربر، بازخورد ارائه می‌دهد.
  • آیا عناصر رابط، اندازه معقول و منطقی برای تعامل دارند؟ سؤالاتی از این دست به ما کمک می‌کند تا درباره هر عنصر مورد استفاده در محصول به طور استراتژیک فکر کنیم.
  • آیا از قالب‌های آشنا یا استاندارد استفاده می‌شود؟ از عناصر و فرمت‌های استاندارد برای ساده‌سازی و تقویت یادگیری یک محصول استفاده می‌شود.

طراحان تعاملی چه کاری انجام می‌دهند؟

به شرایط بستگی دارد.

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

اما در شرکت‌های کوچکتر، بیشتر کارهای طراحی UX، ممکن است تنها توسط یک الی دو نفر انجام شود(کسانی که ممکن است عنوان طراح تعاملی نداشته باشند)

در اینجا برخی از وظایف روزانه طراحان تعامل آورده شده است:

  • استراتژی طراحی: این مربوط به هدف(اهداف) کاربر و تعاملاتی است که برای دستیابی به این اهداف، ضروری می‌باشند. بسته به نوع شرکت، طراحان تعامل ممکن است تحقیقات کاربر را انجام دهند تا اهداف کاربران را قبل از ایجاد استراتژی تعامل بفهمند.
  • وایرفریم و پروتوتایپ: این مسئله مجدداً به توضیحات شغلی شرکت بستگی دارد ، اما بیشتر طراحان تعامل وظیفه دارند وایرفریمی بسازند که تعاملات در محصول را نشان دهد. بعضی اوقات ، طراحان تعامل ممکن است نمونه‌های تعاملی باکیفیتی دقیقا مثل برنامه‌ها یا وب‌سایت‌های واقعی بسازند.
  • غرق شدن در طراحی تعاملی: اگر علاقه دارید اطلاعات بیشتری در مورد طراحی تعامل کسب کنید، می‌توانید معرفی مختصر طراحی تعامل نوشته Jonas Lowgren را مطالعه کنید که بخشی از دانشنامه تعامل انسان و کامپیوتر است. این یک مقدمه معتبر برای این زمینه می‌باشد، همچنین منابع دیگری را برای کسب اطلاعات بیشتر به شما می‌دهد.
خواندن بیشتر
14اردیبهشت

تجربه کاربری آیکونز ۸ – طراحی مجدد وب اپ جهت استفاده بهتر – قسمت دوم

14/02/1398 محسن نجفی گرافال 32

فشرده سازی

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

مدل های آیکون گروه بندی شده

قبلاً وقتی که طراحی جدید انجام می دادیم، چهار مدل آیکون در اختیار داشتیم اما در حال حاضر بیشتر از دوازده عدد آیکن داریم. بدترین قسمت این است که اسم مدل، اشاره ایی به ویژگی های بصری آیکون نمی کند. چه کسی می داند مدلی به نام “داسک” چه شکلی است؟ بنابراین ما آنها را گروه بندی کردیم.

دانلود کردن

ما ماجرای طولانی ایی در جستجوی روشی برای کنترل کامل دانلود داشتیم.
• نه جادوگری وجود دارد که شما را وادار به حرکت رو به جلو می کند وقتی که آیکون جدیدی دانلود می کنید.
• نه یک شکل بزرگ که صفحه شما را خراب کند.
• ما طرحی داشتیم که تست قابلیت استفاده را پشت سر گذاشته است و اکنون ما شروع به زیباسازی آن کرده ایم.
مشکل اینجاست که شما فقط می‌توانید گزینه‌های مرتبط به دانلود را در صفحه قرار ردهید . مثلاً ساخت فونت جدای از این موضوع است.
بنابراین ما این موضوع را رها کردیم و زمینه گفتگو را ایجاد کردیم.
آخرین تکرارها به این صورت است:

سایر موارد

از آنجایی که این مقاله بین طولانی بودن “متن” و “کسل کننده ” بودن آن تعادل بر قرار کرد، لطفاً اجازه دهید من فقط همه موارد ارتقاء یافته را لیست کنم و حداقل تا حدی به اجرا در آورم.
• حذف منوی بالایی
• طراحی دوباره منوی اکانت
• ایجاد عکس پروفایل
• اضافه کردن پیش‌نمایش مدل در هوم پیج به جای آیکن جدید.
همچنین ما نهایت تلاش خود را در جهت بهبود عملکردمان کردیم و شاید این اولین بار است که من در صفحه تست رتبه AAAA را دیده ام.

پیشرفت‌های آینده

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

نوبت شما

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

منبع: icons8.com

خواندن بیشتر
    123