طراحی درست تجربهی کاربری، زمانیست که واقعا به جای کاربر تجربه کنیم!
همانطور که همهی ما میدانیم در UX و مشخص کردن مسیر حرکت و تجربه در یک محصول برای کاربر، مهمترین موضوع این است که بتوانیم از نگاه کاربران مساله را ببینیم و بتوانیم تصمیم بگیریم که در یک لحظه و در یک صفحه به چه چیزهایی نیاز دارد و لازم است چه چیزهایی دمدستتر قرار بگیرند و چه چیزهایی پنهانتر.
در طراحی تجربهی کاربری بعد از نیاز به همدلی کامل با کاربر به قوانین و قواعدی نیاز داربم که با رعایت آنها میتوان UX خوب را از بد تفکیک کرد.
چند مورد از قوانین:
۱. کاربر در هر لحظه باید وضعیت فعلی خود را بداند مثلا اگر جایی در حال لود کردن صفحهای هستیم با آیکن لودینگ این موضوع را به کاربر نشان دهیم.
۲. استفاده از زبان و جملات واضح و شفاف.
۳. استفاده موثر از رنگها و چیدمان محتوا.
۴. کاهش انتخابهای کاربر و به دنبال آن کاهش خطاها.
۵. روشن کردن مسیر و دلیل خطا بعد از اعلام آن به کاربر.
۶. در طراحی مسیرها، کاربر را «در نظر بگیرید!»
در این مقاله میتوانید توضیحات تمام این موارد را مطالعه کرده و با مشاهدهی تصاویر تمایز آنهارا متوجه شوید و پس از این تجربهی بهتری برای کاربران طراحی کنید!
https://bit.ly/dxgn831
(زمان حدودی مطالعه: ۱۰ دقیقه)
نویسنده: یگانه یغماییان
#طراحی #تجربه_کاربری #اصول
@Dexign فلسفه دیزاین
______
همانطور که همهی ما میدانیم در UX و مشخص کردن مسیر حرکت و تجربه در یک محصول برای کاربر، مهمترین موضوع این است که بتوانیم از نگاه کاربران مساله را ببینیم و بتوانیم تصمیم بگیریم که در یک لحظه و در یک صفحه به چه چیزهایی نیاز دارد و لازم است چه چیزهایی دمدستتر قرار بگیرند و چه چیزهایی پنهانتر.
در طراحی تجربهی کاربری بعد از نیاز به همدلی کامل با کاربر به قوانین و قواعدی نیاز داربم که با رعایت آنها میتوان UX خوب را از بد تفکیک کرد.
چند مورد از قوانین:
۱. کاربر در هر لحظه باید وضعیت فعلی خود را بداند مثلا اگر جایی در حال لود کردن صفحهای هستیم با آیکن لودینگ این موضوع را به کاربر نشان دهیم.
۲. استفاده از زبان و جملات واضح و شفاف.
۳. استفاده موثر از رنگها و چیدمان محتوا.
۴. کاهش انتخابهای کاربر و به دنبال آن کاهش خطاها.
۵. روشن کردن مسیر و دلیل خطا بعد از اعلام آن به کاربر.
۶. در طراحی مسیرها، کاربر را «در نظر بگیرید!»
در این مقاله میتوانید توضیحات تمام این موارد را مطالعه کرده و با مشاهدهی تصاویر تمایز آنهارا متوجه شوید و پس از این تجربهی بهتری برای کاربران طراحی کنید!
https://bit.ly/dxgn831
(زمان حدودی مطالعه: ۱۰ دقیقه)
نویسنده: یگانه یغماییان
#طراحی #تجربه_کاربری #اصول
@Dexign فلسفه دیزاین
______
Ideas
Eye-Opening Examples of Good & Bad UX Design | Adobe XD Ideas
Explore some examples of UX design decisions and visualize the differences between good UX design and bad UX design and the impact they can have on users.
کاربرد پذیری در طراحی نمودارها
این روزها شاید بیشتر از هر زمانی وبسایتها و اپلیکیشنهایی که طراحی میکنیم مبتنی بر دیتا هستند. این دیتا معمولا توسط چارتها و نمودارها نمایش داده میشود. رعایت جزئیات و استانداردهای مربوط به دیزاین نمودارها میتواند ریسک سردرگمی و خستگی کاربر را تا حد چشمگیری کاهش دهد و در نتیجه اگر در کنار توجه به گرافیک نمودارها، استانداردهای کاربردپذیری آنها را نیز در نظر داشته باشیم و به کار بگیریم میتواند گامی مثبت در جهت بهبود تجربه کاربر باشد.
در این مقاله به ۲۰ نکته برای بهبود کاربرد پذیری نمودارها اشاره شده که بخشی از آنها را به اختصار بررسی میکنیم:
- بهترین راه برای انتخاب دقیق و درست نوع چارت توجه به نوع دیتا و همچنین توجه به جامعه کاربران و دیتای به دست آمده از مصاحبه با کاربر است.
- نوارهای نمودار را بر اساس نوع ارزش آنها جانمایی کنید. برای مثال از محور های X و Y برای جانمایی ارزشهای مثبت و منفی در دیتا استفاده کنید.
- برای جلوگیری از برداشت نادرست اطلاعات نمودارها همیشه نوارهای نمودار را از نقطه پایه (صفر) شروع کنید.
- خطوط منحنی در نمودارهای خطی از لحاظ بصری دلنشین هستند اما در نمودارهای خطی شکسته دیتا به شکل دقیقتر و درستتری منتقل میشود.
- نمودارهای دو محوره معمولا علاوه بر مشکلات خوانایی، برای کاربر گیج کننده هستند و معنی قیاس را در ذهن آنها تداعی میکنند.
- در نمودارهای pie بهتر است دیتای متعدد ریز را در یک بخش تحت عنوان "سایر" قرار دهید. همچنین لیبلهایشان را نه مستقیم روی بخشها، و نه به صورت راهنما در کنار آن، بلکه توسط خطوط ریلیشن در کنار آنها جاگذاری کنید.
- از جانمایی رندوم دیتای نمودار خودداری کنید و جهت و نحوه حرکت چشم انسان را در آنها در نظر بگیرید.
- از طراحی بیش از حد المان های گرافیکی یا استایلینگ غیرضروری خودداری کنید.
- برای هر چارت از پالت رنگی مرتبط استفاده کنید. انتخاب پالت رنگی برای نمودارها معمولا سه حالت دارد : ۱-کیفی (qualitative) ۲-ترتیبی (Sequential) ۳-واگرا (Divergent)
- به دسترسی پذیری کنتراست رنگی در نمودارها توجه کنید و افراد دارای معلولیتهای بینایی را در نظر بگیرید.
مقاله زیر به تمامی این نکات به صورت کامل پرداخته است:
https://bit.ly/dxgn832
(زمان حدودی مطالعه: ۷ دقیقه)
نویسنده : فریما فرحمند
#طراحی #کاربردپذیری #نمودار #اصول
@Dexign فلسفه دیزاین
______
این روزها شاید بیشتر از هر زمانی وبسایتها و اپلیکیشنهایی که طراحی میکنیم مبتنی بر دیتا هستند. این دیتا معمولا توسط چارتها و نمودارها نمایش داده میشود. رعایت جزئیات و استانداردهای مربوط به دیزاین نمودارها میتواند ریسک سردرگمی و خستگی کاربر را تا حد چشمگیری کاهش دهد و در نتیجه اگر در کنار توجه به گرافیک نمودارها، استانداردهای کاربردپذیری آنها را نیز در نظر داشته باشیم و به کار بگیریم میتواند گامی مثبت در جهت بهبود تجربه کاربر باشد.
در این مقاله به ۲۰ نکته برای بهبود کاربرد پذیری نمودارها اشاره شده که بخشی از آنها را به اختصار بررسی میکنیم:
- بهترین راه برای انتخاب دقیق و درست نوع چارت توجه به نوع دیتا و همچنین توجه به جامعه کاربران و دیتای به دست آمده از مصاحبه با کاربر است.
- نوارهای نمودار را بر اساس نوع ارزش آنها جانمایی کنید. برای مثال از محور های X و Y برای جانمایی ارزشهای مثبت و منفی در دیتا استفاده کنید.
- برای جلوگیری از برداشت نادرست اطلاعات نمودارها همیشه نوارهای نمودار را از نقطه پایه (صفر) شروع کنید.
- خطوط منحنی در نمودارهای خطی از لحاظ بصری دلنشین هستند اما در نمودارهای خطی شکسته دیتا به شکل دقیقتر و درستتری منتقل میشود.
- نمودارهای دو محوره معمولا علاوه بر مشکلات خوانایی، برای کاربر گیج کننده هستند و معنی قیاس را در ذهن آنها تداعی میکنند.
- در نمودارهای pie بهتر است دیتای متعدد ریز را در یک بخش تحت عنوان "سایر" قرار دهید. همچنین لیبلهایشان را نه مستقیم روی بخشها، و نه به صورت راهنما در کنار آن، بلکه توسط خطوط ریلیشن در کنار آنها جاگذاری کنید.
- از جانمایی رندوم دیتای نمودار خودداری کنید و جهت و نحوه حرکت چشم انسان را در آنها در نظر بگیرید.
- از طراحی بیش از حد المان های گرافیکی یا استایلینگ غیرضروری خودداری کنید.
- برای هر چارت از پالت رنگی مرتبط استفاده کنید. انتخاب پالت رنگی برای نمودارها معمولا سه حالت دارد : ۱-کیفی (qualitative) ۲-ترتیبی (Sequential) ۳-واگرا (Divergent)
- به دسترسی پذیری کنتراست رنگی در نمودارها توجه کنید و افراد دارای معلولیتهای بینایی را در نظر بگیرید.
مقاله زیر به تمامی این نکات به صورت کامل پرداخته است:
https://bit.ly/dxgn832
(زمان حدودی مطالعه: ۷ دقیقه)
نویسنده : فریما فرحمند
#طراحی #کاربردپذیری #نمودار #اصول
@Dexign فلسفه دیزاین
______
Medium
20 ideas for better data visualization
Applications we design are becoming increasingly data-driven. The need for quality data visualization is high as ever. Confusing and…
چگونه برای محصول خود «نقشه سایت» بسازیم!
نقشه سایت یا همان Sitemap یک دیاگرام سلسلهمراتبی برای وبسایت یا اپلیکیشن است که نشان میدهد صفحات مختلف چگونه اولویتبندی شده، به هم متصل شده و برچسبزنی شدهاند. نقشه سایت مانند دید یک پرنده در حال پرواز، تمامی بخشها و اتصالات آنها را نمایش میدهد. طراحی نقشه سایت یکی از قدمهای اولیه در فرایند طراحی محصول است. این کار معمولا پس از طراحی پرسونا، نقشه سفر کاربر و در حین طراحی معماری اطلاعات صورت میگیرد.
طراحی نقشه سایت از این جهت اهمیت دارد که به شما اجازه میدهد تا برای کاربردپذیری محصول خود (چه طراحی یک محصول جدید یا بازطراحی یک محصول موجود) برنامهریزی کنید. مزیت دیگر آن ایجاد یک دید کلی و جامع درباره محصول است که به شما کمک میکند محصول خود را ساده کرده، صفحات اضافی را حذف کنید و تنها بخشها و محتوای مهم را نگه دارید.همچنین نقشه سایت به شما کمک میکند تا بفهمید آیا صفحات مرتبط به هم از نظر کاربر و SEO مناسب و بهینه هستند یا خیر.
بنابراین میتوان دید که علیرغم ظاهر و ساختار ساده و معمول نقشه سایت، طراحی آن میتواند اهمیت زیادی داشته و تاثیر زیادی بر فرایند طراحی محصول بگذارد. برای آشنایی بیشتر با نکات مربوط به طراحی نقشه سایت میتوانید مقاله زیر را مطالعه کنید:
https://bit.ly/dxgn833
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده : محمدرضا پناهی
#نقشه_سایت
@Dexign فلسفه دیزاین
_______
نقشه سایت یا همان Sitemap یک دیاگرام سلسلهمراتبی برای وبسایت یا اپلیکیشن است که نشان میدهد صفحات مختلف چگونه اولویتبندی شده، به هم متصل شده و برچسبزنی شدهاند. نقشه سایت مانند دید یک پرنده در حال پرواز، تمامی بخشها و اتصالات آنها را نمایش میدهد. طراحی نقشه سایت یکی از قدمهای اولیه در فرایند طراحی محصول است. این کار معمولا پس از طراحی پرسونا، نقشه سفر کاربر و در حین طراحی معماری اطلاعات صورت میگیرد.
طراحی نقشه سایت از این جهت اهمیت دارد که به شما اجازه میدهد تا برای کاربردپذیری محصول خود (چه طراحی یک محصول جدید یا بازطراحی یک محصول موجود) برنامهریزی کنید. مزیت دیگر آن ایجاد یک دید کلی و جامع درباره محصول است که به شما کمک میکند محصول خود را ساده کرده، صفحات اضافی را حذف کنید و تنها بخشها و محتوای مهم را نگه دارید.همچنین نقشه سایت به شما کمک میکند تا بفهمید آیا صفحات مرتبط به هم از نظر کاربر و SEO مناسب و بهینه هستند یا خیر.
بنابراین میتوان دید که علیرغم ظاهر و ساختار ساده و معمول نقشه سایت، طراحی آن میتواند اهمیت زیادی داشته و تاثیر زیادی بر فرایند طراحی محصول بگذارد. برای آشنایی بیشتر با نکات مربوط به طراحی نقشه سایت میتوانید مقاله زیر را مطالعه کنید:
https://bit.ly/dxgn833
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده : محمدرضا پناهی
#نقشه_سایت
@Dexign فلسفه دیزاین
_______
Medium
How to create a UX Sitemap: a simple guideline
“As a little kid, I climbed a lot of trees because I always loved the bird’s-eye view” - Felix Baumgartner, Stratosphere Skydiver
چگونه در طراحی محصولات دیجیتال، حرفهای رفتار کنیم؟
چه در مراحل اولیه شغلتان باشید و چه سالیانی تجربه کسب کرده باشید، نکاتی که امروز میخواهیم با آنها آشنا شویم، ما را دیزاینر بهتری خواهد کرد. پس سخن کوتاه میکنم و به ۱۰ مورد بااهمیت آنها اشاره میکنم:
۱. نه تنها آنچه را که از شما خواسته شده انجام دهید، بلکه بفهمید که چرا باید آن را انجام دهید. به بیان دیگر به جای وظیفهمحوری به راهحل بیاندیشید.
۲. فقط در مورد دیزاین نیست؛ پای «آدمها» درکسب و کار در میان است. در واقع ایجاد روابط خوب و درک خواستههای ذینفعان بسیار مهم است.
۳. قبل از انجام دیزاین، تحقیق کنید و کاربران خود را تا حد ممکن درک کنید. تمامی تجارب و احساساتی که میخواهیم در دیزاین بیاوریم، نیازمند جستجو، تحقیق و الهام گرفتن است. پس این مرحله مهم را نادیده نگیرید.
۴. در طول زندگی روزمره خود هنگامی که با دیزاینهای بد و خوب مواجه میشوید، آنها را یادداشت کنید تا نسبت به کاربرانِ دیزاینهای خود احساس همدلی بیشتری کنید.
۵. در قبال محتوا مسئولیتپذیر باشید و بدانید که بخشی از تجربه کاربر است. تا میتوانید از محتوای آماده استفاده نکنید و سعی کنید از دیدگاه یک کاربر، محتوا را انتخاب کنید و بعدا آنها را با کپیرایتر یا مالک محصول، بررسی کنید.
۶. سعی کنید تا حد امکان بهترین تجربه را برای همه کاربران به ارمغان بیاورید. دسترسپذیری یک همدلی خوب با کاربران دارای معلولیت، نیازهای خاص و یا سالمند شماست. اگر در دیزاین جایی متوجه شدید که مشکلی برای دسترسی وجود دارد، آن را با متخصصان این حوزه بررسی کنید.
۷. درک کنید که توسعهدهنده به چه چیزی نیاز دارد و تا آنجا که ممکن است او را پشتیبانی کنید. بعد از اتمام دیزاین منتظر این باشید که از سمت توسعهدهنده نواقصی آشکار میشود که در هنگام دیزاین متوجه آن نبودید. پس تا میتوانید به او کمک کنید.
۸. متوجه شوید که در دیزاین چه تصمیماتی گرفتهایید تا بتوانید بعدا آن را به توسعهدهندگان توضیح دهید و در صورتی که تقاضایی برای تغییر، جهت سهولت در نوشتن کد داشتند، بتوانید از آن دفاع کنید.
۹. قادر به برقراری ارتباط به گونهای باشید که مخاطب متوجه شود. به جای صحبت از المانهای دیزاین، دربارهی این صحبت کنید که راهحلهای شما، چه نیازی از کاربران را پاسخ داده است.
۱۰. هنگام چالشها به جای ناامید شدن، ببینید که چطور میتوانید مشکل را حل کنید. در واقع این همان چیزیست که شما به خاطر آن استخدام شدهاید.
مقالهی زیر را باز کرده و ایلاستریشنهای سادهی آن را ببینید، بسیار عمیقتر این مطلب را درک خواهید کرد.
https://bit.ly/dxgn834-1
(زمان حدودی مطالعه مقاله: ۸ دقیقه)
نویسنده: حسین میرزاده
#تفکر_رشد #تفکر_طراحی #رفتار_حرفهای
@Dexign فلسفه دیزاین
_______
چه در مراحل اولیه شغلتان باشید و چه سالیانی تجربه کسب کرده باشید، نکاتی که امروز میخواهیم با آنها آشنا شویم، ما را دیزاینر بهتری خواهد کرد. پس سخن کوتاه میکنم و به ۱۰ مورد بااهمیت آنها اشاره میکنم:
۱. نه تنها آنچه را که از شما خواسته شده انجام دهید، بلکه بفهمید که چرا باید آن را انجام دهید. به بیان دیگر به جای وظیفهمحوری به راهحل بیاندیشید.
۲. فقط در مورد دیزاین نیست؛ پای «آدمها» درکسب و کار در میان است. در واقع ایجاد روابط خوب و درک خواستههای ذینفعان بسیار مهم است.
۳. قبل از انجام دیزاین، تحقیق کنید و کاربران خود را تا حد ممکن درک کنید. تمامی تجارب و احساساتی که میخواهیم در دیزاین بیاوریم، نیازمند جستجو، تحقیق و الهام گرفتن است. پس این مرحله مهم را نادیده نگیرید.
۴. در طول زندگی روزمره خود هنگامی که با دیزاینهای بد و خوب مواجه میشوید، آنها را یادداشت کنید تا نسبت به کاربرانِ دیزاینهای خود احساس همدلی بیشتری کنید.
۵. در قبال محتوا مسئولیتپذیر باشید و بدانید که بخشی از تجربه کاربر است. تا میتوانید از محتوای آماده استفاده نکنید و سعی کنید از دیدگاه یک کاربر، محتوا را انتخاب کنید و بعدا آنها را با کپیرایتر یا مالک محصول، بررسی کنید.
۶. سعی کنید تا حد امکان بهترین تجربه را برای همه کاربران به ارمغان بیاورید. دسترسپذیری یک همدلی خوب با کاربران دارای معلولیت، نیازهای خاص و یا سالمند شماست. اگر در دیزاین جایی متوجه شدید که مشکلی برای دسترسی وجود دارد، آن را با متخصصان این حوزه بررسی کنید.
۷. درک کنید که توسعهدهنده به چه چیزی نیاز دارد و تا آنجا که ممکن است او را پشتیبانی کنید. بعد از اتمام دیزاین منتظر این باشید که از سمت توسعهدهنده نواقصی آشکار میشود که در هنگام دیزاین متوجه آن نبودید. پس تا میتوانید به او کمک کنید.
۸. متوجه شوید که در دیزاین چه تصمیماتی گرفتهایید تا بتوانید بعدا آن را به توسعهدهندگان توضیح دهید و در صورتی که تقاضایی برای تغییر، جهت سهولت در نوشتن کد داشتند، بتوانید از آن دفاع کنید.
۹. قادر به برقراری ارتباط به گونهای باشید که مخاطب متوجه شود. به جای صحبت از المانهای دیزاین، دربارهی این صحبت کنید که راهحلهای شما، چه نیازی از کاربران را پاسخ داده است.
۱۰. هنگام چالشها به جای ناامید شدن، ببینید که چطور میتوانید مشکل را حل کنید. در واقع این همان چیزیست که شما به خاطر آن استخدام شدهاید.
مقالهی زیر را باز کرده و ایلاستریشنهای سادهی آن را ببینید، بسیار عمیقتر این مطلب را درک خواهید کرد.
https://bit.ly/dxgn834-1
(زمان حدودی مطالعه مقاله: ۸ دقیقه)
نویسنده: حسین میرزاده
#تفکر_رشد #تفکر_طراحی #رفتار_حرفهای
@Dexign فلسفه دیزاین
_______
Medium
10 signs indicate you are a senior designer
When I was a junior-level designer, I had been wondering how to advance in my career. Reflecting on my earlier way of working, I have come…
مبانی رنگ در طراحی رابط کاربری
رنگ یک مفهوم حسی است که چشمها از نور درک میکنند و در اشکال مختلفی از معانی، مفاهیم و احساسات ترجمه میشوند. در نقاشی، عکاسی، طراحی گرافیک، طراحی رابط کاربری و ... از نظریه رنگ برای برانگیختن ایدهها و مفاهیم خاص استفاده میکنیم و از ظرفیت غیر کلامی رنگها برای رساندن سریع مفاهیم به مخاطب در مقایسه با سایر اشکال ارتباطی کندتر نیز استفاده میشود.
در طراحی رابطهای کاربری روانشناسی رنگها برای تاثیر بر ادراک کاربر از تقویت شناخت برند تا ایجاد کلیکهای بیشتر بر روی دکمه خرید، مورد استفاده قرار میگیرد. حتی بهبود قابلیت کاربردپذیری نیز میتواند از نتایج تسلط بر شناخت و استفاده از رنگها باشد.
در مقالهای که میخوانید نویسنده به ۶ مورد از مواردی که در انتخاب رنگ برای طراحی رابط کاربری معمولا توجه میکند پرداخته است.
- پیوند: رنگهای به خصوصی با احساسات خاصی پیوند خوردهاند، اما نه همیشه
در بدو تولد با یادگیری رنگهای طبیعی در دنیا و با گذر زمان حافظه ما این رنگها را با تجربیات خاصی به یاد میآورد و میشناسد که این آشنایی میتواند در طراحی رابط کاربری به کار گرفته شود.
- هماهنگی: رنگهای هماهنگ به المانها احساسی منطقی میدهند،
راههای بسیاری برای ایجاد هارمونی رنگ وجود دارد. یکی از این راهها استفاده از رنگهای مشابه است. رنگهایی که در color wheel به یکدیگر نزدیکاند.
- کنتراست: کنتراست رنگ به رابط کاربری پویایی میبخشد.
شکل دیگری از رنگهایی هماهنگ با استفاده از رنگهای مکمل به دست میآید. در واقع با استفاده از عناصر رنگ مکمل، می توانید جلوه ای از تضاد و پویایی در طراحی ایجاد کنید.
- مقیاس: مقیاسهای رنگ بار شناختی را کاهش میدهد.
حفظ رنگ اما تغییر میزان نور و درخشندگی در سطوح مختلف به جدا کردن عناصر با زحمتی کمتر برای مخاطب و کاربر و به تفکیکپذیری بهتر ترکیب کمک میکند.
- تناسب: تعیین نسبت رنگ، ترکیب را متعادل میکند.
حضور رنگهای کمتر، وضوح را در استایل ایجاد میکند و از درگیری رنگهای غیر ضروری جلوگیری میکند.
- اینتراکشن: رنگهای اینتراکشنها نیز باید واضح باشند با به صورت یکپارچه در طراحی رابط کاربری به کار روند.
دعوت به انجام عملی در رابط کاربری باید دارای تضاد کافی نسبت به پس زمینه و نیز وزن بصری کافی نسبت به سایر اجزا باشد تا کاربر بتواند آنها را بدون زحمت شناسایی کند.
در لینک ضمیمه شده به تفصیل بخوانید:
https://bit.ly/dxgn835
نویسنده: رشید مسعودی
(زمان حدودی مطالعه: ۶ دقیقه)
#رنگ #پالترنگ #اصولرنگ #رابطکاربری #UI
@Dexign فلسفه دیزاین
_______
رنگ یک مفهوم حسی است که چشمها از نور درک میکنند و در اشکال مختلفی از معانی، مفاهیم و احساسات ترجمه میشوند. در نقاشی، عکاسی، طراحی گرافیک، طراحی رابط کاربری و ... از نظریه رنگ برای برانگیختن ایدهها و مفاهیم خاص استفاده میکنیم و از ظرفیت غیر کلامی رنگها برای رساندن سریع مفاهیم به مخاطب در مقایسه با سایر اشکال ارتباطی کندتر نیز استفاده میشود.
در طراحی رابطهای کاربری روانشناسی رنگها برای تاثیر بر ادراک کاربر از تقویت شناخت برند تا ایجاد کلیکهای بیشتر بر روی دکمه خرید، مورد استفاده قرار میگیرد. حتی بهبود قابلیت کاربردپذیری نیز میتواند از نتایج تسلط بر شناخت و استفاده از رنگها باشد.
در مقالهای که میخوانید نویسنده به ۶ مورد از مواردی که در انتخاب رنگ برای طراحی رابط کاربری معمولا توجه میکند پرداخته است.
- پیوند: رنگهای به خصوصی با احساسات خاصی پیوند خوردهاند، اما نه همیشه
در بدو تولد با یادگیری رنگهای طبیعی در دنیا و با گذر زمان حافظه ما این رنگها را با تجربیات خاصی به یاد میآورد و میشناسد که این آشنایی میتواند در طراحی رابط کاربری به کار گرفته شود.
- هماهنگی: رنگهای هماهنگ به المانها احساسی منطقی میدهند،
راههای بسیاری برای ایجاد هارمونی رنگ وجود دارد. یکی از این راهها استفاده از رنگهای مشابه است. رنگهایی که در color wheel به یکدیگر نزدیکاند.
- کنتراست: کنتراست رنگ به رابط کاربری پویایی میبخشد.
شکل دیگری از رنگهایی هماهنگ با استفاده از رنگهای مکمل به دست میآید. در واقع با استفاده از عناصر رنگ مکمل، می توانید جلوه ای از تضاد و پویایی در طراحی ایجاد کنید.
- مقیاس: مقیاسهای رنگ بار شناختی را کاهش میدهد.
حفظ رنگ اما تغییر میزان نور و درخشندگی در سطوح مختلف به جدا کردن عناصر با زحمتی کمتر برای مخاطب و کاربر و به تفکیکپذیری بهتر ترکیب کمک میکند.
- تناسب: تعیین نسبت رنگ، ترکیب را متعادل میکند.
حضور رنگهای کمتر، وضوح را در استایل ایجاد میکند و از درگیری رنگهای غیر ضروری جلوگیری میکند.
- اینتراکشن: رنگهای اینتراکشنها نیز باید واضح باشند با به صورت یکپارچه در طراحی رابط کاربری به کار روند.
دعوت به انجام عملی در رابط کاربری باید دارای تضاد کافی نسبت به پس زمینه و نیز وزن بصری کافی نسبت به سایر اجزا باشد تا کاربر بتواند آنها را بدون زحمت شناسایی کند.
در لینک ضمیمه شده به تفصیل بخوانید:
https://bit.ly/dxgn835
نویسنده: رشید مسعودی
(زمان حدودی مطالعه: ۶ دقیقه)
#رنگ #پالترنگ #اصولرنگ #رابطکاربری #UI
@Dexign فلسفه دیزاین
_______
Medium
Fundamentals of color in user interface design (UI)
Simple rules to get a professional color scheme
اصول انتخاب رنگها
بسیاری معتقدند در طراحی محصول، استفاده از رنگها تنها به سلیقهی طراح مربوط میشود در حالیکه اهمیت این موضوع در طراحی بسیار بالاتر از این است که هر فرد با سلیقهی خود درگیر آن شود.
تحقیقات نشان از آن دارند که هر کاربر در ۹۰ ثانیه اول برخورد با هر محصول، آن را قضاوت میکند و رنگهای بکار برده شده در محصول، قسمت اصلی این قضاوت را در برمیگیرند.
دایرهی رنگ که دایرهای متشکل از رنگهای مختلف است [تصویر آن را در مقاله معرفی شده میبینیم] به درک نحوه ارتباط رنگهای مختلف با یکدیگر و نحوه ترکیب آنها کمک میکند. دایرهی رنگ معمولاً از رنگهای اولیه ، ثانویه و سوم ساخته شده است. رنگهای اصلی سه رنگدانهای هستند که با هیچ ترکیبی از رنگهای دیگر تشکیل نمیشوند. با ترکیب رنگهای اصلی، رنگهای ثانویه را به دست میآوریم و ترکیب رنگهای اصلی و ثانویه رنگهای ثالثی را به ما میدهد که معمولاً دارای نامهای دو کلمهای هستند.
پیداکردن و انتخاب ترکیب و هارمونی میانِ رنگهای این چرخه براساس چند هارمونی خاص صورت میگیرد، برای مثال:
۱. هارمونی تکرنگ: طراحی بر اساس یک رنگ با سایههای مختلف آن است. هارمونی تکرنگ همیشه یک انتخاب برنده است زیرا اشتباه کردن و احتمال ایجاد طرح ناخوشایند پایین است.
۲. هارمونی مشابه: برای ایجاد هارمونی مشابه، باید از رنگهایی استفاده کنید که درست در کنار یکدیگر روی چرخه رنگ قرار گرفتهاند. این نوع رنگبندی برای طراحی مورد استفاده قرار میگیرد که در آن نیازی به کنتراست نیست.
3. هارمونی مکمل: طرح مکمل ترکیبی از رنگها است که روبهروی هم در دایرهیرنگ قرار میگیرند. این طرح برخلاف نمونه مشابه و تکرنگ است زیرا هدف آن ایجاد کنتراست بالاست. به عنوان مثال، دکمه نارنجی در پس زمینه آبی در هر رابط کاربری به وضوح دیده میشود.
در ادامه میتوانید با مطالعهی کامل مقاله علاوهبر آشنایی با دایرهی رنگ، با انواع دیگری از هارمونیها و ترکیبات رنگها آشنا شوید:
https://bit.ly/dxgn836
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده: یگانه یغماییان
#رنگ #طراحی #اهمیترنگ #انتخابرنگ
@Dexign فلسفه دیزاین
_______
بسیاری معتقدند در طراحی محصول، استفاده از رنگها تنها به سلیقهی طراح مربوط میشود در حالیکه اهمیت این موضوع در طراحی بسیار بالاتر از این است که هر فرد با سلیقهی خود درگیر آن شود.
تحقیقات نشان از آن دارند که هر کاربر در ۹۰ ثانیه اول برخورد با هر محصول، آن را قضاوت میکند و رنگهای بکار برده شده در محصول، قسمت اصلی این قضاوت را در برمیگیرند.
دایرهی رنگ که دایرهای متشکل از رنگهای مختلف است [تصویر آن را در مقاله معرفی شده میبینیم] به درک نحوه ارتباط رنگهای مختلف با یکدیگر و نحوه ترکیب آنها کمک میکند. دایرهی رنگ معمولاً از رنگهای اولیه ، ثانویه و سوم ساخته شده است. رنگهای اصلی سه رنگدانهای هستند که با هیچ ترکیبی از رنگهای دیگر تشکیل نمیشوند. با ترکیب رنگهای اصلی، رنگهای ثانویه را به دست میآوریم و ترکیب رنگهای اصلی و ثانویه رنگهای ثالثی را به ما میدهد که معمولاً دارای نامهای دو کلمهای هستند.
پیداکردن و انتخاب ترکیب و هارمونی میانِ رنگهای این چرخه براساس چند هارمونی خاص صورت میگیرد، برای مثال:
۱. هارمونی تکرنگ: طراحی بر اساس یک رنگ با سایههای مختلف آن است. هارمونی تکرنگ همیشه یک انتخاب برنده است زیرا اشتباه کردن و احتمال ایجاد طرح ناخوشایند پایین است.
۲. هارمونی مشابه: برای ایجاد هارمونی مشابه، باید از رنگهایی استفاده کنید که درست در کنار یکدیگر روی چرخه رنگ قرار گرفتهاند. این نوع رنگبندی برای طراحی مورد استفاده قرار میگیرد که در آن نیازی به کنتراست نیست.
3. هارمونی مکمل: طرح مکمل ترکیبی از رنگها است که روبهروی هم در دایرهیرنگ قرار میگیرند. این طرح برخلاف نمونه مشابه و تکرنگ است زیرا هدف آن ایجاد کنتراست بالاست. به عنوان مثال، دکمه نارنجی در پس زمینه آبی در هر رابط کاربری به وضوح دیده میشود.
در ادامه میتوانید با مطالعهی کامل مقاله علاوهبر آشنایی با دایرهی رنگ، با انواع دیگری از هارمونیها و ترکیبات رنگها آشنا شوید:
https://bit.ly/dxgn836
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده: یگانه یغماییان
#رنگ #طراحی #اهمیترنگ #انتخابرنگ
@Dexign فلسفه دیزاین
_______
Medium
Color Theory: Brief Guide For Designers.
Many people think the choice of colors for UI mostly depends on the designer’s taste and sense of beauty. However, the process of the color…
۱۰ قانون کلی در طراحی رابط کاربری
در ابتدا به یاد داشته باشید که طراحی یعنی تفکر خارج از چهارچوب و گاهی اوقات این بدان معناست که قوانین را زیر پا بگذارید.
۱- طراحی برای تراکم نه پیکسل
هنگام طراحی یک رابط، توصیه میشود که برای پیکسلها طراحی نکنیم بلکه برای تراکم پیکسلهای دستگاه طراحی کنیم. این مورد به ما اطمینان میدهد که عناصر ما به درستی مقیاسبندی شدهاند تا متناسب با اندازههای مختلف دستگاهها باشند.
۲- از افزایشهای ۸ تایی استفاده کنید
دلیل استفاده از عدد جادویی ۸ بجای ۵ این است که اگر دستگاه دارای وضوح ۱.۵ برابر باشد عدد فرد را به درستی ارائه نمیکند.
۳- خطوط و باکسها را بردارید
هنگام طراحی باید گامی به عقب بردارید و تصمیم بگیرید که آیا داشتن ظروف باعث بهم ریختن UI میشود یا نه. اغلب جعبهها و خطوطی که به تقسیم محتوا کمک میکنند میتوانند با حاشیه جایگزین شوند.
۴- به تضاد توجه کنید
استفاده از کنتراست نه تنها چشم کاربر را به اطلاعات مربوط در صفحه جلب میکند، بلکه دسترسی محصول را نیز بهبود میبخشد.
۵- آشنایی خوب است
اگر وبسایت، برنامه یا نرمافزار متفاوت از آنچه کاربران به آن عادت کردهاند عمل کند، آنگاه بصری نخواهد بود و احتمالاً از این تجربه ناامید میشوند.
۶- برای ایجاد سلسهمراتب از وزن رنگ استفاده کنید
هر رنگ دارای وزن بصری است که میتواند به ما در ایجاد سلسله مراتب در محتوای خود کمک کند. با استفاده از رنگهای روشنتر میتوان سطوح مختلف اهمیت را برای عناصر تعیین کرد.
۷- از استفاده بیش از دو فونت خودداری کنید
تعداد فونتهای مورد استفاده در یک رابط را محدود کنید. به طور کلی دو نوع تایپ باید کافی باشد، این بدان معنا نیست که نمیتوانید بیشتر استفاده کنید مگر اینکه دلیل خوبی داشته باشید.
۸- شناخت نه یادآوری
با نمایان ساختن اشیا، اقدامات و گزینهها بار حافظه کاربر را به حداقل برسانید.
۹- سرعت کاربران را کم نکنید
به عنوان یک کاربر، سرعت و کارایی تنها مواردی هستند که اهمیت دارند.
۱۰- کمتر، بیشتر است
یک مثال عالی برای این مورد، صفحه اصلی معروف گوگل است. به جای غرق شدن بازدیدکنندگان از اطلاعات احتمالی غیرضروری، طراحی بر روی اقدام اصلی متمرکز است: جستجو
برای خواندن مطالب بیشتر در رابطه با هریک از موارد گفته شده میتوانید این مقاله را مطالعه کنید.
https://bit.ly/dxgn837
(زمان حدودی مطالعه: ۸ دقیقه)
نویسنده: ثمره شاملو
#طراحی #رابط_کاربری #قوانین
@Dexign فلسفه دیزاین
_______
در ابتدا به یاد داشته باشید که طراحی یعنی تفکر خارج از چهارچوب و گاهی اوقات این بدان معناست که قوانین را زیر پا بگذارید.
۱- طراحی برای تراکم نه پیکسل
هنگام طراحی یک رابط، توصیه میشود که برای پیکسلها طراحی نکنیم بلکه برای تراکم پیکسلهای دستگاه طراحی کنیم. این مورد به ما اطمینان میدهد که عناصر ما به درستی مقیاسبندی شدهاند تا متناسب با اندازههای مختلف دستگاهها باشند.
۲- از افزایشهای ۸ تایی استفاده کنید
دلیل استفاده از عدد جادویی ۸ بجای ۵ این است که اگر دستگاه دارای وضوح ۱.۵ برابر باشد عدد فرد را به درستی ارائه نمیکند.
۳- خطوط و باکسها را بردارید
هنگام طراحی باید گامی به عقب بردارید و تصمیم بگیرید که آیا داشتن ظروف باعث بهم ریختن UI میشود یا نه. اغلب جعبهها و خطوطی که به تقسیم محتوا کمک میکنند میتوانند با حاشیه جایگزین شوند.
۴- به تضاد توجه کنید
استفاده از کنتراست نه تنها چشم کاربر را به اطلاعات مربوط در صفحه جلب میکند، بلکه دسترسی محصول را نیز بهبود میبخشد.
۵- آشنایی خوب است
اگر وبسایت، برنامه یا نرمافزار متفاوت از آنچه کاربران به آن عادت کردهاند عمل کند، آنگاه بصری نخواهد بود و احتمالاً از این تجربه ناامید میشوند.
۶- برای ایجاد سلسهمراتب از وزن رنگ استفاده کنید
هر رنگ دارای وزن بصری است که میتواند به ما در ایجاد سلسله مراتب در محتوای خود کمک کند. با استفاده از رنگهای روشنتر میتوان سطوح مختلف اهمیت را برای عناصر تعیین کرد.
۷- از استفاده بیش از دو فونت خودداری کنید
تعداد فونتهای مورد استفاده در یک رابط را محدود کنید. به طور کلی دو نوع تایپ باید کافی باشد، این بدان معنا نیست که نمیتوانید بیشتر استفاده کنید مگر اینکه دلیل خوبی داشته باشید.
۸- شناخت نه یادآوری
با نمایان ساختن اشیا، اقدامات و گزینهها بار حافظه کاربر را به حداقل برسانید.
۹- سرعت کاربران را کم نکنید
به عنوان یک کاربر، سرعت و کارایی تنها مواردی هستند که اهمیت دارند.
۱۰- کمتر، بیشتر است
یک مثال عالی برای این مورد، صفحه اصلی معروف گوگل است. به جای غرق شدن بازدیدکنندگان از اطلاعات احتمالی غیرضروری، طراحی بر روی اقدام اصلی متمرکز است: جستجو
برای خواندن مطالب بیشتر در رابطه با هریک از موارد گفته شده میتوانید این مقاله را مطالعه کنید.
https://bit.ly/dxgn837
(زمان حدودی مطالعه: ۸ دقیقه)
نویسنده: ثمره شاملو
#طراحی #رابط_کاربری #قوانین
@Dexign فلسفه دیزاین
_______
Medium
10 Rules of Thumb in UI Design
A list of reliable design rules to follow
جادوی تصویرسازی در مارکتینگ
هنوز کلیشههای بسیاری وجود دارد و این باور را به ما میدهند که تصویرسازی صرفا یک عمل هنری است و هیچگونه ارتباطی با کسب و کار و بزینس ندارد. این دیدگاه منجر به زیان کمپانیها و کمتر دیده شدنشان نسبت به سایر رقبا شده است. چرا که امروزه تصویرسازیهای دیجیتال عضو مهمی از کسبوکارها هستند.
پس بیایید دیدگاه نادرستی که راجع به تصویرسازی داشتیم را اصلاح کنیم و به آن در قالب ابزاری پرقدرت برای مارکتینگ بیاندیشیم. مهم نیست تصویرسازیها چقدر زیبا و خوب به نظر بیایند. هدف آنها پیشرفت بزینس، ارائه اطلاعات به کاربر و جذب مشتری است.
در ادامه به حوزه هایی اشاره میشود که استفاده از تصویرسازی میتواند نقشی حیاتی در آنها ایفا کند:
۱- استفاده از تصویرسازی در حوزه برندینگ که موارد آن میتواند در مدیریت برند، طراحی لوگوها، طراحی ماسکتها (Mascot) و بازاریابی بصری باشد.
۲- استفاده از تصویرسازی در کمپینهای تبلیغاتی نظیر بنرها، محصولات چاپی و هدایای مختص یک برند.
۳- استفاده از تصویرسازی در ارائه برند به صورت آنلاین مانند پرزنت کمپانی، خدمات یا محصولاتش و همینطور شبکههای اجتماعی و میلینگ لیستها.
۴- استفاده از تصویرسازی در طراحی بستهبندی محصولات فیزیکی که فارغ از نوع محصول و یا سن و جنسیت مصرف کننده همیشه برای مشتریان جذاب هستند.
در نتیجه به کارگیری تصویرسازی در بسیاری از بخشهای یک کسبوکار میتواند نتایج جادویی و معجزه آسایی به همراه داشته باشد. از مزایای به کارگیری آنها میتوان به درک بهتر مقولهها، افزایش ارتباط احساسی مشتریان و برند و افزایش اعتماد مشتریان به برند اشاره کرد. همچنین به شما و کسبوکارتان کمک میکند تا بیشتر دیده شوید و به یادماندنی باشید.
مقاله زیر به کلیه ابعاد ذکر شده به صورت مفصل پرداخته است:
https://bit.ly/dxgn838
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده : فریما فرحمند
#طراحی #تصویرسازی #برندینگ #مارکتینگ
@Dexign فلسفه دیزاین
_______
هنوز کلیشههای بسیاری وجود دارد و این باور را به ما میدهند که تصویرسازی صرفا یک عمل هنری است و هیچگونه ارتباطی با کسب و کار و بزینس ندارد. این دیدگاه منجر به زیان کمپانیها و کمتر دیده شدنشان نسبت به سایر رقبا شده است. چرا که امروزه تصویرسازیهای دیجیتال عضو مهمی از کسبوکارها هستند.
پس بیایید دیدگاه نادرستی که راجع به تصویرسازی داشتیم را اصلاح کنیم و به آن در قالب ابزاری پرقدرت برای مارکتینگ بیاندیشیم. مهم نیست تصویرسازیها چقدر زیبا و خوب به نظر بیایند. هدف آنها پیشرفت بزینس، ارائه اطلاعات به کاربر و جذب مشتری است.
در ادامه به حوزه هایی اشاره میشود که استفاده از تصویرسازی میتواند نقشی حیاتی در آنها ایفا کند:
۱- استفاده از تصویرسازی در حوزه برندینگ که موارد آن میتواند در مدیریت برند، طراحی لوگوها، طراحی ماسکتها (Mascot) و بازاریابی بصری باشد.
۲- استفاده از تصویرسازی در کمپینهای تبلیغاتی نظیر بنرها، محصولات چاپی و هدایای مختص یک برند.
۳- استفاده از تصویرسازی در ارائه برند به صورت آنلاین مانند پرزنت کمپانی، خدمات یا محصولاتش و همینطور شبکههای اجتماعی و میلینگ لیستها.
۴- استفاده از تصویرسازی در طراحی بستهبندی محصولات فیزیکی که فارغ از نوع محصول و یا سن و جنسیت مصرف کننده همیشه برای مشتریان جذاب هستند.
در نتیجه به کارگیری تصویرسازی در بسیاری از بخشهای یک کسبوکار میتواند نتایج جادویی و معجزه آسایی به همراه داشته باشد. از مزایای به کارگیری آنها میتوان به درک بهتر مقولهها، افزایش ارتباط احساسی مشتریان و برند و افزایش اعتماد مشتریان به برند اشاره کرد. همچنین به شما و کسبوکارتان کمک میکند تا بیشتر دیده شوید و به یادماندنی باشید.
مقاله زیر به کلیه ابعاد ذکر شده به صورت مفصل پرداخته است:
https://bit.ly/dxgn838
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده : فریما فرحمند
#طراحی #تصویرسازی #برندینگ #مارکتینگ
@Dexign فلسفه دیزاین
_______
Dribbble
How to use Illustration as a powerful marketing tool for your brand
In this guest post by our friends at [Outcrowd](https://dribbble.com/outcrowd), learn how to harness the power of illustration to boost conversions and expand your audience.
قدرت مخفی سیستمهای جایزهدهی در دیزاین
احتمالا برای شما هم پیش آمده که اپلیکیشنی را بر روی موبایل خود نصب کرده و تنها پس از اولین استفاده یا نهایتا چند بار استفاده، اپلیکیشن را پاک کرده یا دیگر از آن استفاده نکردهاید. از طرفی ممکن است گاهی توجه کرده باشید که برای مدت طولانی و بدون دلیل در حال اسکرول کردن محتوا در اینستاگرام هستید. دلیلی که باعث این اتفاق میشود این است که این محصولات دیجیتال میدانند که چگونه خود را در روتینهای روزانه زندگی شما جای دهند تا به طور دائم و پیوسته از آنها استفاده کنید.
محبوبترین و پرطرفدارترین اپلیکیشنها از سیستم جایزهدهی برای افزایش جذب کاربر، ایجاد ارتباط با کاربر و رشد طبیعی تعداد کاربران استفاده میکنند. سیستم جایزهدهی ابزاری کارآمد برای دیزاینرهاست تا اطمینان حاصل کنند که کاربران بیشترین سود را از محصول آنها خواهند برد.
روشهای مورد استفاده برای جایزهدهی متفاوت است و ما روزانه برای استفاده از محصولات دیجیتال جایزه دریافت میکنیم اما این جایزه ممکن است به شکلی باشد که خود ما هم متوجه آن نباشیم. اگر چه ممکن است این جایزهها متفاوت باشند، اما معمولا به یکی از روشهای زیر به کاربر داده میشوند:
۱- اطلاعاتی (Informational)
۲- اجتماعی (Social)
۳- گیمیفیکیشن (Gamification)
۴- کسب درآمد (Monetization)
حتی اگر یک محصول دیجیتال از تمام این روشها برای جایزه دادن به کاربر استفاده کند، این جایزه باید به گونهای باشد که بر روی سطح احساسات کاربر تاثیر بگذارد تا بر روی او موثر باشد.
برای آشنایی بیشتر با سیستمهای امتیازدهی و روشهای آن میتوانید مقاله زیر را مطالعه کنید:
https://bit.ly/dxgn839
(زمان حدودی مطالعه: ۱۰ دقیقه)
نویسنده: محمدرضا پناهی
#سیستم #جایزه_دهی
@Dexign فلسفه دیزاین
_______
احتمالا برای شما هم پیش آمده که اپلیکیشنی را بر روی موبایل خود نصب کرده و تنها پس از اولین استفاده یا نهایتا چند بار استفاده، اپلیکیشن را پاک کرده یا دیگر از آن استفاده نکردهاید. از طرفی ممکن است گاهی توجه کرده باشید که برای مدت طولانی و بدون دلیل در حال اسکرول کردن محتوا در اینستاگرام هستید. دلیلی که باعث این اتفاق میشود این است که این محصولات دیجیتال میدانند که چگونه خود را در روتینهای روزانه زندگی شما جای دهند تا به طور دائم و پیوسته از آنها استفاده کنید.
محبوبترین و پرطرفدارترین اپلیکیشنها از سیستم جایزهدهی برای افزایش جذب کاربر، ایجاد ارتباط با کاربر و رشد طبیعی تعداد کاربران استفاده میکنند. سیستم جایزهدهی ابزاری کارآمد برای دیزاینرهاست تا اطمینان حاصل کنند که کاربران بیشترین سود را از محصول آنها خواهند برد.
روشهای مورد استفاده برای جایزهدهی متفاوت است و ما روزانه برای استفاده از محصولات دیجیتال جایزه دریافت میکنیم اما این جایزه ممکن است به شکلی باشد که خود ما هم متوجه آن نباشیم. اگر چه ممکن است این جایزهها متفاوت باشند، اما معمولا به یکی از روشهای زیر به کاربر داده میشوند:
۱- اطلاعاتی (Informational)
۲- اجتماعی (Social)
۳- گیمیفیکیشن (Gamification)
۴- کسب درآمد (Monetization)
حتی اگر یک محصول دیجیتال از تمام این روشها برای جایزه دادن به کاربر استفاده کند، این جایزه باید به گونهای باشد که بر روی سطح احساسات کاربر تاثیر بگذارد تا بر روی او موثر باشد.
برای آشنایی بیشتر با سیستمهای امتیازدهی و روشهای آن میتوانید مقاله زیر را مطالعه کنید:
https://bit.ly/dxgn839
(زمان حدودی مطالعه: ۱۰ دقیقه)
نویسنده: محمدرضا پناهی
#سیستم #جایزه_دهی
@Dexign فلسفه دیزاین
_______
Medium
The Hidden Power of Reward Systems In Design
How to design effective and responsible rewards
اهمیت برندبوکها
به زبان ساده برندبوک دفترچه راهنمای برند شماست. از کوچکترین برندها تا برندهای بزرگ مانند کمپانیهای اپل و گوگل و … باید برندبوک اختصاصی خود را داشته باشند.
برای اینکه دلیل اهمیت این موضوع را متوجه شویم ابتدا لازم است از محتوایی که در برندبوک تهیه میکنیم، مطلع باشیم، هر برندبوک شامل موارد زیر است:
• نام برند، طرح کلی از داستان و اهداف آن برند
• لوگو و تمامی تغییرات آن
• نمادها و آیکنها
• پالترنگی محصول
• تمامی فونتها و اندازههایشان
• تصویرسازیهایی که به صورت خاص برای برند طراحی شدهاند
• زبان برند و مدل ارتباطی آن [ مثل زبان رسمی یا غیر رسمی و … ]
همانطور که دیدیم یک برندبوک کاملترین و خاصترین منبع برای ساخت تصویر درست از برند شماست؛ که این تصویر برای طراحان محصول، مسیر آشنایی با برند شما را روشن میکند و به تیم بازاریابی کمک میکند تا بفهمد در چه مسیری حرکت کند و چه مسیری را بکار گیرد تا محصول در مسیر اهداف خود در حرکت باشد.
با مطالعهی این مقاله علاوهبر آشنایی کامل با اهمیت برندبوکها، مراحل ساخت آنها را نیز به طور مفصل ببینید:
https://bit.ly/dxgn840
(زمان حدود مطالعه: ۹ دقیقه)
نویسنده: یگانه یغماییان
#برندبوک #برندینگ
@Dexign فلسفه دیزاین
________
به زبان ساده برندبوک دفترچه راهنمای برند شماست. از کوچکترین برندها تا برندهای بزرگ مانند کمپانیهای اپل و گوگل و … باید برندبوک اختصاصی خود را داشته باشند.
برای اینکه دلیل اهمیت این موضوع را متوجه شویم ابتدا لازم است از محتوایی که در برندبوک تهیه میکنیم، مطلع باشیم، هر برندبوک شامل موارد زیر است:
• نام برند، طرح کلی از داستان و اهداف آن برند
• لوگو و تمامی تغییرات آن
• نمادها و آیکنها
• پالترنگی محصول
• تمامی فونتها و اندازههایشان
• تصویرسازیهایی که به صورت خاص برای برند طراحی شدهاند
• زبان برند و مدل ارتباطی آن [ مثل زبان رسمی یا غیر رسمی و … ]
همانطور که دیدیم یک برندبوک کاملترین و خاصترین منبع برای ساخت تصویر درست از برند شماست؛ که این تصویر برای طراحان محصول، مسیر آشنایی با برند شما را روشن میکند و به تیم بازاریابی کمک میکند تا بفهمد در چه مسیری حرکت کند و چه مسیری را بکار گیرد تا محصول در مسیر اهداف خود در حرکت باشد.
با مطالعهی این مقاله علاوهبر آشنایی کامل با اهمیت برندبوکها، مراحل ساخت آنها را نیز به طور مفصل ببینید:
https://bit.ly/dxgn840
(زمان حدود مطالعه: ۹ دقیقه)
نویسنده: یگانه یغماییان
#برندبوک #برندینگ
@Dexign فلسفه دیزاین
________
blog.icons8.com
Branding design: what is a brand book and why you need it in 2024
The article defines the essence of brand book: read what it consists of, how it supports the brand strategy and check great examples.
مزایای قوانین محرمانگی اطلاعات در روند طراحی UX
سال ۲۰۱۸ را میتوان به عنوان نقطه عطفی در کار تمام کسانی که با دیتای کاربر سروکار داشتند شناخت. زمانی که مقررات عمومی حفاظت از اطلاعات کاربر (GDPR) در اتحادیه اروپا وضع شد و به دنبال آن کمپانیهای اتحادیه اروپا برای استخراج و استفاده از دیتای کاربر نیازمند به ارائه توضیح شفاف و کسب رضایت از او شدند. گامی که میتواند بسیار برای دنیای UX مفید باشد.
با گسترش بیشتر قوانین این چنینی در نقاط دیگر دنیا به کاربران قدرت و شفافیت بیشتر در نحوه استفاده از دیتای آنها داده شد و یکی از نتایج این محدودیتها برای کمپانیها استخراج به نسبت کمتر دادههای کمی بود.
حال بررسی کنیم که این محدودیتها چه نکات مثبتی برای طراحان UX دارد:
- چالشی جدید در طراحی UX:
"وقتی قسمتی از یک سیستم تغییر کند، تمام سیستم تغییر میکند." وضع قوانین محرمانگی جدید چالشهایی نو را در طراحی جریانهای کاربری ایجاد کرده که نیاز به بازبینی و بازطراحی دارند. همچنین نیاز به راهکار برای چالشهای این چنینی، شاخه آکادمیک جدیدی را تحت عنوان HDI (Human Data Interaction) به وجود آورده که به نحوه تعامل انسانها با دیتای آنلاین خود میپردازد.
- فرصتی برای انجام پژوهش کاربر :
دادههای کمی میتوانند بسیار مفید باشند ولی اتکا بر این نوع دادهها اگر در کنار دادههای کیفی نباشد میتواند منجر به فرضیات اشتباه و پیش روی طراحی بر اساس همین فرضیات غلط شود. محدودیتهای وضع شده در زمینه محرمانگی با به دست دادن کمتر دادههای کمی بهانهای میشود تا بیشتر به سمت انجام پژوهشهای کیفی برویم و اطلاعاتی را به دست آوریم که اعداد به ما نمیدهند.
- دلیلی برای همکاری کاربران در روند طراحی :
کاربران میخواهند بخشی از راهکار باشند، نه مساله. با مشمول گردانیدن تعدادی از آنها در روند طراحی و گرفتن فیدبک حقیقی و کیفیشان میتوانید حمایت این دسته از کاربران را جلب کنید. این روند میتواند نتایج حقیقیتر و دقیقتری به نسبت سایر روشهای کمی به شما بدهد.
مقاله زیر به تمامی این نکات به صورت کامل پرداخته است
https://bit.ly/dxgn841
(زمان حدودی مطالعه: ۵ دقیقه)
نویسنده : فریما فرحمند
#cookies #محرمانگی #UX #طراحی
@Dexign فلسفه دیزاین
________
سال ۲۰۱۸ را میتوان به عنوان نقطه عطفی در کار تمام کسانی که با دیتای کاربر سروکار داشتند شناخت. زمانی که مقررات عمومی حفاظت از اطلاعات کاربر (GDPR) در اتحادیه اروپا وضع شد و به دنبال آن کمپانیهای اتحادیه اروپا برای استخراج و استفاده از دیتای کاربر نیازمند به ارائه توضیح شفاف و کسب رضایت از او شدند. گامی که میتواند بسیار برای دنیای UX مفید باشد.
با گسترش بیشتر قوانین این چنینی در نقاط دیگر دنیا به کاربران قدرت و شفافیت بیشتر در نحوه استفاده از دیتای آنها داده شد و یکی از نتایج این محدودیتها برای کمپانیها استخراج به نسبت کمتر دادههای کمی بود.
حال بررسی کنیم که این محدودیتها چه نکات مثبتی برای طراحان UX دارد:
- چالشی جدید در طراحی UX:
"وقتی قسمتی از یک سیستم تغییر کند، تمام سیستم تغییر میکند." وضع قوانین محرمانگی جدید چالشهایی نو را در طراحی جریانهای کاربری ایجاد کرده که نیاز به بازبینی و بازطراحی دارند. همچنین نیاز به راهکار برای چالشهای این چنینی، شاخه آکادمیک جدیدی را تحت عنوان HDI (Human Data Interaction) به وجود آورده که به نحوه تعامل انسانها با دیتای آنلاین خود میپردازد.
- فرصتی برای انجام پژوهش کاربر :
دادههای کمی میتوانند بسیار مفید باشند ولی اتکا بر این نوع دادهها اگر در کنار دادههای کیفی نباشد میتواند منجر به فرضیات اشتباه و پیش روی طراحی بر اساس همین فرضیات غلط شود. محدودیتهای وضع شده در زمینه محرمانگی با به دست دادن کمتر دادههای کمی بهانهای میشود تا بیشتر به سمت انجام پژوهشهای کیفی برویم و اطلاعاتی را به دست آوریم که اعداد به ما نمیدهند.
- دلیلی برای همکاری کاربران در روند طراحی :
کاربران میخواهند بخشی از راهکار باشند، نه مساله. با مشمول گردانیدن تعدادی از آنها در روند طراحی و گرفتن فیدبک حقیقی و کیفیشان میتوانید حمایت این دسته از کاربران را جلب کنید. این روند میتواند نتایج حقیقیتر و دقیقتری به نسبت سایر روشهای کمی به شما بدهد.
مقاله زیر به تمامی این نکات به صورت کامل پرداخته است
https://bit.ly/dxgn841
(زمان حدودی مطالعه: ۵ دقیقه)
نویسنده : فریما فرحمند
#cookies #محرمانگی #UX #طراحی
@Dexign فلسفه دیزاین
________
Medium
Data privacy laws are good for UX design
A new perspective on how UX design can actually benefit from the data privacy laws that are being developed around the world
۹ نکته برای بهبود سریع طراحی UI شما
ایجاد رابط کاربری زیبا، کارآمد و قابل استفاده زمان زیادی را میطلبد و بسیاری از تغییرات طراحی در این راه انجام میشود.
در این مقاله، نکاتی کوچک که به راحتی قابل اجرا هستند را گردآوری کردهایم که میتواند به بهبود طراحی شما کمک کند.
۱- عناصر خود را مشخصتر نمایش دهید
از چندسایه یا یک حاشیه بسیار ظریف در اطراف عناصر خود استفاده کنید تا این عناصر کمی واضحتر و مشخصتر بنظر برسند.
۲- استفاده از یک نوع فونت در طراحی بسیار خوب است
با استفاده از ترکیبی از وزنها، اندازهها و رنگها میتوانید نتایج کاملاً قابل قبولی را ایجاد کنید.
۳- ایجاد محتوای طولانی
برای محتواهای طولانی مانند پستهای وبلاگ، توضیحات پروژه و ... سعی کنید 20pt را برای متن خود انتخاب کنید.
۴- تجربه آنبوردینگ را برای کاربران خود بهبود بخشید
برای بخش آنبوردینگ اپ خود همواره باید امکان skip را در نظر بگیرید و این دکمه را در دسترس قرار دهید.
۵- سایههای شما از یک منبع نور میآیند، درست است؟
اطمینان حاصل کنید که سایههای شما همیشه از یک منبع نور میآیند. ما در سرزمینی با هزاران خورشید زندگی نمیکنیم.
۶- با یک روکش ظریف اما ساده کنتراست بین متن و تصاویر را بهبود بخشید
بسته به موقعیتی که ممکن است متن روی تصاویر شما قرار گیرد، میتوانید از یک روکش برای دستیابی به کنتراست مورد نظر استفاده کنید.
۷- از متنهای وسطچین با اعتدال استفاده کنید
سعی کنید از متنهای وسطچین فقط برای سرفصلها و قسمتهای کوچک متن استفاده کنید.
۸- فضای سفید (whitespace) دوست شماست از آن سخاوتمدانه استفاده کنید
حتی مقدار کمی فضای سفید میتواند به طرحهای شما اجازه دهد که نفس بکشند و جلوه بیشتری پیدا کنند.
۹- متن را در زمینههای روشن تیرهتر کنید
هنگام کار روی پسزمینه روشن، متن خود را خیلی سبک انتخاب نکنید.
در این مقاله شما میتوانید اطلاعات کاملتری در رابطه با هریک از موارد ذکر شده بخوانید.
https://bit.ly/dxgn842
(زمان حدودی مطالعه: ۴ دقیقه)
نویسنده: ثمره شاملو
#طراحی #بهبود_طراحی
@Dexign فلسفه دیزاین
________
ایجاد رابط کاربری زیبا، کارآمد و قابل استفاده زمان زیادی را میطلبد و بسیاری از تغییرات طراحی در این راه انجام میشود.
در این مقاله، نکاتی کوچک که به راحتی قابل اجرا هستند را گردآوری کردهایم که میتواند به بهبود طراحی شما کمک کند.
۱- عناصر خود را مشخصتر نمایش دهید
از چندسایه یا یک حاشیه بسیار ظریف در اطراف عناصر خود استفاده کنید تا این عناصر کمی واضحتر و مشخصتر بنظر برسند.
۲- استفاده از یک نوع فونت در طراحی بسیار خوب است
با استفاده از ترکیبی از وزنها، اندازهها و رنگها میتوانید نتایج کاملاً قابل قبولی را ایجاد کنید.
۳- ایجاد محتوای طولانی
برای محتواهای طولانی مانند پستهای وبلاگ، توضیحات پروژه و ... سعی کنید 20pt را برای متن خود انتخاب کنید.
۴- تجربه آنبوردینگ را برای کاربران خود بهبود بخشید
برای بخش آنبوردینگ اپ خود همواره باید امکان skip را در نظر بگیرید و این دکمه را در دسترس قرار دهید.
۵- سایههای شما از یک منبع نور میآیند، درست است؟
اطمینان حاصل کنید که سایههای شما همیشه از یک منبع نور میآیند. ما در سرزمینی با هزاران خورشید زندگی نمیکنیم.
۶- با یک روکش ظریف اما ساده کنتراست بین متن و تصاویر را بهبود بخشید
بسته به موقعیتی که ممکن است متن روی تصاویر شما قرار گیرد، میتوانید از یک روکش برای دستیابی به کنتراست مورد نظر استفاده کنید.
۷- از متنهای وسطچین با اعتدال استفاده کنید
سعی کنید از متنهای وسطچین فقط برای سرفصلها و قسمتهای کوچک متن استفاده کنید.
۸- فضای سفید (whitespace) دوست شماست از آن سخاوتمدانه استفاده کنید
حتی مقدار کمی فضای سفید میتواند به طرحهای شما اجازه دهد که نفس بکشند و جلوه بیشتری پیدا کنند.
۹- متن را در زمینههای روشن تیرهتر کنید
هنگام کار روی پسزمینه روشن، متن خود را خیلی سبک انتخاب نکنید.
در این مقاله شما میتوانید اطلاعات کاملتری در رابطه با هریک از موارد ذکر شده بخوانید.
https://bit.ly/dxgn842
(زمان حدودی مطالعه: ۴ دقیقه)
نویسنده: ثمره شاملو
#طراحی #بهبود_طراحی
@Dexign فلسفه دیزاین
________
Medium
9 tips to quickly improve your UI designs
Small and easy to put into practice tips to improve your designs.
نوشتار مناسب برای کاهش اصطکاک تجربه کاربر
پیداکردن کلمات دقیق برای تکمیل طراحی یک رابط که اصطلاحا به آن UX Writing میگوییم باعث ایجاد یک تجربهی بدون اصطکاک برای کاربر میشود. طراحان یا به صورت تخصصیتر نویسندگان UX ، به صورت روزانه در حال تجربه و آزمون و خطا برای به دست آوردن روشهای مناسب ارتباط با کاربر هستند، در این مقاله حدود ۱۵ مثال از موضوعات متفاوت و UX Writing مناسب برای آنها آورده شده که به یک مورد از آنها میپردازیم:
نوشتار مناسب برای اعلان لغوها
برای مثال در اعلانِ لغوِ پرواز با برجستهکردن شمارهی پرواز و کلمهی لغو میتوان به سریعترین حالت این پیام را به کاربر منتقل میکنیم.
در ادامهی این فرایند کاربر نیاز دارد تا بداند راهی برای جایگزینی پرواز دارد، با نوشتن کلمهی «انتخاب صندلی» علاوهبر نشان دادن این موضوع با ارجاع کاربر به اولین مراحل ثبتِ یک پرواز یادآور میشویم که این پیام، پیامِ لغو پرواز سابق اوست و با انتخاب صندلی پرواز جدیدی را رزرو میکند.
اما در عین حال امکان لغو کلی مسیر را هم با وضوح کمتر در اولویت دوم در صفحه برای تجربهی بهتر کاربر قرار میدهیم.
در این مقاله به نمونههای دیگر نیز با جزئیات بالا پرداخته شده است، نمونههایی مانندِ:
-ثبت و پذیرش
-ترویج اپهای ورزشی
-خطا در ورود
-هشدار اپها
-اعلان اپهای موسیقی
و…
که با مطالعهی آنها میتوانید نوشتارهای مختلف را تجربه کنید.
https://bit.ly/dxgn842-1
(زمان حدودی مطالعه: ۹ دقیقه)
نویسنده: یگانه یغماییان
#تجربهکاربری
#uxwriting
@Dexign فلسفه دیزاین
________
پیداکردن کلمات دقیق برای تکمیل طراحی یک رابط که اصطلاحا به آن UX Writing میگوییم باعث ایجاد یک تجربهی بدون اصطکاک برای کاربر میشود. طراحان یا به صورت تخصصیتر نویسندگان UX ، به صورت روزانه در حال تجربه و آزمون و خطا برای به دست آوردن روشهای مناسب ارتباط با کاربر هستند، در این مقاله حدود ۱۵ مثال از موضوعات متفاوت و UX Writing مناسب برای آنها آورده شده که به یک مورد از آنها میپردازیم:
نوشتار مناسب برای اعلان لغوها
برای مثال در اعلانِ لغوِ پرواز با برجستهکردن شمارهی پرواز و کلمهی لغو میتوان به سریعترین حالت این پیام را به کاربر منتقل میکنیم.
در ادامهی این فرایند کاربر نیاز دارد تا بداند راهی برای جایگزینی پرواز دارد، با نوشتن کلمهی «انتخاب صندلی» علاوهبر نشان دادن این موضوع با ارجاع کاربر به اولین مراحل ثبتِ یک پرواز یادآور میشویم که این پیام، پیامِ لغو پرواز سابق اوست و با انتخاب صندلی پرواز جدیدی را رزرو میکند.
اما در عین حال امکان لغو کلی مسیر را هم با وضوح کمتر در اولویت دوم در صفحه برای تجربهی بهتر کاربر قرار میدهیم.
در این مقاله به نمونههای دیگر نیز با جزئیات بالا پرداخته شده است، نمونههایی مانندِ:
-ثبت و پذیرش
-ترویج اپهای ورزشی
-خطا در ورود
-هشدار اپها
-اعلان اپهای موسیقی
و…
که با مطالعهی آنها میتوانید نوشتارهای مختلف را تجربه کنید.
https://bit.ly/dxgn842-1
(زمان حدودی مطالعه: ۹ دقیقه)
نویسنده: یگانه یغماییان
#تجربهکاربری
#uxwriting
@Dexign فلسفه دیزاین
________
Medium
The Daily UX Writing Challenge — fun facts, less friction.
From error state messages and loss aversion techniques to the wonderful worlds of Whimsical and Figma.
طراحی رابط کاربری؛ چیزی بیشتر از زیباسازی
اگر برای مدتی به عنوان یک طراح رابط کاربری کار کرده باشید ممکن نیست با چنین جملاتی از سمت مشتریان خود مواجه نشده باشید، «این فضای خالی را پر کنید.» ، «رنگ بیشتری بهکار ببرید.» و در یک کلام «زیباترش کنید.»
همه نظری درباره زیبا بودن یا نبودن یک چیز دارند و قرار نیست دلیلی هم برای آن داشته باشند، اما کار شما به عنوان یک طراح رابط کاربری تنها زیبا کردن یک سرویس دیجیتال نیست، شما باید دلیل و منطقی محکم برای طراحی بصری خود داشته باشید.
این دلیل و منطق را هدف سرویس یا همان تجربه کاربری تعیین میکند و براساس آن یک رابط کاربری باید:
۱. نحوهی عملکرد و هدف را منتقل کند.
۲. اولویت و ترتیب بخشهای مختلف را مشخص کند.
۳. تجربه کاربری را محقق کرده و بهبود بخشد.
۴. ارتباط تجربه با برند را مستحکم کند.
۵. راهحلهای ساده برای مسائل پیچیده ارائه کند.
۶. میان تمام اجزای سیستم یکپارچگی و تعادل برقرار کند.
رابط کاربری تنها زمانی میتواند زیبایی کارآمدی را ارائه کند که این اصول را رعایت کرده باشد.
بااینحال نباید از یاد برد که زیبا بودن یک محصول هم بیهوده نیست، میدانیم که کاربران محصولات زیبا را کارآمد تلقی میکنند و اعتماد بیشتری نسبت به آنها دارند، اما اگر دلیل و منطق محکمی در این زیبا بودن وجود نداشته باشد، به انتظار اولیهی کابران خود خیانت میکنید و ترکتان میکنند.
در مواجه با درخواست «زیباترش کنید» مشتریانتان، نفس عمیق بکشید و توضیح بدهید که چرا این فضا خالیست یا ساده است یا به آن فضای دیگری نزدیک شده، تمام اینها باید برای شما معنی داشته باشند و این معنا آنقدر در تناسب با سرویس باشد تا هر کسی را قانع کند.
در این مقاله میتوانید بیشتر دربارهی هویت طراحی بصری فرای جنبهی زیباسازی آن بخوانید.
https://bit.ly/dxgn843
(زمان حدودی مطالعه: ۴ دقیقه)
نویسنده : ریحانه خدایی
#طراحی #رابط_کاربری #زیبایی
@Dexign فلسفه دیزاین
________
اگر برای مدتی به عنوان یک طراح رابط کاربری کار کرده باشید ممکن نیست با چنین جملاتی از سمت مشتریان خود مواجه نشده باشید، «این فضای خالی را پر کنید.» ، «رنگ بیشتری بهکار ببرید.» و در یک کلام «زیباترش کنید.»
همه نظری درباره زیبا بودن یا نبودن یک چیز دارند و قرار نیست دلیلی هم برای آن داشته باشند، اما کار شما به عنوان یک طراح رابط کاربری تنها زیبا کردن یک سرویس دیجیتال نیست، شما باید دلیل و منطقی محکم برای طراحی بصری خود داشته باشید.
این دلیل و منطق را هدف سرویس یا همان تجربه کاربری تعیین میکند و براساس آن یک رابط کاربری باید:
۱. نحوهی عملکرد و هدف را منتقل کند.
۲. اولویت و ترتیب بخشهای مختلف را مشخص کند.
۳. تجربه کاربری را محقق کرده و بهبود بخشد.
۴. ارتباط تجربه با برند را مستحکم کند.
۵. راهحلهای ساده برای مسائل پیچیده ارائه کند.
۶. میان تمام اجزای سیستم یکپارچگی و تعادل برقرار کند.
رابط کاربری تنها زمانی میتواند زیبایی کارآمدی را ارائه کند که این اصول را رعایت کرده باشد.
بااینحال نباید از یاد برد که زیبا بودن یک محصول هم بیهوده نیست، میدانیم که کاربران محصولات زیبا را کارآمد تلقی میکنند و اعتماد بیشتری نسبت به آنها دارند، اما اگر دلیل و منطق محکمی در این زیبا بودن وجود نداشته باشد، به انتظار اولیهی کابران خود خیانت میکنید و ترکتان میکنند.
در مواجه با درخواست «زیباترش کنید» مشتریانتان، نفس عمیق بکشید و توضیح بدهید که چرا این فضا خالیست یا ساده است یا به آن فضای دیگری نزدیک شده، تمام اینها باید برای شما معنی داشته باشند و این معنا آنقدر در تناسب با سرویس باشد تا هر کسی را قانع کند.
در این مقاله میتوانید بیشتر دربارهی هویت طراحی بصری فرای جنبهی زیباسازی آن بخوانید.
https://bit.ly/dxgn843
(زمان حدودی مطالعه: ۴ دقیقه)
نویسنده : ریحانه خدایی
#طراحی #رابط_کاربری #زیبایی
@Dexign فلسفه دیزاین
________
Medium
Visual Design Is Not Just Making Things Pretty
Most laymen have this idea that designers are just operating complicated software and pushing pixels on the screen to make pretty things.
طراحی فضاهای خالی (Empty states) در اپلیکیشنهای پیچیده
گاها کاربران در محیط اپلیکیشن با فضاهای خالی روبهرو میشوند؛ فضاهایی مانند دربرگیرندههای محتوا، باکسها، پنلها و ... که هنوز محتوایی را در خود جای ندادهاند. این اتفاق به ویژه در اپلیکیشنهای پیچیده و همینطور در استفادههای اولیه از یک سرویس رخ میدهد.
نگاهی بیاندازیم به برخی از معمولترین سناریوهایی که ممکن است کاربر در استفاده از اپلیکیشن با فضاهای خالی روبهرو شود:
- کاربری که هنوز هیچ بازدیدی از آیتمها نداشته و یا هیچ آیتمی را به مورد علاقهها اضافه نکرده است. لذا صفحههایی که برای بازدیدهای اخیر و یا موردعلاقههای او در نظر گرفته شدهاند فضایی خالی خواهند بود.
- صفحه جستجو و یا هر صفحهای که خروجی آن لیستی خالی از آیتم و محتوا باشد.
- زمانی که اپلیکیشن از فضاهای کاری مختلف تشکیل شده و کاربر در آنها محتوایی را ثبت نکرده است
پیشفرض یک فضای خالی این است که این فضا به سادگی، خالی باقی بماند و هیچ محتوایی را تا زمانی که توسط کاربر شخصیسازی و پیکربندی نشده است به او نشان ندهد. هرچند این اتفاق میتواند زمان برنامهنویسی را کاهش دهد و یا حتی یک تصمیم به عمد در طول طراحی نسخههای بتای محصول باشد که در آن باید سایر ویژگیها در اولویت قرار بگیرند اما در نهایت منجر به سردرگمی کاربر میشود و فرصتی طلایی را از شما به عنوان طراح میگیرد. فرصتی که با استفاده از آن میتوانید در رابطه با وضعیت سیستم با کاربر ارتباط برقرار کنید، به کاربر کمک کنید که فیچرها را بشناسد و بیشتر با سرویس آشنا شود و برای انجام فعالیتهای اصلی برای کاربر به او دسترسی دهید.
برای شناخت بیشتر این موارد و راهنمایی در استفاده بهینه از فضاهای خالی و مشاهده مثالهای کاربردی مقاله زیر را مطالعه کنید:
https://bit.ly/dxgn844
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده: رشید مسعودی
#رابط_کاربری #UI #فضاهای_خالی #Empty_states
@Dexign فلسفه دیزاین
________
گاها کاربران در محیط اپلیکیشن با فضاهای خالی روبهرو میشوند؛ فضاهایی مانند دربرگیرندههای محتوا، باکسها، پنلها و ... که هنوز محتوایی را در خود جای ندادهاند. این اتفاق به ویژه در اپلیکیشنهای پیچیده و همینطور در استفادههای اولیه از یک سرویس رخ میدهد.
نگاهی بیاندازیم به برخی از معمولترین سناریوهایی که ممکن است کاربر در استفاده از اپلیکیشن با فضاهای خالی روبهرو شود:
- کاربری که هنوز هیچ بازدیدی از آیتمها نداشته و یا هیچ آیتمی را به مورد علاقهها اضافه نکرده است. لذا صفحههایی که برای بازدیدهای اخیر و یا موردعلاقههای او در نظر گرفته شدهاند فضایی خالی خواهند بود.
- صفحه جستجو و یا هر صفحهای که خروجی آن لیستی خالی از آیتم و محتوا باشد.
- زمانی که اپلیکیشن از فضاهای کاری مختلف تشکیل شده و کاربر در آنها محتوایی را ثبت نکرده است
پیشفرض یک فضای خالی این است که این فضا به سادگی، خالی باقی بماند و هیچ محتوایی را تا زمانی که توسط کاربر شخصیسازی و پیکربندی نشده است به او نشان ندهد. هرچند این اتفاق میتواند زمان برنامهنویسی را کاهش دهد و یا حتی یک تصمیم به عمد در طول طراحی نسخههای بتای محصول باشد که در آن باید سایر ویژگیها در اولویت قرار بگیرند اما در نهایت منجر به سردرگمی کاربر میشود و فرصتی طلایی را از شما به عنوان طراح میگیرد. فرصتی که با استفاده از آن میتوانید در رابطه با وضعیت سیستم با کاربر ارتباط برقرار کنید، به کاربر کمک کنید که فیچرها را بشناسد و بیشتر با سرویس آشنا شود و برای انجام فعالیتهای اصلی برای کاربر به او دسترسی دهید.
برای شناخت بیشتر این موارد و راهنمایی در استفاده بهینه از فضاهای خالی و مشاهده مثالهای کاربردی مقاله زیر را مطالعه کنید:
https://bit.ly/dxgn844
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده: رشید مسعودی
#رابط_کاربری #UI #فضاهای_خالی #Empty_states
@Dexign فلسفه دیزاین
________
Nielsen Norman Group
Designing Empty States in Complex Applications: 3 Guidelines
Empty states provide opportunities for designers to communicate system status, increase learnability of the system, and deliver direct pathways for key tasks. This article provides guidance for designing empty-state dialogues for content-less containers.
چطور یک تجربهی کاربری خوب کمک میکند تا کاربران تصمیمات سخت را راحتتر بگیرند؟
جدولهایی طراحی کنیم که درست کار کنند.
یک جدول خوب اجازه میدهد تا اطلاعات به راحتی مرتب و درک شوند. مهمترین کار در جدولها این است که محتوا دسترسپذیر باشد اما یک صفحه بینظم ساخته نشود.
باید بتوانید به سوالات زیر در مورد جدولی که در حال کار کردن بر روی آن هستید پاسخ دهید:
• با چه نوعی از دادهها سر و کار داریم ؟
• این جدول قرار است چه کاری انجام دهد؟
• این جدول قرار است فقط اطلاعات ارائه کند یا قابل اجرا باشد؟
• به دیدگاههای مختلف همهی ذی نفعان توجه کردهایم؟
۵ تکنیک که به طراحی بهتر جدول شما کمک میکند.
طراحی خوب چیزی فراتر از یک رابط کاربری است و بیشتر دربارهی راحتی کاربر است. در ادامه مواردی ذکر شده است که کمک میکند تا مواردی که نیاز به قدرت ذهنی زیادی دارند به شکلی طراحی شوند که فهم آنها برای کاربر راحت باشد:
۱. به همان اندازه که به ظاهر توجه میکنید به اطلاعاتی که قرار است در جدول بیاید هم دقت کنید.
۲. از موارد جالب و غیرجدی گذر نکنید. دادههای موجود میتوانند به وسیله مواردی مانند آیکونها، آواتارها، هشدارها و اعلانهای رنگی و ... کمک کنند تا خواندن اطلاعات زیاد برای افراد راحتتر باشد.
۳. عملکردهایی که از اهمیت بالاتری برخوردار هستند میتوانند در اولویت دیداری قرار بگیرند. به طور مثال مواردی هستند مانند دکمه حذف و ویرایش و تغییرات که میتوانند همگی در لحظه به مخاطب نشان داده نشوند.
۴. از نمایش اطلاعات زیاد و جدولهای شلوغ با تعداد بالایی دکمه و فیلتر خودداری کنید و بوسیله انیمیشن با هاور کردن، جدولی خالی و تمیزتر خواهیم داشت.
۵. اگر جدول شما امکان ادیت دارد باید با هشدارها و اعلانها و موارد این چنینی به کاربر کمک کنید تا این فهم درستی از ادیت پیدا کند.
https://bit.ly/dxgn845
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده: محمدرضا عباسی
#جدول
#UX #data_tables #complex_decisions
@Dexign فلسفه دیزاین
________
جدولهایی طراحی کنیم که درست کار کنند.
یک جدول خوب اجازه میدهد تا اطلاعات به راحتی مرتب و درک شوند. مهمترین کار در جدولها این است که محتوا دسترسپذیر باشد اما یک صفحه بینظم ساخته نشود.
باید بتوانید به سوالات زیر در مورد جدولی که در حال کار کردن بر روی آن هستید پاسخ دهید:
• با چه نوعی از دادهها سر و کار داریم ؟
• این جدول قرار است چه کاری انجام دهد؟
• این جدول قرار است فقط اطلاعات ارائه کند یا قابل اجرا باشد؟
• به دیدگاههای مختلف همهی ذی نفعان توجه کردهایم؟
۵ تکنیک که به طراحی بهتر جدول شما کمک میکند.
طراحی خوب چیزی فراتر از یک رابط کاربری است و بیشتر دربارهی راحتی کاربر است. در ادامه مواردی ذکر شده است که کمک میکند تا مواردی که نیاز به قدرت ذهنی زیادی دارند به شکلی طراحی شوند که فهم آنها برای کاربر راحت باشد:
۱. به همان اندازه که به ظاهر توجه میکنید به اطلاعاتی که قرار است در جدول بیاید هم دقت کنید.
۲. از موارد جالب و غیرجدی گذر نکنید. دادههای موجود میتوانند به وسیله مواردی مانند آیکونها، آواتارها، هشدارها و اعلانهای رنگی و ... کمک کنند تا خواندن اطلاعات زیاد برای افراد راحتتر باشد.
۳. عملکردهایی که از اهمیت بالاتری برخوردار هستند میتوانند در اولویت دیداری قرار بگیرند. به طور مثال مواردی هستند مانند دکمه حذف و ویرایش و تغییرات که میتوانند همگی در لحظه به مخاطب نشان داده نشوند.
۴. از نمایش اطلاعات زیاد و جدولهای شلوغ با تعداد بالایی دکمه و فیلتر خودداری کنید و بوسیله انیمیشن با هاور کردن، جدولی خالی و تمیزتر خواهیم داشت.
۵. اگر جدول شما امکان ادیت دارد باید با هشدارها و اعلانها و موارد این چنینی به کاربر کمک کنید تا این فهم درستی از ادیت پیدا کند.
https://bit.ly/dxgn845
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده: محمدرضا عباسی
#جدول
#UX #data_tables #complex_decisions
@Dexign فلسفه دیزاین
________
Medium
Making tables work: How good UX helps users make complex decisions
Tables won’t suck if you keep these principles in mind
با نکات و ترفندهای گرید، طرحهای بهتری را ایجاد کنید
فضا و گرید اساس هر طرحی را میسازد. پس از تسلط و استفاده صحیح، گرید به شما کمک میکند تا راهحلهای جذابی را برای طرحهای خود ایجاد کنید.
گرید چیست؟
گرید به ایجاد پایه هر رابط کمک میکند. میتوانید آن را به عنوان چارچوبی برای طرح خود در نظر بگیرید. چارچوبی که به سازماندهی عناصر رابط کاربری، راهنمایی خواننده و شناسایی بخشهای جداگانه از طراحی شما کمک میکند.
طرحها روی گرید قرار میگیرد که دارای تعداد مشخصی ستون است. ستونها دارای حاشیهای در سمت چپ و راست هستند و همینطور فضایی بین هر ستون قرار دارد.
در ادامه به نکاتی اشاره میکنیم که در این مسیر به شما کمک میکنند:
۱- اعداد را عاقلانه انتخاب کنید
در حالی که گرید ۱۲ ستونی محبوبترین انتخاب است، اما اجباری نیست. هنگام انتخاب گرید، تعداد ستونی را انتخاب کنید که طراحی شما واقعاً به آن احتیاج دارد.
۲- محدودیتهای خود را بشناسید
همیشه صفحهای که برای آن طراحی میکنید را در نظر بگیرید و بدانید که چگونه توسط دیگران کنترل و اداره میشود.
رایجترین اندازهها:
دسکتاپ: ۱۰۲۴*۱۴۴۰
تبلت: ۱۰۲۴*۷۶۸
موبایل: ۶۴۰*۳۲۰
۳- فاصله افقی و عمودی بین گریدها
هردو فاصله افقی و عمودی را در نظر بگیرید تا طرح شما جذابتر و سازگارتر شود.
۴- ریتم عمودی را شکل دهید
از گرید پایه برای مرتب کردن محتوا و ایجاد هماهنگی بصری در متن و عناصر طرح خود استفاده کنید.
۵- از قدرت قاب و رنگ استفاده کنید
از قاببندی به عنوان ابزاری برای تمرکز توجه کاربر به بخش خاصی از طرح استفاده کنید.
۶- از گرید خارج شوید
عناصر خاصی را از گرید خارج کنید. از این ترفند تفکیک برای افزودن ارزش و برجسته کردن بخشهای خاصی از طراحی خود استفاده کنید.
۷- گرید خود را تطبیق دهید
اطمینان حاصل کنید که طرح شما با اندازههای معمول صفحه نمایش، نقاط شکست سازگار است و تجربه کاربری خوبی از تلفن همراه را فراهم میکند.
۸- طراحی بدون گرید را بیاموزید
یاد بگیرید که چگونه با یک گرید و بدون اینکه آن را در بوم خود بیاورید، طراحی کنید. هر از گاهی طرح خود را بدون گرید مشاهده کنید تا خلاقانهترین راهحلها را برای کارهای خود بیابید.
برای مشاهده نمونه برای هریک از موارد گفته شده، میتوانید این مقاله را مطالعه نمایید.
https://bit.ly/dxgn846
(زمان حدودی مطالعه: ۴ دقیقه)
نویسنده: ثمره شاملو
#گرید #شبکه #اصول_طراحی
@Dexign فلسفه دیزاین
________
فضا و گرید اساس هر طرحی را میسازد. پس از تسلط و استفاده صحیح، گرید به شما کمک میکند تا راهحلهای جذابی را برای طرحهای خود ایجاد کنید.
گرید چیست؟
گرید به ایجاد پایه هر رابط کمک میکند. میتوانید آن را به عنوان چارچوبی برای طرح خود در نظر بگیرید. چارچوبی که به سازماندهی عناصر رابط کاربری، راهنمایی خواننده و شناسایی بخشهای جداگانه از طراحی شما کمک میکند.
طرحها روی گرید قرار میگیرد که دارای تعداد مشخصی ستون است. ستونها دارای حاشیهای در سمت چپ و راست هستند و همینطور فضایی بین هر ستون قرار دارد.
در ادامه به نکاتی اشاره میکنیم که در این مسیر به شما کمک میکنند:
۱- اعداد را عاقلانه انتخاب کنید
در حالی که گرید ۱۲ ستونی محبوبترین انتخاب است، اما اجباری نیست. هنگام انتخاب گرید، تعداد ستونی را انتخاب کنید که طراحی شما واقعاً به آن احتیاج دارد.
۲- محدودیتهای خود را بشناسید
همیشه صفحهای که برای آن طراحی میکنید را در نظر بگیرید و بدانید که چگونه توسط دیگران کنترل و اداره میشود.
رایجترین اندازهها:
دسکتاپ: ۱۰۲۴*۱۴۴۰
تبلت: ۱۰۲۴*۷۶۸
موبایل: ۶۴۰*۳۲۰
۳- فاصله افقی و عمودی بین گریدها
هردو فاصله افقی و عمودی را در نظر بگیرید تا طرح شما جذابتر و سازگارتر شود.
۴- ریتم عمودی را شکل دهید
از گرید پایه برای مرتب کردن محتوا و ایجاد هماهنگی بصری در متن و عناصر طرح خود استفاده کنید.
۵- از قدرت قاب و رنگ استفاده کنید
از قاببندی به عنوان ابزاری برای تمرکز توجه کاربر به بخش خاصی از طرح استفاده کنید.
۶- از گرید خارج شوید
عناصر خاصی را از گرید خارج کنید. از این ترفند تفکیک برای افزودن ارزش و برجسته کردن بخشهای خاصی از طراحی خود استفاده کنید.
۷- گرید خود را تطبیق دهید
اطمینان حاصل کنید که طرح شما با اندازههای معمول صفحه نمایش، نقاط شکست سازگار است و تجربه کاربری خوبی از تلفن همراه را فراهم میکند.
۸- طراحی بدون گرید را بیاموزید
یاد بگیرید که چگونه با یک گرید و بدون اینکه آن را در بوم خود بیاورید، طراحی کنید. هر از گاهی طرح خود را بدون گرید مشاهده کنید تا خلاقانهترین راهحلها را برای کارهای خود بیابید.
برای مشاهده نمونه برای هریک از موارد گفته شده، میتوانید این مقاله را مطالعه نمایید.
https://bit.ly/dxgn846
(زمان حدودی مطالعه: ۴ دقیقه)
نویسنده: ثمره شاملو
#گرید #شبکه #اصول_طراحی
@Dexign فلسفه دیزاین
________
Medium
UI Grid Best Practices
Space and grid make the foundation of any design. Once mastered and used correctly, the grid helps you to create solid and visually appealing solutions for your designs. Therefore, I would like to…
دکمههای غیرفعال در طراحی رابط کاربری
هنگامی که میخواهیم برای فرمهای وب طراحی کنیم، همیشه سعی میکنیم احتمال خطای کاربران را به حداقل برسانیم. به همین منظور سعی میکنیم از اقداماتی که ممکن است باعث خطا شوند، جلوگیری کنیم. به عنوان مثال غیرفعال نشان دادن دکمه "تایید" برای جلوگیری از خطای کاربران، در نگاه اول، به نظر منطقی میرسد.
در این مقاله توضیح داده خواهد شد که چرا باید مراقب دکمههای غیرفعال در طراحی باشید.
چرا دکمههای غیرفعال میتوانند باعث تجربه کاربری بد شوند:
دکمه غیرفعال یک الگوی جالب است. از یک منظر برای کاربر جادویی عمل میکند، مانند هنگامی که کاربر تمامی دیتای مورد نیاز را صحیح وارد میکند و سیستم با فعال کردن یک دکمه به کاربر پاداش میدهد؛ اما هنگام وجود مشکل، دکمه غیرفعال به دلیل اصلی حساسیت و اصطکاک فکری کاربر تبدیل میشود زیرا مانع پیشرفتن او شده است.
توضیحی برای دلیل مشکلی که رخ داده وجود ندارد:
"چرا کار نمیکند؟" این سوالی است که کاربران وقتی نمیتوانند ادامه دهند، میپرسند. مهمترین قانون کاربردپذیری "وادار نکردن کاربر به فکر کردن" است. شما با غیرفعال کردن یک دکمه، باعث میشوید که کاربر به فکر درباره نحوه فعال کردن آن دکمه وادار شود. به جای کلیک بر روی یک دکمه و مشاهده یک پیام خاص، کاربران فرم را از بالا تا پایین اسکن میکنند تا آنچه که دکمه را غیرفعال نگه داشته، بیابند. این مورد خصوصا درباره فرمهای بلند و پیچیده صدق میکند؛ برای مثال موقعیتی را تصور کنید که درحال پر کردن یک فرم بلند در موبایل هستید و فقط قسمتی از آن در صفحه موبایلتان قابل مشاهده است.
آنچه که وضعیت را بدتر میکند این است که حتی وقتی دادهها معتبر هستند، ممکن است فرمت اشتباه همچنان دکمه را غیرفعال نگه دارد. برای مثال ممکن است کاربر به طور اتفاقی فضای خالی زیادی در بعضی از بخشهای یک فرم جا بگذارد؛ سیستم نمیتواند با این فرمت ادامه دهد و دکمه "تایید" را فعال نمیکند در نتیجه فرآیند پیدا کردن دلیل یک مشکل برای کاربر نهایی چالشبرانگیز میشود. تقریبا اینطور به نظر میرسد که سیستم درحال بازی پازل با کاربر است: چیزی اشتباه است اما من به شما نخواهم گفت چیست. شما باید آن را حدس بزنید.
جای تعجب نیست که دکمههای غیرفعال تأثیر منفی بر تبدیل افراد به کاربر دارند. افرادی که نمیخواهند دلیل غیرفعال بودن دکمه را بیابند، فرایند پر کردن فرم را به سادگی رها میکنند.
در ادامه این مقاله میتوانید درباره تاثیر دکمههای غیرفعال بر دسترسیپذیری بد و راهکارهایی برای ایجاد ارتباط موثرتر مطالعه کنید.
https://bit.ly/dxgn847
(زمان حدودی مطالعه: ۵ دقیقه)
نویسنده: مریم اکبری
#UX #UI #usability #accessibility
@Dexign فلسفه دیزاین
________
هنگامی که میخواهیم برای فرمهای وب طراحی کنیم، همیشه سعی میکنیم احتمال خطای کاربران را به حداقل برسانیم. به همین منظور سعی میکنیم از اقداماتی که ممکن است باعث خطا شوند، جلوگیری کنیم. به عنوان مثال غیرفعال نشان دادن دکمه "تایید" برای جلوگیری از خطای کاربران، در نگاه اول، به نظر منطقی میرسد.
در این مقاله توضیح داده خواهد شد که چرا باید مراقب دکمههای غیرفعال در طراحی باشید.
چرا دکمههای غیرفعال میتوانند باعث تجربه کاربری بد شوند:
دکمه غیرفعال یک الگوی جالب است. از یک منظر برای کاربر جادویی عمل میکند، مانند هنگامی که کاربر تمامی دیتای مورد نیاز را صحیح وارد میکند و سیستم با فعال کردن یک دکمه به کاربر پاداش میدهد؛ اما هنگام وجود مشکل، دکمه غیرفعال به دلیل اصلی حساسیت و اصطکاک فکری کاربر تبدیل میشود زیرا مانع پیشرفتن او شده است.
توضیحی برای دلیل مشکلی که رخ داده وجود ندارد:
"چرا کار نمیکند؟" این سوالی است که کاربران وقتی نمیتوانند ادامه دهند، میپرسند. مهمترین قانون کاربردپذیری "وادار نکردن کاربر به فکر کردن" است. شما با غیرفعال کردن یک دکمه، باعث میشوید که کاربر به فکر درباره نحوه فعال کردن آن دکمه وادار شود. به جای کلیک بر روی یک دکمه و مشاهده یک پیام خاص، کاربران فرم را از بالا تا پایین اسکن میکنند تا آنچه که دکمه را غیرفعال نگه داشته، بیابند. این مورد خصوصا درباره فرمهای بلند و پیچیده صدق میکند؛ برای مثال موقعیتی را تصور کنید که درحال پر کردن یک فرم بلند در موبایل هستید و فقط قسمتی از آن در صفحه موبایلتان قابل مشاهده است.
آنچه که وضعیت را بدتر میکند این است که حتی وقتی دادهها معتبر هستند، ممکن است فرمت اشتباه همچنان دکمه را غیرفعال نگه دارد. برای مثال ممکن است کاربر به طور اتفاقی فضای خالی زیادی در بعضی از بخشهای یک فرم جا بگذارد؛ سیستم نمیتواند با این فرمت ادامه دهد و دکمه "تایید" را فعال نمیکند در نتیجه فرآیند پیدا کردن دلیل یک مشکل برای کاربر نهایی چالشبرانگیز میشود. تقریبا اینطور به نظر میرسد که سیستم درحال بازی پازل با کاربر است: چیزی اشتباه است اما من به شما نخواهم گفت چیست. شما باید آن را حدس بزنید.
جای تعجب نیست که دکمههای غیرفعال تأثیر منفی بر تبدیل افراد به کاربر دارند. افرادی که نمیخواهند دلیل غیرفعال بودن دکمه را بیابند، فرایند پر کردن فرم را به سادگی رها میکنند.
در ادامه این مقاله میتوانید درباره تاثیر دکمههای غیرفعال بر دسترسیپذیری بد و راهکارهایی برای ایجاد ارتباط موثرتر مطالعه کنید.
https://bit.ly/dxgn847
(زمان حدودی مطالعه: ۵ دقیقه)
نویسنده: مریم اکبری
#UX #UI #usability #accessibility
@Dexign فلسفه دیزاین
________
Medium
Disabled Buttons in User Interface
When we design web forms, we always try to minimize the chance of users making mistakes. With that intention, we try to prevent users from…
مسیر حرکت کاربر در محصول خود را ببینید!
اگر می خواهید تجربه مشتری را بهبود بخشید، باید سفری را که کاربران شما هنگام تعامل با محصول طی میکنند، درک کنید.
دانستن سفر کاربر به شما کمک میکند نقاط ضعف سفر مشتری را شناسایی کرده و اقدام کنید و آنچه را که کار می کند حفظ کنید. با این کار شما تجربه مشتریان خود را بهبود می بخشید.
سفر مشتری عبارت است از نمایش بصری فرایندها، نیازها و تصورات مشتریان در طول تعامل و ارتباط آنها با یک محصول. این به شما کمک میکند تا گامهایی را که مشتریان در کسبوکار شما طی میکنند -چه آنهایی که می بینید و چه آنهایی که ملموس نیستند- را درک کنید.
هنگام تجسم سفر مشتری، چه چیزهایی را ارزیابی می کنیم:
-رفتار کاربر
کاربر قصد دارد چه کاریرا انجام دهد؟
-ویژگیهای کاربر
کاربر چه میگوید و چه حس میکند؟
-تجربهی مستقیم کاربر
کاربر در اولین استفاده از محصول با چه چیزی برخورد میکند؟
-تجربهی غیرمستقیم کاربر
چه امکاناتی در سایت باید وجود داشته باشد اما کاربر دائما از آنها استفاده نمیکند؟
همانطور که متوجه شدیم، تهیهی نقشهی راه کاربر یکی از اصلیترین مراحل طراحی یک محصول است.
در این مقاله مفصل در ارتباط با تمامی کاربردهای نقشهی کاربر و همینطور مراحل ایجاد آن صحبت شده است.
https://bit.ly/dxgn848
(زمان حدودی مطالعه: ۱۵ دقیقه)
نویسنده: یگانه یغماییان
#نقشهراهکاربر #تجربهکاربری
@Dexign فلسفه دیزاین
________
اگر می خواهید تجربه مشتری را بهبود بخشید، باید سفری را که کاربران شما هنگام تعامل با محصول طی میکنند، درک کنید.
دانستن سفر کاربر به شما کمک میکند نقاط ضعف سفر مشتری را شناسایی کرده و اقدام کنید و آنچه را که کار می کند حفظ کنید. با این کار شما تجربه مشتریان خود را بهبود می بخشید.
سفر مشتری عبارت است از نمایش بصری فرایندها، نیازها و تصورات مشتریان در طول تعامل و ارتباط آنها با یک محصول. این به شما کمک میکند تا گامهایی را که مشتریان در کسبوکار شما طی میکنند -چه آنهایی که می بینید و چه آنهایی که ملموس نیستند- را درک کنید.
هنگام تجسم سفر مشتری، چه چیزهایی را ارزیابی می کنیم:
-رفتار کاربر
کاربر قصد دارد چه کاریرا انجام دهد؟
-ویژگیهای کاربر
کاربر چه میگوید و چه حس میکند؟
-تجربهی مستقیم کاربر
کاربر در اولین استفاده از محصول با چه چیزی برخورد میکند؟
-تجربهی غیرمستقیم کاربر
چه امکاناتی در سایت باید وجود داشته باشد اما کاربر دائما از آنها استفاده نمیکند؟
همانطور که متوجه شدیم، تهیهی نقشهی راه کاربر یکی از اصلیترین مراحل طراحی یک محصول است.
در این مقاله مفصل در ارتباط با تمامی کاربردهای نقشهی کاربر و همینطور مراحل ایجاد آن صحبت شده است.
https://bit.ly/dxgn848
(زمان حدودی مطالعه: ۱۵ دقیقه)
نویسنده: یگانه یغماییان
#نقشهراهکاربر #تجربهکاربری
@Dexign فلسفه دیزاین
________
Qualtrics
Customer Journey Mapping: Your Ultimate Guide | Qualtrics
Find out about how to start your customer journey mapping, and how to improve it for the benefit of your customers and the business.
مستندسازی همان طراحی است.
چطور مستندسازی باعث میشود تا خروجی بهتری از طراحی خود داشته باشیم.
در مراحل اولیه طراحی اهمیت زیادی دارد تا طراحیهای دستی و تصویری مفهومی را انجام دهیم اما بعد از گذشتن از این مراحل نیاز است تا مستندسازی درستی انجام شود تا طراحی با دلایل کافی داشته باشیم.
انواع مستندسازیهای طراحی:
طبق یادداشت پیشین نویسنده دو نوع چشمانداز برای یک طراح را مطرح میشود. این دو نوع، چشمانداز ساختاری و چشمانداز براساس وظایف یا کارهای مهمی که باید انجام شوند؛ هستند.
تقسیمبندی مستندسازیها براساس چشمانداز تسک محور شامل موارد زیر است:
• یوزر استوریها
• موردهای استفاده یا use cases
این مورد برخلاف یوزراستوریها که خلاصه هستند، طولانیتر و دقیقتر نوشته میشود. این موارد نوشته میشوند تا جزئیات ضروری یک طراحی را بنویسیم.
• روایتهای سناریو
این روایتها جزئیات پرتوضیحتری در مورد این که هر تسک در محصول چطور انجام میشود را فراهم میکنند.
• نمودار جریانهای کاربر بوسیله صفحات
این فلوها براساس صفحات محصول ساخته میشود که در واقع به صورت تصویری به ما نشان میدهد کاربر چطور از یک صفحه به صفحه دیگر حرکت میکند.
• مستندسازی سطوح هر صفحه
این مرحله شامل سه بخش است؛
- نگاه کلی از کارکردهای هر صفحه
- سطوح در دسترس هر صفحه و اهداف آنها
- توضیحات مرحله به مرحله برای هر عملکردی که در صفحه وجود دارد.
تقسیمبندی مستندسازیها براساس چشمانداز ساختاری شامل موارد زیر میشود:
• مدل هدف یا object model
که یک نقطه نظر ساختاری از محصول به ما میدهد.
• سیستم واژگان
که بیشتر برای سیستمها و وبسایتهای پیچیده مفید است.
• نقشه معماری
این نقشهها کمک میکنند تا بفهمیم ساختار طراحی به چه شکل خواهد بود و اطلاعات را نمایش میدهد.
• چهارچوب ناوبری
شامل موارد زیر میشود:
- گلوبال منو
- منوهایی که رده دوم از عناوین را نمایش میدهد.
- منو نویگیشن
- کنترلهای درون صفحه
• آرکتایپ صفحات
آرکتایپ صفحات ژانرخاصی از صفحه است که عملکردهای ضروری و مشخصات چارچوب صفحات را نشان میدهد.
• کامپوننتهای استانداردشده
برای ساخت یک دیزاین سیستم صحیح نیاز به المانهایی استاندارد دارد.
میتوانید برای آشنایی با جزئیات مقاله کامل را مطالعه کنید:
https://bit.ly/dxgn849
(زمان حدودی مطالعه: ۱۰ دقیقه)
نویسنده: محمدرضا عباسی
#documenting #ux #design_process #product_design
@Dexign فلسفه دیزاین
________
چطور مستندسازی باعث میشود تا خروجی بهتری از طراحی خود داشته باشیم.
در مراحل اولیه طراحی اهمیت زیادی دارد تا طراحیهای دستی و تصویری مفهومی را انجام دهیم اما بعد از گذشتن از این مراحل نیاز است تا مستندسازی درستی انجام شود تا طراحی با دلایل کافی داشته باشیم.
انواع مستندسازیهای طراحی:
طبق یادداشت پیشین نویسنده دو نوع چشمانداز برای یک طراح را مطرح میشود. این دو نوع، چشمانداز ساختاری و چشمانداز براساس وظایف یا کارهای مهمی که باید انجام شوند؛ هستند.
تقسیمبندی مستندسازیها براساس چشمانداز تسک محور شامل موارد زیر است:
• یوزر استوریها
• موردهای استفاده یا use cases
این مورد برخلاف یوزراستوریها که خلاصه هستند، طولانیتر و دقیقتر نوشته میشود. این موارد نوشته میشوند تا جزئیات ضروری یک طراحی را بنویسیم.
• روایتهای سناریو
این روایتها جزئیات پرتوضیحتری در مورد این که هر تسک در محصول چطور انجام میشود را فراهم میکنند.
• نمودار جریانهای کاربر بوسیله صفحات
این فلوها براساس صفحات محصول ساخته میشود که در واقع به صورت تصویری به ما نشان میدهد کاربر چطور از یک صفحه به صفحه دیگر حرکت میکند.
• مستندسازی سطوح هر صفحه
این مرحله شامل سه بخش است؛
- نگاه کلی از کارکردهای هر صفحه
- سطوح در دسترس هر صفحه و اهداف آنها
- توضیحات مرحله به مرحله برای هر عملکردی که در صفحه وجود دارد.
تقسیمبندی مستندسازیها براساس چشمانداز ساختاری شامل موارد زیر میشود:
• مدل هدف یا object model
که یک نقطه نظر ساختاری از محصول به ما میدهد.
• سیستم واژگان
که بیشتر برای سیستمها و وبسایتهای پیچیده مفید است.
• نقشه معماری
این نقشهها کمک میکنند تا بفهمیم ساختار طراحی به چه شکل خواهد بود و اطلاعات را نمایش میدهد.
• چهارچوب ناوبری
شامل موارد زیر میشود:
- گلوبال منو
- منوهایی که رده دوم از عناوین را نمایش میدهد.
- منو نویگیشن
- کنترلهای درون صفحه
• آرکتایپ صفحات
آرکتایپ صفحات ژانرخاصی از صفحه است که عملکردهای ضروری و مشخصات چارچوب صفحات را نشان میدهد.
• کامپوننتهای استانداردشده
برای ساخت یک دیزاین سیستم صحیح نیاز به المانهایی استاندارد دارد.
میتوانید برای آشنایی با جزئیات مقاله کامل را مطالعه کنید:
https://bit.ly/dxgn849
(زمان حدودی مطالعه: ۱۰ دقیقه)
نویسنده: محمدرضا عباسی
#documenting #ux #design_process #product_design
@Dexign فلسفه دیزاین
________
Medium
Object Modeling for Designers: An Introduction
As a user experience designer, it can feel as though I am waging an on-going, never-ending battle against complexity, especially when…
آناتومی و طراحی فیلدهای متنی و فرمها (Text fields & Forms)
فرمها برای مدت زمان قابل توجهی وجود داشته و بسیاری از کارها را ساده کردهاند. با پیشرفت اطلاعات و پردازش اطلاعات، جمعآوری دادهها نیز رشد کرده است. فرمها در واقع متشکل از فیلدهای متنیاند. لذا در ادامه نگاهی بیاندازیم به آناتومی این فیلدها.
آناتومی فیلدهای متنی
این فیلدها رابطی هستند که به کاربر اجازه میدهند اطلاعات خود را وارد UI کند. یک فیلد متنی از Container, Input text, Label text, Placeholder text, Help text, Leading icon, Trailing icon تشکیل شده است که هر کدام به نوعی با کاربر تعامل ایجاد میکنند.
با وجود انواع مختلفی از فیلدهای متنی، استفاده از فیلد متناسب با نوع داده دریافتی از کاربر نکتهای بسیار مهم است. علاوه بر توجه به استفاده از نوعی مناسب، در طراحی فیلدهای متنی باید حالات مختلف را نیز در نظر بگیریم. این حالات مختلف با تغییراتی در ظاهر فیلد پایه ایجاد میشوند که میتوان از حالاتی مانند Inactive, Hover, Disabled, Focused, Validation, Error و ... نام برد.
فیلدهای متنی استایلهای مختلفی را نیز شامل میشوند. به عنوان مثال میتوان به استایل حضور عنوان در این فیلدها اشاره کرد. عنوانهایی که میتوانند در جایگاههای مختلفی قرار بگیرند و هرکدام ویژگی و عملکردی منحصر به فرد را داشته باشند.
در طول این مقاله با مزایاو معایب استایلهای مختلف فیلدهای متنی آشنا خواهید شد و همینطور خواهید دید که سایز یک فیلد چگونه میتواند با کاربر شما ارتباط برقرار کند، خواهید دید که چگونه میتوانید در پر کردن یک فیلد به کاربر خود کمک کنید و با استفاده درست از Placeholder ها آشنا میشوید.
پس از آشنایی با آناتومی فیلدهای متنی یاد میگیریم در طراحی فرمها چگونه از فیلدهای متنی بهتر استفاده کنیم و چگونه میتوانیم با کاهش فیلدهای اضافی و همینطور دستهبندی و گروهبندی فیلدها فرمهای سادهتر و کاربردیتری را بسازیم. همینطور میبینیم که شکستن یک فرم پیچیده به چند مرحله و استفاده از Lyout مناسب در طراحی فرمها چگونه سردرگمی کاربر را کمتر میکن.
https://bit.ly/dxgn850
(زمان حدودی مطالعه: ۸ دقیقه)
نویسنده: رشید مسعودی
#فرم #فیلد_متنی #رابط_کاربری #UI
@Dexign فلسفه دیزاین
________
فرمها برای مدت زمان قابل توجهی وجود داشته و بسیاری از کارها را ساده کردهاند. با پیشرفت اطلاعات و پردازش اطلاعات، جمعآوری دادهها نیز رشد کرده است. فرمها در واقع متشکل از فیلدهای متنیاند. لذا در ادامه نگاهی بیاندازیم به آناتومی این فیلدها.
آناتومی فیلدهای متنی
این فیلدها رابطی هستند که به کاربر اجازه میدهند اطلاعات خود را وارد UI کند. یک فیلد متنی از Container, Input text, Label text, Placeholder text, Help text, Leading icon, Trailing icon تشکیل شده است که هر کدام به نوعی با کاربر تعامل ایجاد میکنند.
با وجود انواع مختلفی از فیلدهای متنی، استفاده از فیلد متناسب با نوع داده دریافتی از کاربر نکتهای بسیار مهم است. علاوه بر توجه به استفاده از نوعی مناسب، در طراحی فیلدهای متنی باید حالات مختلف را نیز در نظر بگیریم. این حالات مختلف با تغییراتی در ظاهر فیلد پایه ایجاد میشوند که میتوان از حالاتی مانند Inactive, Hover, Disabled, Focused, Validation, Error و ... نام برد.
فیلدهای متنی استایلهای مختلفی را نیز شامل میشوند. به عنوان مثال میتوان به استایل حضور عنوان در این فیلدها اشاره کرد. عنوانهایی که میتوانند در جایگاههای مختلفی قرار بگیرند و هرکدام ویژگی و عملکردی منحصر به فرد را داشته باشند.
در طول این مقاله با مزایاو معایب استایلهای مختلف فیلدهای متنی آشنا خواهید شد و همینطور خواهید دید که سایز یک فیلد چگونه میتواند با کاربر شما ارتباط برقرار کند، خواهید دید که چگونه میتوانید در پر کردن یک فیلد به کاربر خود کمک کنید و با استفاده درست از Placeholder ها آشنا میشوید.
پس از آشنایی با آناتومی فیلدهای متنی یاد میگیریم در طراحی فرمها چگونه از فیلدهای متنی بهتر استفاده کنیم و چگونه میتوانیم با کاهش فیلدهای اضافی و همینطور دستهبندی و گروهبندی فیلدها فرمهای سادهتر و کاربردیتری را بسازیم. همینطور میبینیم که شکستن یک فرم پیچیده به چند مرحله و استفاده از Lyout مناسب در طراحی فرمها چگونه سردرگمی کاربر را کمتر میکن.
https://bit.ly/dxgn850
(زمان حدودی مطالعه: ۸ دقیقه)
نویسنده: رشید مسعودی
#فرم #فیلد_متنی #رابط_کاربری #UI
@Dexign فلسفه دیزاین
________
Medium
Text fields & Forms design — UI components series
Simple rules that will help you design forms users will like to complete