جادوی حرکت
استفاده از انیمیشن برای برطرف کردن مشکلات در طراحی UI
آیکنهای متحرک، دکمههایی که بعد از فشردن تغییر میکنند و تصویرسازیهایی که نسبت به رفتار ما واکنش نشان میدهند، همه اینها مواردی است که هنگام استفاده از یک سایت یا اپلیکیشن با آن برخورد کردهایم و گاهی چنان مجذوبش شدهایم که فقط برای دیدن دوباره آن حرکت، یک عمل چندبار تکرار کردیم.
اما چرا وجود حرکت در یک محصول انقدر جذاب است و کاربران تا این حد به آن علاقهمند هستند؟ شاید چون انیمیشنها احساس و درکی مشابه تعامل با یک جسم فیزیکی در زندگی واقعی را ایجاد میکنند. احساسی که بخشی جدایی ناپذیر از تجربه تعامل کاربر با محصول است و باعث میشود آن را بیشتر دوست داشته باشد یا در مقابل از استفاده از آن پشیمان شود.
با وجود علاقه کاربران به حرکت بازهم افرادی هستند که استفاده از انیمیشن در طراحی UI را کاری پیچیده و غیرضروری میدانند که باعث بالا بردن زمان بارگزاری طرح میشود. شاید گفتهی این افراد درست باشد اما حذف عاملی که باعث رضایت و لذت کاربران هنگام استفاده از یک محصول میشود کار چندان عاقلانهای نیست. پس به عنوان یک طراح، بهتر است بهجای حذف انیمیشن از طراحی UI آن را به عنوان یک عنصر کاربردی ببنیم و سعی کنیم تا با رویکردی متفکرانه و هدفمند از این جادوی شگفت انگیز در طراحیهایمان استفاده کنیم.
یکی از بهترین رویکردها استفاده از انیمیشن برای حل مشکلات موجود در طرحهایمان است اما قبل از این کار لازم است تا مشکلات را بشناسیم و راههای برطرف کردن آنها با استفاده از انیمیشن را بدانیم. اگر به شناخت این مشکلات و روشهای ازبین بردنشان با انیمیشن علاقه دارید پیشنهاد میکنم که این مقاله را بخوانید.
http://bit.ly/dxgn755
(زمان حدودی مطالعه: ۱۰ دقیقه)
نویسنده: فیروزه ایمانی
#طراحی #رابط_کاربری #انیمیشن
@Dexign فلسفه دیزاین
______
استفاده از انیمیشن برای برطرف کردن مشکلات در طراحی UI
آیکنهای متحرک، دکمههایی که بعد از فشردن تغییر میکنند و تصویرسازیهایی که نسبت به رفتار ما واکنش نشان میدهند، همه اینها مواردی است که هنگام استفاده از یک سایت یا اپلیکیشن با آن برخورد کردهایم و گاهی چنان مجذوبش شدهایم که فقط برای دیدن دوباره آن حرکت، یک عمل چندبار تکرار کردیم.
اما چرا وجود حرکت در یک محصول انقدر جذاب است و کاربران تا این حد به آن علاقهمند هستند؟ شاید چون انیمیشنها احساس و درکی مشابه تعامل با یک جسم فیزیکی در زندگی واقعی را ایجاد میکنند. احساسی که بخشی جدایی ناپذیر از تجربه تعامل کاربر با محصول است و باعث میشود آن را بیشتر دوست داشته باشد یا در مقابل از استفاده از آن پشیمان شود.
با وجود علاقه کاربران به حرکت بازهم افرادی هستند که استفاده از انیمیشن در طراحی UI را کاری پیچیده و غیرضروری میدانند که باعث بالا بردن زمان بارگزاری طرح میشود. شاید گفتهی این افراد درست باشد اما حذف عاملی که باعث رضایت و لذت کاربران هنگام استفاده از یک محصول میشود کار چندان عاقلانهای نیست. پس به عنوان یک طراح، بهتر است بهجای حذف انیمیشن از طراحی UI آن را به عنوان یک عنصر کاربردی ببنیم و سعی کنیم تا با رویکردی متفکرانه و هدفمند از این جادوی شگفت انگیز در طراحیهایمان استفاده کنیم.
یکی از بهترین رویکردها استفاده از انیمیشن برای حل مشکلات موجود در طرحهایمان است اما قبل از این کار لازم است تا مشکلات را بشناسیم و راههای برطرف کردن آنها با استفاده از انیمیشن را بدانیم. اگر به شناخت این مشکلات و روشهای ازبین بردنشان با انیمیشن علاقه دارید پیشنهاد میکنم که این مقاله را بخوانید.
http://bit.ly/dxgn755
(زمان حدودی مطالعه: ۱۰ دقیقه)
نویسنده: فیروزه ایمانی
#طراحی #رابط_کاربری #انیمیشن
@Dexign فلسفه دیزاین
______
Medium
UI Animation: Eye-Pleasing, Problem-Solving.
Animation applied in user interfaces is the topic drawing high attention and provoking hot debates nowadays. Although there is a big army…
راهکارهایی برای طراحی محصولات دیجیتال فراگیر
در این مقاله به معرفی و ارائه راهکارهایی برای طراحی محصولات دیجیتال فراگیر پرداخته شده است. در اینجا منظور از محصولات فراگیر محصولاتی هستند که توسط طیف متنوع و وسیعی از کاربران قابل استفاده هستند و در طراحی آنها با توجه به این نکته انجام شده است که تمامی گروههای کاربران اعم از کاربران با سلیقههای مختلف یا ویژگیهای ذاتی و فیزیکی مختلف بتوانند از آن استفاده کنند و در استفاده از محصول تجربه کاربری مناسبی داشته باشند.
یکی از رویکردهای رایج در طراحی محصولات دیجیتال، بررسی آن از نقطه نظر خودمان و باور به این موضوع است که تجربه ما منعکسکننده تجربه همه کاربران است. این پیشداوری ذهنی که برخواسته از طبیعت انسان است در مقابل تفکر دیزاین قرار میگیرد و باعث میشود تا مشکل را صرفا مربوط به خود دیده و یافتن راهحل جامع برای آن که توسط همه انسانها کاربردی باشد را کنار بگذاریم.
چالش اصلی دیزاین، ایجاد تجربهای است که انطباقپذیر، منعطف، مقیاسپذیر و از همه مهمتر قابل استفاده توسط بیشترین تعداد ممکن از انسانها باشد. هدف ما به عنوان دیزاینر، بهبود تجربه کاربری برای همه و نه فقط برای گروهی خاص است.
با این تفاسیر برای رسیدن به محصولاتی فراگیر، راهکارهایی وجود دارد که برخی از آنها به شرح زیر است:
۱- استفاده از رنگها و پایبندی به استانداردهای رنگی و تضاد رنگها
۲- توجه به استاندارهای دسترسیپذیری نظیر WCAG و ADA برای افراد دارای معلولیت
۳- تنوع نژادی در تصویرسازیها و تصاویر مورد استفاده در خلق محصولات دیجیتال
۴- طراحی فرمها بر مبنای تمامی جنسیتهای مختلف
۵- مصاحبه با افراد و گروههای مختلف با پیشینه و تجربیات مختلف
۶- طراحی بر مبنای فضا و محیط کاربر
۷- ایجاد امکان شخصیسازی برای کاربران
۸- سخن گفتن به زبانی و ادبیاتی که برای همه کاربران قابل فهم باشد.
۹- طراحی برای کاربران راستدست و چپدست
۱۰- عدم تخطی از استانداردها و الگوهای مورد پذیرش کاربران
براساس این راهکارها میتوانید محصولی فراگیر طراحی کنید. برای آشنایی بیشتر با هریک از این راهکارها، میتوانید مقاله زیر را مطالعه کنید:
http://bit.ly/dxgn756
(زمان حدودی مطالعه: ۱۵ دقیقه)
نویسنده: محمدرضا پناهی
#دیزاین #فراگیر #تجربه_کاربری
@Dexign فلسفه دیزاین
_____
در این مقاله به معرفی و ارائه راهکارهایی برای طراحی محصولات دیجیتال فراگیر پرداخته شده است. در اینجا منظور از محصولات فراگیر محصولاتی هستند که توسط طیف متنوع و وسیعی از کاربران قابل استفاده هستند و در طراحی آنها با توجه به این نکته انجام شده است که تمامی گروههای کاربران اعم از کاربران با سلیقههای مختلف یا ویژگیهای ذاتی و فیزیکی مختلف بتوانند از آن استفاده کنند و در استفاده از محصول تجربه کاربری مناسبی داشته باشند.
یکی از رویکردهای رایج در طراحی محصولات دیجیتال، بررسی آن از نقطه نظر خودمان و باور به این موضوع است که تجربه ما منعکسکننده تجربه همه کاربران است. این پیشداوری ذهنی که برخواسته از طبیعت انسان است در مقابل تفکر دیزاین قرار میگیرد و باعث میشود تا مشکل را صرفا مربوط به خود دیده و یافتن راهحل جامع برای آن که توسط همه انسانها کاربردی باشد را کنار بگذاریم.
چالش اصلی دیزاین، ایجاد تجربهای است که انطباقپذیر، منعطف، مقیاسپذیر و از همه مهمتر قابل استفاده توسط بیشترین تعداد ممکن از انسانها باشد. هدف ما به عنوان دیزاینر، بهبود تجربه کاربری برای همه و نه فقط برای گروهی خاص است.
با این تفاسیر برای رسیدن به محصولاتی فراگیر، راهکارهایی وجود دارد که برخی از آنها به شرح زیر است:
۱- استفاده از رنگها و پایبندی به استانداردهای رنگی و تضاد رنگها
۲- توجه به استاندارهای دسترسیپذیری نظیر WCAG و ADA برای افراد دارای معلولیت
۳- تنوع نژادی در تصویرسازیها و تصاویر مورد استفاده در خلق محصولات دیجیتال
۴- طراحی فرمها بر مبنای تمامی جنسیتهای مختلف
۵- مصاحبه با افراد و گروههای مختلف با پیشینه و تجربیات مختلف
۶- طراحی بر مبنای فضا و محیط کاربر
۷- ایجاد امکان شخصیسازی برای کاربران
۸- سخن گفتن به زبانی و ادبیاتی که برای همه کاربران قابل فهم باشد.
۹- طراحی برای کاربران راستدست و چپدست
۱۰- عدم تخطی از استانداردها و الگوهای مورد پذیرش کاربران
براساس این راهکارها میتوانید محصولی فراگیر طراحی کنید. برای آشنایی بیشتر با هریک از این راهکارها، میتوانید مقاله زیر را مطالعه کنید:
http://bit.ly/dxgn756
(زمان حدودی مطالعه: ۱۵ دقیقه)
نویسنده: محمدرضا پناهی
#دیزاین #فراگیر #تجربه_کاربری
@Dexign فلسفه دیزاین
_____
Medium
10 Ways to Design More Inclusive Products
Ways to make digital products more accessible, usable, and user friendly for everyone.
چطور لندینگ پیج خود را خراب کنیم؟
همانطور که از تیتر این مقاله پیداست، در آن به روشهایی میپردازیم که شما نباید آن را در زمینه لندینگپیج دنبال کنید.
لندینگپیجها عموما برای یک هدف خاص طراحی میشوند و تمام المانهای صفحه، تلاش خود را به کار میگیرند تا به آن هدف برسند.
هدفگذاریهای اشتباه معمولا بازدیدهای وبسایت را کم کرده و در نتیجه این اتفاق به شکست لندینگ میانجامد.
* یکی از نکات جالبی که این مقاله به آن اشاره میکند، همیشه روی ترند دیزاین کردن لندینگپیج است.
معمولا زمانی که یک سبک دیزاین تبدیل به ترند میشود، به سرعت به سمت از مد افتادن پیش میرود و از آنجایی که این روند با سرعت زیادی اتفاق میافتد، بهتر است تا ما همیشه سبک خودمان را پیدا کنیم و بتوانیم بهترین خروجی برای منظوری که داریم را داشته باشیم.
درواقع تفاوت ارزشمند واقعی همینجاست.
در مقالهی امروز، نویسنده ۵ عامل بسیار مهم در شکست لندینگ پیج را بررسی میکند که خواندن و مرورش خالی از لطف نیست.
http://bit.ly/dxgn757
(زمان حدودی مطالعه: ۷ دقیقه)
نویسنده: آرش اصغری
#تجربه_کاربری #لندینگ
@dexign فلسفه دیزاین
______
همانطور که از تیتر این مقاله پیداست، در آن به روشهایی میپردازیم که شما نباید آن را در زمینه لندینگپیج دنبال کنید.
لندینگپیجها عموما برای یک هدف خاص طراحی میشوند و تمام المانهای صفحه، تلاش خود را به کار میگیرند تا به آن هدف برسند.
هدفگذاریهای اشتباه معمولا بازدیدهای وبسایت را کم کرده و در نتیجه این اتفاق به شکست لندینگ میانجامد.
* یکی از نکات جالبی که این مقاله به آن اشاره میکند، همیشه روی ترند دیزاین کردن لندینگپیج است.
معمولا زمانی که یک سبک دیزاین تبدیل به ترند میشود، به سرعت به سمت از مد افتادن پیش میرود و از آنجایی که این روند با سرعت زیادی اتفاق میافتد، بهتر است تا ما همیشه سبک خودمان را پیدا کنیم و بتوانیم بهترین خروجی برای منظوری که داریم را داشته باشیم.
درواقع تفاوت ارزشمند واقعی همینجاست.
در مقالهی امروز، نویسنده ۵ عامل بسیار مهم در شکست لندینگ پیج را بررسی میکند که خواندن و مرورش خالی از لطف نیست.
http://bit.ly/dxgn757
(زمان حدودی مطالعه: ۷ دقیقه)
نویسنده: آرش اصغری
#تجربه_کاربری #لندینگ
@dexign فلسفه دیزاین
______
Medium
5 things that are killing your landing page
There are not so obvious as you might think.
چگونه بازآفرینی برند موفقی داشته باشیم؟
همین چند وقت پیش بود که تغییر لوگوی قدیمی کافه بازار موجی از انتقادات را در فضای مجازی برانگیخت و بسیاری از کاربران را خواسته یا ناخواسته با خود همراه کرد، پیش از این تغییر لوگوهای اسنپ و تپسی هم چنین فضایی را ایجاد کرده بود. نمونههایی مشابه کم نیستند و این تغییر آخرین تغییر نخواهد بود. اما چرا شرکتهای بزرگ با وجود آگاهی از مقاومت کاربران در برابر تغییر و همه هجمههای احتمالی بازهم ریسک بازآفرینی برند (rebranding) را میپذیرند و خود را در معرض قضاوتها و گاهی تمسخر کاربرانشان قرار میدهند؟
به طور کلی برندسازی و باز طراحی برند همیشه نیاز به زمان، تلاش و کمی شانس دارد، بازآفرینی برند فرصتی شگفتانگیز برای شرکتها ایجاد میکند، تا پیوند خود را با مشتریانشان قویتر کرده و ذهنیت آنها در مورد برندشان را بهبود دهند و از سوی دیگر با جذب مشتریان جدید، سهم بیشتری از بازار را بهدست آورده و از رقبای خود پیشی بگیرند. همه این تغییرات مثبت تاثیر بسیار خوبی در جایگاه و موقعیت برند دارند اما همیشه اینطور نیست و گاهی شرکتها نهتنها بازخورد مثبتی از انجام آن دریافت نمیکنند بلکه بهجای رسیدن به سود بیشتر باعث رکود آنها نیز میشود.
موفقیت در بازآفرینی برند به مهارتهای خلاقانه وابسته نیست بلکه به کیفیت تحقیقات بستگی دارد. تنها زمانی که از نیازهای کاربرانمان به درستی آگاه باشیم میتوانیم آنچه را که آنها نیاز دارند در اختیارشان بگذاریم. عدم آگاهی از نیازهای کاربران یا تصور آگاهی از آنها باعث میشود که این بازآفرینی بدون هدف انجام شود. در یک جمله بازآفرینی بدون تحقیقات جامع و کامل، هدردادن بودجه بازاریابی است.
بارزترین تغییرات مفهومی در یک شرکت با بازطراحی لوگو اتفاق میافتد. تغییر در لوگو بیشتر از سایر تغییرات از سمت کاربران مورد قضاوت قرار میگیرد زیرا کاربران به صورت ملموسی با آن سروکار دارند. اما تغییر لوگو همیشه با مقاومت کاربران روبرو نیست و اگر بر مبنای تحقیقات درست و مطابق با نیازهای کاربران باشد سبب موفقیت برند خواهد بود.
اگر دوست دارید درباره نتایج موفق بازآفرینی برند و بازطراحی لوگو در شرکتهای اپل، Airbnb ،لگو، پیتزا هات و کمیک های DC بیشتر بدانید پیشنهاد میکنم که این مقاله را بخوانید.
http://bit.ly/dxgn758
(زمان حدودی مطالعه: ۷ دقیقه)
نویسنده: فیروزه ایمانی
#بازآفرینی_برند #بازطراحی_لوگو #برند #لوگو
@DEXIGN فلسفه دیزاین
______
همین چند وقت پیش بود که تغییر لوگوی قدیمی کافه بازار موجی از انتقادات را در فضای مجازی برانگیخت و بسیاری از کاربران را خواسته یا ناخواسته با خود همراه کرد، پیش از این تغییر لوگوهای اسنپ و تپسی هم چنین فضایی را ایجاد کرده بود. نمونههایی مشابه کم نیستند و این تغییر آخرین تغییر نخواهد بود. اما چرا شرکتهای بزرگ با وجود آگاهی از مقاومت کاربران در برابر تغییر و همه هجمههای احتمالی بازهم ریسک بازآفرینی برند (rebranding) را میپذیرند و خود را در معرض قضاوتها و گاهی تمسخر کاربرانشان قرار میدهند؟
به طور کلی برندسازی و باز طراحی برند همیشه نیاز به زمان، تلاش و کمی شانس دارد، بازآفرینی برند فرصتی شگفتانگیز برای شرکتها ایجاد میکند، تا پیوند خود را با مشتریانشان قویتر کرده و ذهنیت آنها در مورد برندشان را بهبود دهند و از سوی دیگر با جذب مشتریان جدید، سهم بیشتری از بازار را بهدست آورده و از رقبای خود پیشی بگیرند. همه این تغییرات مثبت تاثیر بسیار خوبی در جایگاه و موقعیت برند دارند اما همیشه اینطور نیست و گاهی شرکتها نهتنها بازخورد مثبتی از انجام آن دریافت نمیکنند بلکه بهجای رسیدن به سود بیشتر باعث رکود آنها نیز میشود.
موفقیت در بازآفرینی برند به مهارتهای خلاقانه وابسته نیست بلکه به کیفیت تحقیقات بستگی دارد. تنها زمانی که از نیازهای کاربرانمان به درستی آگاه باشیم میتوانیم آنچه را که آنها نیاز دارند در اختیارشان بگذاریم. عدم آگاهی از نیازهای کاربران یا تصور آگاهی از آنها باعث میشود که این بازآفرینی بدون هدف انجام شود. در یک جمله بازآفرینی بدون تحقیقات جامع و کامل، هدردادن بودجه بازاریابی است.
بارزترین تغییرات مفهومی در یک شرکت با بازطراحی لوگو اتفاق میافتد. تغییر در لوگو بیشتر از سایر تغییرات از سمت کاربران مورد قضاوت قرار میگیرد زیرا کاربران به صورت ملموسی با آن سروکار دارند. اما تغییر لوگو همیشه با مقاومت کاربران روبرو نیست و اگر بر مبنای تحقیقات درست و مطابق با نیازهای کاربران باشد سبب موفقیت برند خواهد بود.
اگر دوست دارید درباره نتایج موفق بازآفرینی برند و بازطراحی لوگو در شرکتهای اپل، Airbnb ،لگو، پیتزا هات و کمیک های DC بیشتر بدانید پیشنهاد میکنم که این مقاله را بخوانید.
http://bit.ly/dxgn758
(زمان حدودی مطالعه: ۷ دقیقه)
نویسنده: فیروزه ایمانی
#بازآفرینی_برند #بازطراحی_لوگو #برند #لوگو
@DEXIGN فلسفه دیزاین
______
Medium
The Best Rebrands: How Did They Do It?
Proper branding and rebranding in particular always require a lot of time, efforts, and a bit of luck. Amazing rebranding gives a company…
چراغهای راهنما در مسیر تجربه کاربری
یکی از واضحترین رسالتهای طراحی تجربه کاربری اطمینان یافتن از حضور همیشگی تجربه مثبت در فضای سرویس و به تبع آن جلوگیری از به وجود آمدن تجربههای منفی است.
ما انسانها موجودات سادهای هستیم، برای انجام کارها دستورالعملها را ترجیح میدهیم و از یافتن راهحلها اگر در اختیارمان قرار نگیرند طفره میرویم. عنوان کتاب استیو کروگ «نگذار من فکر کنم» یادآور خوبی از این ویژگی محسوب میشود؛ هر اندازه تجربه کاربران بیشتر احساسی و بصری باشد و بدون اینکه ذهن آنها را درگیر کند اهدافشان را محقق سازد، ریسک به وجود آمدن تجربههای منفی کمتر میشود. به بیان سادهتر به کاربران بگویید چهکار کنند و چهکار نکنند قبل از آنکه این سوالها را از خودشان بپرسند.
یکی از راهها برای ارائه این اطلاعات و روشن کردن مسیر تجربه کاربر استفاده از چراغ راهنمای تجربه کاربری است؛
۱. چراغ قرمز: این چراغ سدهای بر سر راه کاربر در جریان تجربه را نشان میدهد. این سدها نقاطی از مسیر تعامل کاربر با سرویس هستند که به هر دلیلی ممکن است مانع ادامه مسیر شوند. میبایست به سرعت این احتمال را به اطلاع کاربر برسانید. برای مثال میتوان به لزوم پر کردن اطلاعات بانکی پیش از فرم استفادهی رایگان از سرویس اشاره کرد. چراغهای قرمز یکی از راههای مناسب برای ایجاد اعتماد در کاربران به شمار میرود و آنچه که کاربر باید انتظارش را داشته باشد متذکر میشوند.
۲. چراغ سبز: این چراغ زمانی به کار میآید که کاربر برای ادامه مسیر نیاز به تکمیل یک سری مراحل داشته باشد تا اجازه عبور بگیرد. یکی از پرکاربردترین چراغهای سبز غیرفعال نگه داشتن دکمه ادامه مسیر تا زمانی است که کاربر اطلاعات لازم را وارد کند. با استفاده از چراغ سبز کاربر از زمان کامل شدن اقداماتی که باید انجام دهد مطلع میشود و با عمل نکردن دکمهها و لینکهایی که به اشتباه به او میگویند که میتواند ادامه دهد سرخورده نمیشود.
۳. چراغ زرد: چراغهای زرد به دو صورت میتوانند به شفافسازی مسیر کاربر کمک کنند؛ یکی با ارائه اخطارهایی که از احتمال به وجود آمدن مشکل در مسیر خبر میدهند و دومی با تلنگر زدن به کاربر برای ادامه دادن مسیری که در پیش گرفته است. پیامی که به شما اطلاع میدهد مهلت استفاده رایگانتان در سرویس رو به اتمام است و در کنار آن طریقه تمدید یا خرید سرویس را در اختیارتان میگذارد یکی از واضحترین و کاربردیترین چراغهای زرد محسوب میشود.
برای مطالعه بیشتر در رابطه با چراغهای راهنمای مسیر تجربه کاربری و مشاهده مثالهای تصویری هر کدام به این مقاله مراجعه کنید:
http://bit.ly/dxgn759
(زمان حدودی مطالعه: ۴ دقیقه)
نویسنده: ریحانه خدایی
#طراحی #تجربه_کاربری #چراغ_راهنما
@Dexign فلسفه دیزاین
______
یکی از واضحترین رسالتهای طراحی تجربه کاربری اطمینان یافتن از حضور همیشگی تجربه مثبت در فضای سرویس و به تبع آن جلوگیری از به وجود آمدن تجربههای منفی است.
ما انسانها موجودات سادهای هستیم، برای انجام کارها دستورالعملها را ترجیح میدهیم و از یافتن راهحلها اگر در اختیارمان قرار نگیرند طفره میرویم. عنوان کتاب استیو کروگ «نگذار من فکر کنم» یادآور خوبی از این ویژگی محسوب میشود؛ هر اندازه تجربه کاربران بیشتر احساسی و بصری باشد و بدون اینکه ذهن آنها را درگیر کند اهدافشان را محقق سازد، ریسک به وجود آمدن تجربههای منفی کمتر میشود. به بیان سادهتر به کاربران بگویید چهکار کنند و چهکار نکنند قبل از آنکه این سوالها را از خودشان بپرسند.
یکی از راهها برای ارائه این اطلاعات و روشن کردن مسیر تجربه کاربر استفاده از چراغ راهنمای تجربه کاربری است؛
۱. چراغ قرمز: این چراغ سدهای بر سر راه کاربر در جریان تجربه را نشان میدهد. این سدها نقاطی از مسیر تعامل کاربر با سرویس هستند که به هر دلیلی ممکن است مانع ادامه مسیر شوند. میبایست به سرعت این احتمال را به اطلاع کاربر برسانید. برای مثال میتوان به لزوم پر کردن اطلاعات بانکی پیش از فرم استفادهی رایگان از سرویس اشاره کرد. چراغهای قرمز یکی از راههای مناسب برای ایجاد اعتماد در کاربران به شمار میرود و آنچه که کاربر باید انتظارش را داشته باشد متذکر میشوند.
۲. چراغ سبز: این چراغ زمانی به کار میآید که کاربر برای ادامه مسیر نیاز به تکمیل یک سری مراحل داشته باشد تا اجازه عبور بگیرد. یکی از پرکاربردترین چراغهای سبز غیرفعال نگه داشتن دکمه ادامه مسیر تا زمانی است که کاربر اطلاعات لازم را وارد کند. با استفاده از چراغ سبز کاربر از زمان کامل شدن اقداماتی که باید انجام دهد مطلع میشود و با عمل نکردن دکمهها و لینکهایی که به اشتباه به او میگویند که میتواند ادامه دهد سرخورده نمیشود.
۳. چراغ زرد: چراغهای زرد به دو صورت میتوانند به شفافسازی مسیر کاربر کمک کنند؛ یکی با ارائه اخطارهایی که از احتمال به وجود آمدن مشکل در مسیر خبر میدهند و دومی با تلنگر زدن به کاربر برای ادامه دادن مسیری که در پیش گرفته است. پیامی که به شما اطلاع میدهد مهلت استفاده رایگانتان در سرویس رو به اتمام است و در کنار آن طریقه تمدید یا خرید سرویس را در اختیارتان میگذارد یکی از واضحترین و کاربردیترین چراغهای زرد محسوب میشود.
برای مطالعه بیشتر در رابطه با چراغهای راهنمای مسیر تجربه کاربری و مشاهده مثالهای تصویری هر کدام به این مقاله مراجعه کنید:
http://bit.ly/dxgn759
(زمان حدودی مطالعه: ۴ دقیقه)
نویسنده: ریحانه خدایی
#طراحی #تجربه_کاربری #چراغ_راهنما
@Dexign فلسفه دیزاین
______
Medium
Traffic lights in user experience
Humans are simple creatures. We understand instructions very well and know how to follow them through.
دایرةالمعارفی برای دیزاینرها
با گشتی در فضای مجازی و دیدن وبسایتها و شبکههای اجتماعی مختلف که دیزاینرها در آنها حضور دارند، احتمالا با مطالب مختلفی روبرو شدهاید که مجموعه نکات و راهکارهایی را برای بهبود کیفیت رابط کاربری و تجربه کاربری، معرفی کرده و توضیح دادهاند. این مطالب معمولا برخواسته از تجربه افراد مختلف است و دیزاینرهای مختلف براساس تجربه و چالشهایی که داشتهاند این مطالب را برای راهنمایی و کمک به دیزاینرهای دیگر و علاقهمندان منتشر کردهاند.
امروز میخواهیم یکی از طولانیترین و کاملترین مطالب در این زمینه را به شما معرفی کنیم. مطلبی که بهقدری کامل و همهجانبه به نکات مربوط به طراحی رابط کاربری و تجربه کاربری پرداخته که تصمیم گرفتیم عنوان «دایرةالمعارف» را برای آن برگزینیم.
در این مقاله، Mark Andrew به بیان نکاتی میپردازد که باور دارد با رعایت آنها تغییرات شگرفی در خروجی کار ایجاد خواهد شد. اگر علاقه دارید با این نکات آشنا شوید، پیشنهاد میکنیم مقاله زیر را مطالعه کنید:
http://bit.ly/dxgn760
(زمان حدودی مطالعه: ۲۰ دقیقه)
نویسنده: محمدرضا پناهی
#رابط_کاربری #تجربه_کاربری
@Dexign فلسفه دیزاین
_______
با گشتی در فضای مجازی و دیدن وبسایتها و شبکههای اجتماعی مختلف که دیزاینرها در آنها حضور دارند، احتمالا با مطالب مختلفی روبرو شدهاید که مجموعه نکات و راهکارهایی را برای بهبود کیفیت رابط کاربری و تجربه کاربری، معرفی کرده و توضیح دادهاند. این مطالب معمولا برخواسته از تجربه افراد مختلف است و دیزاینرهای مختلف براساس تجربه و چالشهایی که داشتهاند این مطالب را برای راهنمایی و کمک به دیزاینرهای دیگر و علاقهمندان منتشر کردهاند.
امروز میخواهیم یکی از طولانیترین و کاملترین مطالب در این زمینه را به شما معرفی کنیم. مطلبی که بهقدری کامل و همهجانبه به نکات مربوط به طراحی رابط کاربری و تجربه کاربری پرداخته که تصمیم گرفتیم عنوان «دایرةالمعارف» را برای آن برگزینیم.
در این مقاله، Mark Andrew به بیان نکاتی میپردازد که باور دارد با رعایت آنها تغییرات شگرفی در خروجی کار ایجاد خواهد شد. اگر علاقه دارید با این نکات آشنا شوید، پیشنهاد میکنیم مقاله زیر را مطالعه کنید:
http://bit.ly/dxgn760
(زمان حدودی مطالعه: ۲۰ دقیقه)
نویسنده: محمدرضا پناهی
#رابط_کاربری #تجربه_کاربری
@Dexign فلسفه دیزاین
_______
Medium
The UI & UX tips collection — volume one
A collection of 34 tips to help improve your designs instantly.
نقش فونت در طراحی رابط کاربری
همین چندسال پیش بود که دیزاینهای واقعگرا، جایشان را به سبک دیزاین فلت دادند، البته بعدا این سبکها در هم تلفیق شدند ولی از آن دوره به بعد، دیزاین رابط کاربری برای همیشه تغییر کرد.
دیگر این اجرای دنیای واقعی روی یک صفحه سفید نبود که طرحی رابط کاربری را تشکیل میداد بلکه دیزاینر باید «حس» را با خطوط، رنگها و نوشتهها انتقال میداد.
اینجا بود که مطالعه، سلیقه، دیدهنری و ترکیب این مفاهیم، تواناییهای یک دیزاینر خوب را تشکیل میداد.
تایپوگرافی هر روز نسبت به قبل از ارزش بیشتری برخوردار میشود، چرا که یکی از مهمترین وسائط انتقال پیامهای مختلف از رابط کاربری، فونتها و حالتهای مختلف فونتهاست.
تا حالا با خودتان فکر کردهاید که چرا ما در برابر بعضی از دیزاینها حس خاصی داریم؟
احساسی که صفحه طرحیشده منتقل میکند باید در جهت هدف آن صفحه باشد. تمام اجزای یک صفحه در جهت آن هدف طراح شده اند و هر عاملی که خارج از این دیزاینسیستم رفتار کند، تمام حس و هدف صفحه را بهم میریزد.
در مقالهای که امروز به شم معرفی میکنم، Ayadi Ghaith درباره اهمیت دقت به تایپوگرافی در طرحی رابط کاربری نوشته و با نمونههای جذابی توضیح داده است.
http://bit.ly/dxgn761
(زمان حدودی مطالعه: ۱۲ دقیقه)
نویسنده: آرش اصغری
#رابط_کاربری #تجربه_کاربری
@Dexign فلسفه دیزاین
_______
همین چندسال پیش بود که دیزاینهای واقعگرا، جایشان را به سبک دیزاین فلت دادند، البته بعدا این سبکها در هم تلفیق شدند ولی از آن دوره به بعد، دیزاین رابط کاربری برای همیشه تغییر کرد.
دیگر این اجرای دنیای واقعی روی یک صفحه سفید نبود که طرحی رابط کاربری را تشکیل میداد بلکه دیزاینر باید «حس» را با خطوط، رنگها و نوشتهها انتقال میداد.
اینجا بود که مطالعه، سلیقه، دیدهنری و ترکیب این مفاهیم، تواناییهای یک دیزاینر خوب را تشکیل میداد.
تایپوگرافی هر روز نسبت به قبل از ارزش بیشتری برخوردار میشود، چرا که یکی از مهمترین وسائط انتقال پیامهای مختلف از رابط کاربری، فونتها و حالتهای مختلف فونتهاست.
تا حالا با خودتان فکر کردهاید که چرا ما در برابر بعضی از دیزاینها حس خاصی داریم؟
احساسی که صفحه طرحیشده منتقل میکند باید در جهت هدف آن صفحه باشد. تمام اجزای یک صفحه در جهت آن هدف طراح شده اند و هر عاملی که خارج از این دیزاینسیستم رفتار کند، تمام حس و هدف صفحه را بهم میریزد.
در مقالهای که امروز به شم معرفی میکنم، Ayadi Ghaith درباره اهمیت دقت به تایپوگرافی در طرحی رابط کاربری نوشته و با نمونههای جذابی توضیح داده است.
http://bit.ly/dxgn761
(زمان حدودی مطالعه: ۱۲ دقیقه)
نویسنده: آرش اصغری
#رابط_کاربری #تجربه_کاربری
@Dexign فلسفه دیزاین
_______
Medium
Ayadi Ghaith – Medium
Read writing from Ayadi Ghaith on Medium. I write quirky rants about intelligent subjects. Design | Entrepreneurship | Growing up www.ayadighaith.com.
ریشهیابی؛ ابزاری برای حل مسئله
این ابزار قدرتمند حل مسئله را گاهی اوقات "استدلال از اصول اولیه" نیز مینامند. شناسایی ریشههای پایهای یک مسئله به شما این امکان را میدهد که راهحلهای ابتکاری ارائه دهید.
اصول اولیه، حقایقی است که دیگر نمیتواند به جزءهای کوچکتری شکسته شود. تفکر ریشهای این است که باید انقدر بِکَنید تا به پایههای یک مسئله برسید.
چگونه از این ابزار استفاده کنیم؟
با مسئله شروع میکنیم و این دو مرحله را انجام میدهیم:
۱. شکستن و تجزیهی مشکل به اساسی ترین حقایق موجود (اصول اولیه)
۲. ساختن راهحل از این اصول اولیه
به نظر ساده میرسد اما نیاز به تفکر متمرکز دارد تا واقعاً در مسئله عمیق شوید و اصول اولیهی آن را کشف کنید.
چند روش برای کمک به شما وجود دارد:
پنج چرا
این یک روش محبوب در تحقیقات کاربر است که در آن پژوهشگر با پرسیدن مکرر سؤالات "چرا" دار به عمق بیشتری از مسئله میپردازد. این روش به شما کمک میکند تا ریشهی اصلی مشکلات را کشف کنید. لازم نیست که در پنجمین چرا متوقف شوید، اما به طور کلی برای کشف ریشهی یک مسئله کافی است.
پرسش سقراطی
شکلی از پرسیدن منظم است که تفکر انتقادی را امکان پذیر میکند. شش نوع سؤال وجود دارد که می توانید برای درک عمیقتر حقیقت اصلی مسئله بپرسید:
۱. شفاف سازی: منظورتان از فلان چیز چیست؟
۲. فرضیات احتمالی: به جای آن چه چیزی را میتوانیم فرض کنیم؟
۳. دلایل و شواهد احتمالی: چرا فکر میکنید که این درست است؟
۴. مفاهیم و پیامدها: چه تاثیری میتواند داشته باشد؟
۵. دیدگاههای مختلف: گزینهی جایگزین چیست؟
۶. زیر سؤال بردن سؤال اصلی: نکتهی این سؤال چه بود؟
در بالا به خلاصهای از این روش اشاره کردیم که نیازمند مطالعهی بیشتر به همراه مثال است. شما را به خواندن آن از طریق لینک زیر دعوت میکنم:
http://bit.ly/dxgn762
(زمان حدودی مطالعه مقاله: ۲۰ دقیقه)
نویسنده: حسین میرزاده
#مدل_ذهنی #تعریف_مسئله #روش_حل_مشکل #ریشه_یابی #پنج_چرا #پرسش_سقراطی
@Dexign فلسفه دیزاین
______
این ابزار قدرتمند حل مسئله را گاهی اوقات "استدلال از اصول اولیه" نیز مینامند. شناسایی ریشههای پایهای یک مسئله به شما این امکان را میدهد که راهحلهای ابتکاری ارائه دهید.
اصول اولیه، حقایقی است که دیگر نمیتواند به جزءهای کوچکتری شکسته شود. تفکر ریشهای این است که باید انقدر بِکَنید تا به پایههای یک مسئله برسید.
چگونه از این ابزار استفاده کنیم؟
با مسئله شروع میکنیم و این دو مرحله را انجام میدهیم:
۱. شکستن و تجزیهی مشکل به اساسی ترین حقایق موجود (اصول اولیه)
۲. ساختن راهحل از این اصول اولیه
به نظر ساده میرسد اما نیاز به تفکر متمرکز دارد تا واقعاً در مسئله عمیق شوید و اصول اولیهی آن را کشف کنید.
چند روش برای کمک به شما وجود دارد:
پنج چرا
این یک روش محبوب در تحقیقات کاربر است که در آن پژوهشگر با پرسیدن مکرر سؤالات "چرا" دار به عمق بیشتری از مسئله میپردازد. این روش به شما کمک میکند تا ریشهی اصلی مشکلات را کشف کنید. لازم نیست که در پنجمین چرا متوقف شوید، اما به طور کلی برای کشف ریشهی یک مسئله کافی است.
پرسش سقراطی
شکلی از پرسیدن منظم است که تفکر انتقادی را امکان پذیر میکند. شش نوع سؤال وجود دارد که می توانید برای درک عمیقتر حقیقت اصلی مسئله بپرسید:
۱. شفاف سازی: منظورتان از فلان چیز چیست؟
۲. فرضیات احتمالی: به جای آن چه چیزی را میتوانیم فرض کنیم؟
۳. دلایل و شواهد احتمالی: چرا فکر میکنید که این درست است؟
۴. مفاهیم و پیامدها: چه تاثیری میتواند داشته باشد؟
۵. دیدگاههای مختلف: گزینهی جایگزین چیست؟
۶. زیر سؤال بردن سؤال اصلی: نکتهی این سؤال چه بود؟
در بالا به خلاصهای از این روش اشاره کردیم که نیازمند مطالعهی بیشتر به همراه مثال است. شما را به خواندن آن از طریق لینک زیر دعوت میکنم:
http://bit.ly/dxgn762
(زمان حدودی مطالعه مقاله: ۲۰ دقیقه)
نویسنده: حسین میرزاده
#مدل_ذهنی #تعریف_مسئله #روش_حل_مشکل #ریشه_یابی #پنج_چرا #پرسش_سقراطی
@Dexign فلسفه دیزاین
______
Farnam Street
First Principles: The Building Blocks of True Knowledge - Farnam Street
First Principles tinking breaks down true understanding into building blocks we can reassemble. It turns out most of us don’t know as much as we think we do.
راهنمای دیزاین فیلد جستوجو برای وب
مطمئناً همهی ما فیلد جستوجو را در بیشتر وبسایتها به خصوص وبسایتهای محتوا محور دیدهایم. این فیلد میتواند مربوط به یک فروشگاه آنلاین باشد که کاربر به وسیله این فیلد میتواند به محصول مورد نظر خود برسد یا فیلد درون یک وبلاگ باشد که کاربر به وسیلهی آن سعی در پیدا کردن مطلب مورد نظرش دارد. اگر چه دیزاین این فیلد، خیلی ساده به نظر میرسد اما ممکن است بعضی طراحان در مورد آن اشتباهاتی را مرتکب شوند. در ادامه نکاتی بیان کردهایم که با توجه به آنها، فیلد جستوجوی عالیای دیزاین خواهیم کرد.
نیاز است تا فیلد جستوجو به راحتی توسط کاربر قابل تشخیص باشد. معمولا قراردادن آن در قسمت بالای سایت میتواند به این موضوع کمک بسزایی کند. در واقع کاری نکنید تا کاربر در جست وجوی فیلد جستوجو باشد. قرار دادن رنگ بکگراند متفاوت از صفحه نیز، به تمرکز کاربر برروی این قسمت کمک خواهد کرد.
حداکثر سادهگرایی، در دیزاین این فیلد به خرج دهید. نیازی به زرق و برق آنچنانی نیست، فقط روی کاربرد این قسمت تمرکز کنید. وجود آیکن ذرهبین نیز می تواند گویای کامل فیلد جستوجو باشد. فیلد جستوجوی گوگل بهترین مثال در این مورد است.
مواقعی که نتیجهای از جستوجوی کاربر حاصل نشد، نیاز است تا پیام مربوط به خطای ۴۰۴ "نتیجهای پیدا نشد" را نشان دهیم. یکی از مزایای این صفحه این است که کاربر را تشویق به جستوجوی دوباره در مورد چیزهای دیگر میکند.
استفاده از قابلیت Auto-Complete، باعث خواهد شد تا پیشنهاداتی برای کاربر نمایش داده شود و در نتیجه مرتبطترین نتایج برای او نمایش داده خواهد شد. اما نیاز است بیشترین وسواس راددر این قسمت به خرج دهید چرا که عملکرد ضعیف این قابلیت باعث گیجشدن کاربر و در نتیجه ترک سایت شما خواهد شد.
اگر سایت شما شامل انواع مختلفی از محتوا یا محصولات است، بهتر است در کنار فیلد جستوجو از گزینه دستهبندی موضوعی نیز استفاده شود تا نتایج منسجمتر و متمرکزتر نمایش داده شوند.
همیشه متن جستوجو را در قسمت نتایج جستوجو نشان دهید، چرا که کاربر با مشاهدهی آن سعی در بهبود جستوجوی خود خواهد کرد و در نتیجه سریعتر به هدف خود خواهد رسید.
استفاده از تاریخچه جستوجوهای کاربر این امکان را خواهد داد تا کاربر در مراجعهی بعدی به وبسایت شما از جستوجوهای قبلی خود آگاه شده و گرفتار دور باطل جستوجوهای تکراری نشود.
بهتر است تا نتایج جستوجو بهینه شده باشند، با این کار نتایج بهتر در ابتدای لیست قرار گرفته و در نتیجه تجربه کاربری بهتری به کاربر القا خواهد شد.
در نسخه کامل مقاله، میتوانید نمونههای پیادهشده خوب برای هریک از موارد بالا را مشاهده کنید.
http://bit.ly/dxgn763
(زمان حدودی مطالعه: ۵ دقیقه)
نویسنده: محمدرضا وفائی
#طراحی #فیلد #جستجو #تجربه_کاربری #نتایج #جستوجو
@Dexign فلسفه دیزاین
______
مطمئناً همهی ما فیلد جستوجو را در بیشتر وبسایتها به خصوص وبسایتهای محتوا محور دیدهایم. این فیلد میتواند مربوط به یک فروشگاه آنلاین باشد که کاربر به وسیله این فیلد میتواند به محصول مورد نظر خود برسد یا فیلد درون یک وبلاگ باشد که کاربر به وسیلهی آن سعی در پیدا کردن مطلب مورد نظرش دارد. اگر چه دیزاین این فیلد، خیلی ساده به نظر میرسد اما ممکن است بعضی طراحان در مورد آن اشتباهاتی را مرتکب شوند. در ادامه نکاتی بیان کردهایم که با توجه به آنها، فیلد جستوجوی عالیای دیزاین خواهیم کرد.
نیاز است تا فیلد جستوجو به راحتی توسط کاربر قابل تشخیص باشد. معمولا قراردادن آن در قسمت بالای سایت میتواند به این موضوع کمک بسزایی کند. در واقع کاری نکنید تا کاربر در جست وجوی فیلد جستوجو باشد. قرار دادن رنگ بکگراند متفاوت از صفحه نیز، به تمرکز کاربر برروی این قسمت کمک خواهد کرد.
حداکثر سادهگرایی، در دیزاین این فیلد به خرج دهید. نیازی به زرق و برق آنچنانی نیست، فقط روی کاربرد این قسمت تمرکز کنید. وجود آیکن ذرهبین نیز می تواند گویای کامل فیلد جستوجو باشد. فیلد جستوجوی گوگل بهترین مثال در این مورد است.
مواقعی که نتیجهای از جستوجوی کاربر حاصل نشد، نیاز است تا پیام مربوط به خطای ۴۰۴ "نتیجهای پیدا نشد" را نشان دهیم. یکی از مزایای این صفحه این است که کاربر را تشویق به جستوجوی دوباره در مورد چیزهای دیگر میکند.
استفاده از قابلیت Auto-Complete، باعث خواهد شد تا پیشنهاداتی برای کاربر نمایش داده شود و در نتیجه مرتبطترین نتایج برای او نمایش داده خواهد شد. اما نیاز است بیشترین وسواس راددر این قسمت به خرج دهید چرا که عملکرد ضعیف این قابلیت باعث گیجشدن کاربر و در نتیجه ترک سایت شما خواهد شد.
اگر سایت شما شامل انواع مختلفی از محتوا یا محصولات است، بهتر است در کنار فیلد جستوجو از گزینه دستهبندی موضوعی نیز استفاده شود تا نتایج منسجمتر و متمرکزتر نمایش داده شوند.
همیشه متن جستوجو را در قسمت نتایج جستوجو نشان دهید، چرا که کاربر با مشاهدهی آن سعی در بهبود جستوجوی خود خواهد کرد و در نتیجه سریعتر به هدف خود خواهد رسید.
استفاده از تاریخچه جستوجوهای کاربر این امکان را خواهد داد تا کاربر در مراجعهی بعدی به وبسایت شما از جستوجوهای قبلی خود آگاه شده و گرفتار دور باطل جستوجوهای تکراری نشود.
بهتر است تا نتایج جستوجو بهینه شده باشند، با این کار نتایج بهتر در ابتدای لیست قرار گرفته و در نتیجه تجربه کاربری بهتری به کاربر القا خواهد شد.
در نسخه کامل مقاله، میتوانید نمونههای پیادهشده خوب برای هریک از موارد بالا را مشاهده کنید.
http://bit.ly/dxgn763
(زمان حدودی مطالعه: ۵ دقیقه)
نویسنده: محمدرضا وفائی
#طراحی #فیلد #جستجو #تجربه_کاربری #نتایج #جستوجو
@Dexign فلسفه دیزاین
______
Medium
Tips for Designing The Perfect Search Box
If you want to buy a product online.. then there is a very high chance that you’ll go to the shopping site and then type your product name…
قدرت مسکاتها در برندینگ و دیزاین
در ابتدای مطلب اجازه دهید کمی در مورد واژه «مسکات» یا همان Mascot توضیح دهیم که در ظاهر شاید واژهای عجیب و کمتر شنیده شده باشد اما مفهومی آشنا و دوستداشتنی دارد. خیلی تلاش کردیم تا معادلی فارسی برای این واژه پیدا کنیم اما چیزی نیافتیم که هم این مفهوم را کامل منتقل کند و هم ساده و مختصر باشد. اگر با یک مثال بخواهیم این واژه را تعریف کنیم شاید «میمون چیتوز» آشناترین و بهترین مثال باشد. مسکات همان شخصیتی است که نماینده و معرفیکننده یک برند یا یک طراحی دیجیتال است.
یکی از دغدغههای اصلی هنگام ساخت یک محصول یا طراحی یک پیام خاص برای مردم، تلاش برای ایجاد طرحی انسانمحورتر است. یکی از راههای موثر برای نیل به این هدف و ایجاد ارتباطی موثر بین مخاطبین و محصول، استفاده از یک مسکات خوب است.
اگر بخواهیم تعریفی دقیقتر از این مفهوم داشته باشیم، میتوانیم بگوییم مسکات در طراحی و مارکتینگ، یک کاراکتر یا تصویر شخصیتپردازی شده است که نماد سمبلیک یک برند، کمپانی یا حتی یک شخصیت معروف است.این واژه برگرفته از واژه فرانسوی «Mascotte» به معنی طلسم خوششانسی است و به نمادهایی از انسانها و حیوانات اشاره دارد که سالیان سال توسط انسانها به عنوان نماد خوششانسی مورد استفاده قرار میگرفتند و همین محبوبیت و مقبولیت آنها باعث شده به عنوان یک المان طراحی برای بهبود تجربه کاربری وارد دنیای محصولات دیجیتال نیز شوند.
اگر علاقهمند هستید که اطلاعات بیشتری در زمینه مزایای استفاده از مسکاتها در طراحی و برندیگ به دست بیاورید و با نمونههایی موفق از این امر آشنا شوید، پیشنهاد میکنیم مقاله زیر از استودیوی معروف و خوشنام Tubik را مطالعه کنید:
http://bit.ly/dxgn764
همچنین اگر معادل فارسی مناسبی برای این واژه سراغ دارید، آن را با ما هم در میان بگذارید.
(زمان حدودی مطالعه: ۱۲ دقیقه)
نویسنده: محمدرضا پناهی
#دیزاین #برندینگ #مارکتینگ #مسکات
@Dexign فلسفه دیزاین
______
در ابتدای مطلب اجازه دهید کمی در مورد واژه «مسکات» یا همان Mascot توضیح دهیم که در ظاهر شاید واژهای عجیب و کمتر شنیده شده باشد اما مفهومی آشنا و دوستداشتنی دارد. خیلی تلاش کردیم تا معادلی فارسی برای این واژه پیدا کنیم اما چیزی نیافتیم که هم این مفهوم را کامل منتقل کند و هم ساده و مختصر باشد. اگر با یک مثال بخواهیم این واژه را تعریف کنیم شاید «میمون چیتوز» آشناترین و بهترین مثال باشد. مسکات همان شخصیتی است که نماینده و معرفیکننده یک برند یا یک طراحی دیجیتال است.
یکی از دغدغههای اصلی هنگام ساخت یک محصول یا طراحی یک پیام خاص برای مردم، تلاش برای ایجاد طرحی انسانمحورتر است. یکی از راههای موثر برای نیل به این هدف و ایجاد ارتباطی موثر بین مخاطبین و محصول، استفاده از یک مسکات خوب است.
اگر بخواهیم تعریفی دقیقتر از این مفهوم داشته باشیم، میتوانیم بگوییم مسکات در طراحی و مارکتینگ، یک کاراکتر یا تصویر شخصیتپردازی شده است که نماد سمبلیک یک برند، کمپانی یا حتی یک شخصیت معروف است.این واژه برگرفته از واژه فرانسوی «Mascotte» به معنی طلسم خوششانسی است و به نمادهایی از انسانها و حیوانات اشاره دارد که سالیان سال توسط انسانها به عنوان نماد خوششانسی مورد استفاده قرار میگرفتند و همین محبوبیت و مقبولیت آنها باعث شده به عنوان یک المان طراحی برای بهبود تجربه کاربری وارد دنیای محصولات دیجیتال نیز شوند.
اگر علاقهمند هستید که اطلاعات بیشتری در زمینه مزایای استفاده از مسکاتها در طراحی و برندیگ به دست بیاورید و با نمونههایی موفق از این امر آشنا شوید، پیشنهاد میکنیم مقاله زیر از استودیوی معروف و خوشنام Tubik را مطالعه کنید:
http://bit.ly/dxgn764
همچنین اگر معادل فارسی مناسبی برای این واژه سراغ دارید، آن را با ما هم در میان بگذارید.
(زمان حدودی مطالعه: ۱۲ دقیقه)
نویسنده: محمدرضا پناهی
#دیزاین #برندینگ #مارکتینگ #مسکات
@Dexign فلسفه دیزاین
______
Medium
The Power of Mascots in Branding and UI Design
Creating a product or designing a particular message for people, we strive to make it as human-centered as possible. One of the ways to…
در باب اهمیت باکس جستجو
تصور کنید که در یک سایت شلوغ به دنبال محصول خاصی میگردید، اولین کاری که انجام میدهید چیست؟ بله جستجو! اولین راهنمای ما برای پیدا کردن بخش جستجو آیکن آشنای ذره بین کوچکی است که معمولا در بالای صفحه دیده میشود. اما اگر این آیکن کوچک و باکس مربوط به جستجو را در جای همیشگی خود نیابیم چه حسی به ما دست میدهد؟ ممکن است ناراحت شویم، صفحه را ببندیم و از محتوای سایت مشابه دیگری استفاده کنیم.
در این لحظه ما یک کاربر ناراضی هستیم که سایت را با تجربهای بد ترک میکند. اما اتفاقی که واقعا افتاده این نیست که چنین بخشی فراموش شده بلکه طراح، باکس جستجو را با سبکی خاص طراحی کرده و یا در جایی متفاوت قرار داده است.
باکس جستجو «search box» یکی از بخشهای جدای نشدنی بسیاری از وبسایتها و اپلیکیشنهاست. این بخش که از قسمت ورودی و دکمه ارسال تشکیل شده است گاهی چنان ساده بهنظر میرسد که ممکن است تصور کنیم که فقط ترکیبی از دو عنصر ساده است و اصلا نیازی به طراحی ندارد!
اما این درست نیست، کاربران وقتی با سایتهای نسبتا پیچیده مواجه میشوند اول از همه دنبال باکس جستجو میگردند زیرا فکر میکنند که این گزینه میانبری است که آنها را به سرعت به مقصد نهایی میرساند. پس جستجو بخش جدایی ناپذیر از اکثر برنامهها یا سایتهای پرمحتواست. اهمیت زیادی برای کاربران دارد و تنها عنصر طراحی است که بیشتر از بقیه از آن استفاده میشود. تا جایی که تجربه خوب جستجو در آنها به معنای UX کلی خوب است.
اهمیت طراحی باکس جستجو تا حدی است که حتی تغییرات جزئی مانند اندازه مناسب قسمت ورودی میتواند قابلیت جستجو را به میزان قابل توجهی افزایش دهد و در تجربهکاربری تاثیر مثبتی بگذارد.
در این مقاله خواهیم دید که چگونه می توان این عنصر را بهبود بخشید تا در وقت کاربر برای رفتن به مکانی که می خواهد صرفه جویی شود.
http://bit.ly/dxgn765
(زمان حدودی مطالعه: ۷ دقیقه)
نویسنده: فیروزه ایمانی
#تجربه_کاربری #باکس_جستجو #جستجو
@Dexign فلسفه دیزاین
______
تصور کنید که در یک سایت شلوغ به دنبال محصول خاصی میگردید، اولین کاری که انجام میدهید چیست؟ بله جستجو! اولین راهنمای ما برای پیدا کردن بخش جستجو آیکن آشنای ذره بین کوچکی است که معمولا در بالای صفحه دیده میشود. اما اگر این آیکن کوچک و باکس مربوط به جستجو را در جای همیشگی خود نیابیم چه حسی به ما دست میدهد؟ ممکن است ناراحت شویم، صفحه را ببندیم و از محتوای سایت مشابه دیگری استفاده کنیم.
در این لحظه ما یک کاربر ناراضی هستیم که سایت را با تجربهای بد ترک میکند. اما اتفاقی که واقعا افتاده این نیست که چنین بخشی فراموش شده بلکه طراح، باکس جستجو را با سبکی خاص طراحی کرده و یا در جایی متفاوت قرار داده است.
باکس جستجو «search box» یکی از بخشهای جدای نشدنی بسیاری از وبسایتها و اپلیکیشنهاست. این بخش که از قسمت ورودی و دکمه ارسال تشکیل شده است گاهی چنان ساده بهنظر میرسد که ممکن است تصور کنیم که فقط ترکیبی از دو عنصر ساده است و اصلا نیازی به طراحی ندارد!
اما این درست نیست، کاربران وقتی با سایتهای نسبتا پیچیده مواجه میشوند اول از همه دنبال باکس جستجو میگردند زیرا فکر میکنند که این گزینه میانبری است که آنها را به سرعت به مقصد نهایی میرساند. پس جستجو بخش جدایی ناپذیر از اکثر برنامهها یا سایتهای پرمحتواست. اهمیت زیادی برای کاربران دارد و تنها عنصر طراحی است که بیشتر از بقیه از آن استفاده میشود. تا جایی که تجربه خوب جستجو در آنها به معنای UX کلی خوب است.
اهمیت طراحی باکس جستجو تا حدی است که حتی تغییرات جزئی مانند اندازه مناسب قسمت ورودی میتواند قابلیت جستجو را به میزان قابل توجهی افزایش دهد و در تجربهکاربری تاثیر مثبتی بگذارد.
در این مقاله خواهیم دید که چگونه می توان این عنصر را بهبود بخشید تا در وقت کاربر برای رفتن به مکانی که می خواهد صرفه جویی شود.
http://bit.ly/dxgn765
(زمان حدودی مطالعه: ۷ دقیقه)
نویسنده: فیروزه ایمانی
#تجربه_کاربری #باکس_جستجو #جستجو
@Dexign فلسفه دیزاین
______
Medium
Design a Perfect Search Box
by Nick Babich
مدل تفکر سازنده
با استفاده از تفکر ساختاریافته و انتقادیتر، میتوانید مسئله موجود را بهتر درک کرده و راهحلهای خلاقانهتری برای حل آن ارائه دهید. مدل تفکر مولد، ساختهشده توسط تیم هرسون، میتواند به ما در انجام این کار کمک کند.
نحوه استفاده از آن
این ابزار یک چارچوب ۶ مرحلهای برای حل مسئله به شما میدهد. شش مرحله عبارتند از:
۱. بپرسید «چه خبره؟»
۲. بپرسید «موفقیت چیست؟»
۳. بپرسید «سؤال چیه؟»
۴. پاسخ پرسشها را بدهید.
۵. راهحل را بسازید.
۶. منابع را تراز کنید.
بیایید هر مرحله را با جزئیات بیشتری بررسی کنیم.
۱. بپرسید «چه خبره؟»
اولین قدم در مورد درک بهتر مسئله است. میتوانید از این سؤالات راهنما برای کمک به خود استفاده کنید:
- مشکل دقیقاً چیست؟
- تأثیر این مشکل چیست؟
- من از قبل چه میدانم؟ چه اطلاعاتی دارم؟
- چه کسی در این ماجرا دخیل است؟
- با حل این مشکل چشم انداز آینده چیست؟ (این همان چیزی است که هرسون آن را "آینده هدف" مینامد)
پاسخهایی را که در اینجا جمع میکنید مستند کنید زیرا در مراحل بعدی به آنها نیاز خواهید داشت.
۲. بپرسید «موفقیت چیست؟»
این مرحله به شما کمک میکند تا در چشمانداز آینده (که در مرحله قبل ایجاد کردهاید) موفقیت را مشخص کنید.
برای رسیدن به معیارهای موفقیت، میتوانید از فریمورک DRIVE استفاده کنید:
- میخواهید که راهحل شما چه کار بکند؟
- محدودیتها چیست؟ چه کاری نباید انجام شود؟
- چه منابعی را میتوانیم در این امر سرمایهگذاری کنیم؟
- راه حل باید چه ارزشهایی داشته باشد؟
- نتایج اصلی و ضروری چیست؟
تا زمانی که چشمانداز روشنی از موفقیت در پیش روی خود به دست نیاوردهاید، این سؤالات را مدام از خود بپرسید.
۳. بپرسید «سؤال چیه؟»
اکنون زمان تولید سؤالاتی است که برای دستیابی به چشمانداز شما (آینده هدف)، باید پاسخ داده شود. هرسون اینها را «سؤالات کاتالیزوری» مینامد.
از اطلاعاتی که در مراحل قبلی جمعآوری کردهاید استفاده کنید. عباراتی مانند «چگونه ممکن است ما ...؟» یا «چگونه میتوانم ...؟» به شما در فرمولبندی سؤالات کمک میکند.
۴. پاسخ پرسشها را بدهید.
در این مرحله سعی کنید تا آنجا که میتوانید به سؤالات کاتالیزوری پاسخ دهید. طوفان فکری راه بیاندازید، قضاوت نکنید و ایده جمع کنید. اینها راهحلهای بالقوه شما هستند.
در مرحله بعدی، لیست ایدههای خود را به امیدوارکنندهترین آنها خلاصه کنید.
۵. راهحل را بسازید.
باید بهترین راهحل را قبل از توسعه انتخاب کنید. لیست خود را از مرحله قبل بردارید و هر ایده/راهحل را با توجه به معیارهای موفقیت از مرحله ۲ ارزیابی کنید. میتوانید از ماتریس تصمیمگیری (بعدا مفصلا در مورد این موضوع توضیح خواهیم داد) برای سهولت در این مرحله استفاده کنید.
اکنون میتوانید به فکر ساخت راهحل(های) انتخابی خود باشید. چه چیزی میتواند آن را بهتر کند؟ چگونه میتوانید آن را با معیارهای موفقیت بیشتر متناسب کنید؟
۶. منابع را تراز کنید.
در آخرین مرحله، به سمت اجرای راهحل حرکت میکنید.
اقدامات و منابع لازم برای تحقق این امر را بنویسید. افرادی که مسئول آن هستند را شناسایی کنید - به طور کلی و همچنین هر بخش از راهحل.
بهتر است همه اینها را با جزئیات مشخص کنید تا برنامه عملیاتی مشخص داشته باشید. اکنون باید بتوانید راهحل را اجرا کنید.
مقالهی بالا در واقع خلاصهی مختصر و مفیدی از روش حل مسئلهی Tim Hurson بود، برای جا افتادن بیشتر مسئله میتوانید به کتاب او مراجعه کنید. همچنین میتوانید خلاصهی کتاب و ویدئو او را در TEDx از طریق لینکهای زیر پیدا کنید. امیدوارم که این تکنیک در مسائل پیش روی شما کمککننده باشد.
کتاب Think Better:
http://bit.ly/dxgn766-Book
خلاصهی کتاب و توضیحات این روش:
http://bit.ly/dxgn766-Summary
ویدئو او در TEDxMaastricht با عنوان The shock of the possible:
http://bit.ly/dxgn766-Video
(زمان حدودی مطالعه خلاصهی کتاب: ۱۳ دقیقه
زمان ویدئو: ۱۸:۱۱)
نویسنده: حسین میرزاده
#مدل_ذهنی #تعریف_مسئله #روش_حل_مشکل #مدل_تفکر_سازنده #تیم_هرسون #پرسش
@Dexign فلسفه دیزاین
______
با استفاده از تفکر ساختاریافته و انتقادیتر، میتوانید مسئله موجود را بهتر درک کرده و راهحلهای خلاقانهتری برای حل آن ارائه دهید. مدل تفکر مولد، ساختهشده توسط تیم هرسون، میتواند به ما در انجام این کار کمک کند.
نحوه استفاده از آن
این ابزار یک چارچوب ۶ مرحلهای برای حل مسئله به شما میدهد. شش مرحله عبارتند از:
۱. بپرسید «چه خبره؟»
۲. بپرسید «موفقیت چیست؟»
۳. بپرسید «سؤال چیه؟»
۴. پاسخ پرسشها را بدهید.
۵. راهحل را بسازید.
۶. منابع را تراز کنید.
بیایید هر مرحله را با جزئیات بیشتری بررسی کنیم.
۱. بپرسید «چه خبره؟»
اولین قدم در مورد درک بهتر مسئله است. میتوانید از این سؤالات راهنما برای کمک به خود استفاده کنید:
- مشکل دقیقاً چیست؟
- تأثیر این مشکل چیست؟
- من از قبل چه میدانم؟ چه اطلاعاتی دارم؟
- چه کسی در این ماجرا دخیل است؟
- با حل این مشکل چشم انداز آینده چیست؟ (این همان چیزی است که هرسون آن را "آینده هدف" مینامد)
پاسخهایی را که در اینجا جمع میکنید مستند کنید زیرا در مراحل بعدی به آنها نیاز خواهید داشت.
۲. بپرسید «موفقیت چیست؟»
این مرحله به شما کمک میکند تا در چشمانداز آینده (که در مرحله قبل ایجاد کردهاید) موفقیت را مشخص کنید.
برای رسیدن به معیارهای موفقیت، میتوانید از فریمورک DRIVE استفاده کنید:
- میخواهید که راهحل شما چه کار بکند؟
- محدودیتها چیست؟ چه کاری نباید انجام شود؟
- چه منابعی را میتوانیم در این امر سرمایهگذاری کنیم؟
- راه حل باید چه ارزشهایی داشته باشد؟
- نتایج اصلی و ضروری چیست؟
تا زمانی که چشمانداز روشنی از موفقیت در پیش روی خود به دست نیاوردهاید، این سؤالات را مدام از خود بپرسید.
۳. بپرسید «سؤال چیه؟»
اکنون زمان تولید سؤالاتی است که برای دستیابی به چشمانداز شما (آینده هدف)، باید پاسخ داده شود. هرسون اینها را «سؤالات کاتالیزوری» مینامد.
از اطلاعاتی که در مراحل قبلی جمعآوری کردهاید استفاده کنید. عباراتی مانند «چگونه ممکن است ما ...؟» یا «چگونه میتوانم ...؟» به شما در فرمولبندی سؤالات کمک میکند.
۴. پاسخ پرسشها را بدهید.
در این مرحله سعی کنید تا آنجا که میتوانید به سؤالات کاتالیزوری پاسخ دهید. طوفان فکری راه بیاندازید، قضاوت نکنید و ایده جمع کنید. اینها راهحلهای بالقوه شما هستند.
در مرحله بعدی، لیست ایدههای خود را به امیدوارکنندهترین آنها خلاصه کنید.
۵. راهحل را بسازید.
باید بهترین راهحل را قبل از توسعه انتخاب کنید. لیست خود را از مرحله قبل بردارید و هر ایده/راهحل را با توجه به معیارهای موفقیت از مرحله ۲ ارزیابی کنید. میتوانید از ماتریس تصمیمگیری (بعدا مفصلا در مورد این موضوع توضیح خواهیم داد) برای سهولت در این مرحله استفاده کنید.
اکنون میتوانید به فکر ساخت راهحل(های) انتخابی خود باشید. چه چیزی میتواند آن را بهتر کند؟ چگونه میتوانید آن را با معیارهای موفقیت بیشتر متناسب کنید؟
۶. منابع را تراز کنید.
در آخرین مرحله، به سمت اجرای راهحل حرکت میکنید.
اقدامات و منابع لازم برای تحقق این امر را بنویسید. افرادی که مسئول آن هستند را شناسایی کنید - به طور کلی و همچنین هر بخش از راهحل.
بهتر است همه اینها را با جزئیات مشخص کنید تا برنامه عملیاتی مشخص داشته باشید. اکنون باید بتوانید راهحل را اجرا کنید.
مقالهی بالا در واقع خلاصهی مختصر و مفیدی از روش حل مسئلهی Tim Hurson بود، برای جا افتادن بیشتر مسئله میتوانید به کتاب او مراجعه کنید. همچنین میتوانید خلاصهی کتاب و ویدئو او را در TEDx از طریق لینکهای زیر پیدا کنید. امیدوارم که این تکنیک در مسائل پیش روی شما کمککننده باشد.
کتاب Think Better:
http://bit.ly/dxgn766-Book
خلاصهی کتاب و توضیحات این روش:
http://bit.ly/dxgn766-Summary
ویدئو او در TEDxMaastricht با عنوان The shock of the possible:
http://bit.ly/dxgn766-Video
(زمان حدودی مطالعه خلاصهی کتاب: ۱۳ دقیقه
زمان ویدئو: ۱۸:۱۱)
نویسنده: حسین میرزاده
#مدل_ذهنی #تعریف_مسئله #روش_حل_مشکل #مدل_تفکر_سازنده #تیم_هرسون #پرسش
@Dexign فلسفه دیزاین
______
Goodreads
Discover and share books you love on Goodreads.
👍1
ترجمه بصری جدولها در فضای گوشیهای همراه
متناسب بودن با تمام اندازه صفحههای موجود یکی از بایدهای طراحی رابط کاربری در دنیای امروز محسوب میشود و تلاش برای دستیابی به این مهم چالشهای پیچیده و تازهای را برای طراحان به وجود آورده است. این چالشها بهخصوص در مواجه شدن با محیطهای محتوایی بزرگ و پر از اطلاعات متنوع خود را نشان میدهند.
جدولهای اطلاعاتی بدون شک یکی از این محیطهای محتوایی چالش برانگیز است؛ آنها اطلاعات زیادی را در خود جای میدهند که در دو جهت عمودی و افقی مرتب شدهاند و میبایست بدون از دست رفتن این نظم برای فضای کوچک صفحههای گوشی همراه بهینه شوند.
با این حال تنها چالشی که در این کار وجود دارد بزرگی فضای محتوایی و زیادی اطلاعات نیست؛ جداول اطلاعاتی کاربردهای مخصوص به خود را دارند که اگر قربانی این فضای کوچک شوند هویت خود به عنوان یک جدول را از دست میدهند.
در مطالعه یک جدول کاربر باید به روشنی ارتباط میان دادههای مختلف را دیده و دادههای مرتبط را پیدا کند، همچنین در کنار آن باید بتواند بین ستونها و ردیفهای مختلف مقایسه انجام داده و تفاوتها را تشخیص دهد.
برای بهینهسازی نمایش یک جدول در فضای گوشی همراه باید کاربردهای آن، نوع محتوا و چگونگی تعامل کاربر با آن را بشناسیم. در این مقاله میتوانید ۵ راه حل بصری برای جا دادن یک جدول اطلاعاتی در گوشی همراه را بخوانید، زمینه استفادهی هر کدام را بشناسید و نقاط مثبت و منفی آنها را پیدا کنید.
http://bit.ly/dxgn767
(زمان حدودی مطالعه: ۴ دقیقه)
نویسنده: ریحانه خدایی
#طراحی #رابط_کاربری #گوشی_همراه #جدول #اطلاعات
@Dexign فلسفه دیزاین
______
متناسب بودن با تمام اندازه صفحههای موجود یکی از بایدهای طراحی رابط کاربری در دنیای امروز محسوب میشود و تلاش برای دستیابی به این مهم چالشهای پیچیده و تازهای را برای طراحان به وجود آورده است. این چالشها بهخصوص در مواجه شدن با محیطهای محتوایی بزرگ و پر از اطلاعات متنوع خود را نشان میدهند.
جدولهای اطلاعاتی بدون شک یکی از این محیطهای محتوایی چالش برانگیز است؛ آنها اطلاعات زیادی را در خود جای میدهند که در دو جهت عمودی و افقی مرتب شدهاند و میبایست بدون از دست رفتن این نظم برای فضای کوچک صفحههای گوشی همراه بهینه شوند.
با این حال تنها چالشی که در این کار وجود دارد بزرگی فضای محتوایی و زیادی اطلاعات نیست؛ جداول اطلاعاتی کاربردهای مخصوص به خود را دارند که اگر قربانی این فضای کوچک شوند هویت خود به عنوان یک جدول را از دست میدهند.
در مطالعه یک جدول کاربر باید به روشنی ارتباط میان دادههای مختلف را دیده و دادههای مرتبط را پیدا کند، همچنین در کنار آن باید بتواند بین ستونها و ردیفهای مختلف مقایسه انجام داده و تفاوتها را تشخیص دهد.
برای بهینهسازی نمایش یک جدول در فضای گوشی همراه باید کاربردهای آن، نوع محتوا و چگونگی تعامل کاربر با آن را بشناسیم. در این مقاله میتوانید ۵ راه حل بصری برای جا دادن یک جدول اطلاعاتی در گوشی همراه را بخوانید، زمینه استفادهی هر کدام را بشناسید و نقاط مثبت و منفی آنها را پیدا کنید.
http://bit.ly/dxgn767
(زمان حدودی مطالعه: ۴ دقیقه)
نویسنده: ریحانه خدایی
#طراحی #رابط_کاربری #گوشی_همراه #جدول #اطلاعات
@Dexign فلسفه دیزاین
______
Medium
5 Practical Solutions to Make Responsive Data Tables
I work as Senior UI & UX Designer for App’n’roll — a Warsaw based venture building company.
تایپوگرافی درست، همراهِ موثر تجربه کاربری
همهی ما میدانیم تجربه کاربری به وجود آمده تا، به هدف رسیدن را برای کاربران ساده و سادهتر کند.
هرچقدر که علم پیشرفت میکند، ساختار تجاری محصولات دیجیتالی نیز پیشرفت میکند و از آنجا که ساختار تجاری هر مجموعهای، همگام با ساختارهای تجربه کاربری، به دنبال به هدف رساندن خود و کاربران است، به ناچار ساختارهای تجاری به همراه ساختارهای تجربه کاربری پیشرفت میکنند.
زمانی که بحث از پیشرفت ساختارهای تجربه کاربری به میان بیاید، فونت یکی از پایههای دیزاین سیستم و در مجموع تجربه کاربری است.
در مقاله امروز به اهمیت دقت در جزئیات فونتها برای سرویسهای دیجیتالی میپردازیم.
فونتها در سیستمهای دیزاین مختلف، درواقع یکی از زبانهای سخن گفتن شما با کاربران است. به همان شکل که یک سخنران انگیزشی میتواند با چند کلمه روحیه شما را بالا نگهدارد، یک پاراگراف متن خوب و یک تیتر مناسب هم میتواند باعث تشویق کاربران احتمالی شما به استفاده از سرویستان شود.
در مقالهی که امروز به شما معرفی میکنم، Nick Babich به بررسی میزان اهمیت فونتها و در کل تایپوگرافی در محصولات دیجیتالی میپردازد و به صورت نکته به نکته مزایای رعایت قوانین نوشته و نانوشته تایپوگرافی دیجیتالی را واکاوی میکند.
http://bit.ly/dxgn768
(زمان حدودی مطالعه: ۱۲ دقیقه)
نویسنده: آرش اصغری
#رابط_کاربری #تجربه_کاربری
@Dexign فلسفه دیزاین
______
همهی ما میدانیم تجربه کاربری به وجود آمده تا، به هدف رسیدن را برای کاربران ساده و سادهتر کند.
هرچقدر که علم پیشرفت میکند، ساختار تجاری محصولات دیجیتالی نیز پیشرفت میکند و از آنجا که ساختار تجاری هر مجموعهای، همگام با ساختارهای تجربه کاربری، به دنبال به هدف رساندن خود و کاربران است، به ناچار ساختارهای تجاری به همراه ساختارهای تجربه کاربری پیشرفت میکنند.
زمانی که بحث از پیشرفت ساختارهای تجربه کاربری به میان بیاید، فونت یکی از پایههای دیزاین سیستم و در مجموع تجربه کاربری است.
در مقاله امروز به اهمیت دقت در جزئیات فونتها برای سرویسهای دیجیتالی میپردازیم.
فونتها در سیستمهای دیزاین مختلف، درواقع یکی از زبانهای سخن گفتن شما با کاربران است. به همان شکل که یک سخنران انگیزشی میتواند با چند کلمه روحیه شما را بالا نگهدارد، یک پاراگراف متن خوب و یک تیتر مناسب هم میتواند باعث تشویق کاربران احتمالی شما به استفاده از سرویستان شود.
در مقالهی که امروز به شما معرفی میکنم، Nick Babich به بررسی میزان اهمیت فونتها و در کل تایپوگرافی در محصولات دیجیتالی میپردازد و به صورت نکته به نکته مزایای رعایت قوانین نوشته و نانوشته تایپوگرافی دیجیتالی را واکاوی میکند.
http://bit.ly/dxgn768
(زمان حدودی مطالعه: ۱۲ دقیقه)
نویسنده: آرش اصغری
#رابط_کاربری #تجربه_کاربری
@Dexign فلسفه دیزاین
______
Medium
Getting Typography Right in Digital Design
Typography can make or break a product. Here’s how to excel at it
اولویتبندی کارها با ماتریس آیزنهاور
این فریموُرک اولویتبندی که به نام ۳۴مین رئیسجمهور ایالات متحده آمریکا Dwight D. Eisenhower نامگذاری شده است، به شما کمک میکند تا وظایف و فعالیت های خود را با توجه به اهمیت و ضرورت آنها سازماندهی کنید. این به ویژه هنگامی مفید است که سرتان بسیار شلوغ است، اما احساس نمیکنید کاری که انجام میدهید تأثیر زیادی دارد.
نحوه استفاده از آن
ماتریس آیزنهاور دارای چهار ربع در دو محور اهمیت و ضرورت است.
برای هر فعالیت یا کاری از خود بپرسید: آیا این مهم است یا نه؟ آیا ضروری است یا خیر؟
بر اساس پاسخ، فعالیت یا کار را در گوشهی(ربع) مناسب نمودار قرار دهید. ربع نمودار تعیین میکند که تکلیف شما با این کار چیست:
۱. اگر مهم و ضرویست ← آن را انجام دهید
۰ اینها کارهایی هستند که شما میخواهید آنها را در اسرع وقت انجام دهید.
۰ بحرانها، مشکلاتی که در حال حاضر به شما فشار میآورند و سایر مواردی که اگر اکنون به آن رسیدگی نکنید، عواقب بدی خواهند داشت.
۲. اگر مهم است و ضروری نیست ← آن را برنامهریزی کنید
۰ زمانی را برای این کارها پیدا کنید و آنها را بعداً انجام دهید.
۰ این ربع نمودار معمولاً محلی است که در آن کارهای عمیق اتفاق میافتد - وظایفی که به پروژهها یا اهداف بلند مدت شما کمک میکنند.
۳. اگر ضروری است ولی مهم نیست ← آن را محول کنید (به دیگری واگذار کنید)
۰ اگر میتوانید، شخصی را پیدا کنید که بتواند این کارها را برای شما انجام دهد.
۰ اگر نمیتوانید آن را به شخص دیگری محول کنید، آن را برنامهریزی کنید اما همیشه سعی کنید کارهای مهم و غیرضروری را اول انجام دهید.
۰ اینها اغلب کارهای اداری یا مواردی هستند که مهلت دارند، اما حیاتی نیستند.
۴. اگر ضروری و مهم نیست ← آن را انجام ندهید (قیدش را بزنید)
۰ این کارها ارزش وقت شما را ندارند و به هیچ وجه نباید آنها را انجام دهید.
۰ فعالیتهایی که میتوانید آنها را نادیده بگیرید، کارهای بیهوده شلوغ روزانه و سرگرمیهای شما در این ربع نمودار قرار میگیرد.
در بالا ترتیب اولویت وظایف را فهمیدید. بله وظایف مهم و غیرضروری قبل از بیاهمیت و ضروری قرار میگیرند.
ماتریس آیزنهاور بسیار انعطافپذیر است، بنابراین به خود شما مربوط است که از آن برای کارهای حرفهای، شخصی یا هر دو استفاده کنید.
همچنین می توانید با آن در بازههای زمانی مختلف کار کنید: روز خود را با آن برنامهریزی کنید و در مقابل نیز فعالیتهای کلی زندگی خود را اولویتبندی کنید.
چگونه کارهای ضروری را از کارهای مهم تشخیص دهیم.
کارهای ضروری و فوری معمولاً مهلت مشخصی دارند (به عنوان مثال ارسال طرح برای مشتری) یا از شما میخواهند به موقع عکسالعمل نشان دهید (مانند ایمیلها)
کارهای مهم معمولاً با اهداف بلند مدت شما مطابقت دارند (مثلِ ورزش) و پروژههای شما را رو به جلو سوق میدهند (مانند نوشتن کد برای پروژه جانبی).
تعیین ضرورت و اهمیت همیشه به زمینه و توانایی شما در تشخیص آنچه که واقعاً فوری و واقعاً مهم است بستگی دارد.
وعدهی ماتریس آیزنهاور این است که با تعیین اولویتهای صحیح و عمل به آنها، بهرهوری بیشتری داشته باشید. اگر همیشه مشغول هستید اما از پروژهها و اهداف بلند مدت خود عقب هستید، این ابزار قطعاً برای شما مناسب است. همچنین این یک ابزار بسیار مفید است برای اینکه تصمیم بگیرید چه کاری را انجام دهید و چه چیزی را باید از زندگی خود حذف کنید.
مطلب بالا خلاصهی مختصر و مفیدی بود از دو مقالهی زیر، پیشنهاد میکنم که نگاهی به هردو مقاله بیاندازید و از مثالها و توضیحات بیشتر برای جا افتادن این ابزار مفید استفاده کنید:
http://bit.ly/dxgn769-1
http://bit.ly/dxgn769-2
(زمان حدودی مطالعهی مقالهی اول: ۵ دقیقه
و مقالهی دوم: ۱۵ دقیقه)
نویسنده: حسین میرزاده
#ماتریس_آیزنهاور #مدیریت_کارها #اولویت_بندی_کارها #مهم #ضروری
@Dexign فلسفه دیزاین
______
این فریموُرک اولویتبندی که به نام ۳۴مین رئیسجمهور ایالات متحده آمریکا Dwight D. Eisenhower نامگذاری شده است، به شما کمک میکند تا وظایف و فعالیت های خود را با توجه به اهمیت و ضرورت آنها سازماندهی کنید. این به ویژه هنگامی مفید است که سرتان بسیار شلوغ است، اما احساس نمیکنید کاری که انجام میدهید تأثیر زیادی دارد.
نحوه استفاده از آن
ماتریس آیزنهاور دارای چهار ربع در دو محور اهمیت و ضرورت است.
برای هر فعالیت یا کاری از خود بپرسید: آیا این مهم است یا نه؟ آیا ضروری است یا خیر؟
بر اساس پاسخ، فعالیت یا کار را در گوشهی(ربع) مناسب نمودار قرار دهید. ربع نمودار تعیین میکند که تکلیف شما با این کار چیست:
۱. اگر مهم و ضرویست ← آن را انجام دهید
۰ اینها کارهایی هستند که شما میخواهید آنها را در اسرع وقت انجام دهید.
۰ بحرانها، مشکلاتی که در حال حاضر به شما فشار میآورند و سایر مواردی که اگر اکنون به آن رسیدگی نکنید، عواقب بدی خواهند داشت.
۲. اگر مهم است و ضروری نیست ← آن را برنامهریزی کنید
۰ زمانی را برای این کارها پیدا کنید و آنها را بعداً انجام دهید.
۰ این ربع نمودار معمولاً محلی است که در آن کارهای عمیق اتفاق میافتد - وظایفی که به پروژهها یا اهداف بلند مدت شما کمک میکنند.
۳. اگر ضروری است ولی مهم نیست ← آن را محول کنید (به دیگری واگذار کنید)
۰ اگر میتوانید، شخصی را پیدا کنید که بتواند این کارها را برای شما انجام دهد.
۰ اگر نمیتوانید آن را به شخص دیگری محول کنید، آن را برنامهریزی کنید اما همیشه سعی کنید کارهای مهم و غیرضروری را اول انجام دهید.
۰ اینها اغلب کارهای اداری یا مواردی هستند که مهلت دارند، اما حیاتی نیستند.
۴. اگر ضروری و مهم نیست ← آن را انجام ندهید (قیدش را بزنید)
۰ این کارها ارزش وقت شما را ندارند و به هیچ وجه نباید آنها را انجام دهید.
۰ فعالیتهایی که میتوانید آنها را نادیده بگیرید، کارهای بیهوده شلوغ روزانه و سرگرمیهای شما در این ربع نمودار قرار میگیرد.
در بالا ترتیب اولویت وظایف را فهمیدید. بله وظایف مهم و غیرضروری قبل از بیاهمیت و ضروری قرار میگیرند.
ماتریس آیزنهاور بسیار انعطافپذیر است، بنابراین به خود شما مربوط است که از آن برای کارهای حرفهای، شخصی یا هر دو استفاده کنید.
همچنین می توانید با آن در بازههای زمانی مختلف کار کنید: روز خود را با آن برنامهریزی کنید و در مقابل نیز فعالیتهای کلی زندگی خود را اولویتبندی کنید.
چگونه کارهای ضروری را از کارهای مهم تشخیص دهیم.
کارهای ضروری و فوری معمولاً مهلت مشخصی دارند (به عنوان مثال ارسال طرح برای مشتری) یا از شما میخواهند به موقع عکسالعمل نشان دهید (مانند ایمیلها)
کارهای مهم معمولاً با اهداف بلند مدت شما مطابقت دارند (مثلِ ورزش) و پروژههای شما را رو به جلو سوق میدهند (مانند نوشتن کد برای پروژه جانبی).
تعیین ضرورت و اهمیت همیشه به زمینه و توانایی شما در تشخیص آنچه که واقعاً فوری و واقعاً مهم است بستگی دارد.
وعدهی ماتریس آیزنهاور این است که با تعیین اولویتهای صحیح و عمل به آنها، بهرهوری بیشتری داشته باشید. اگر همیشه مشغول هستید اما از پروژهها و اهداف بلند مدت خود عقب هستید، این ابزار قطعاً برای شما مناسب است. همچنین این یک ابزار بسیار مفید است برای اینکه تصمیم بگیرید چه کاری را انجام دهید و چه چیزی را باید از زندگی خود حذف کنید.
مطلب بالا خلاصهی مختصر و مفیدی بود از دو مقالهی زیر، پیشنهاد میکنم که نگاهی به هردو مقاله بیاندازید و از مثالها و توضیحات بیشتر برای جا افتادن این ابزار مفید استفاده کنید:
http://bit.ly/dxgn769-1
http://bit.ly/dxgn769-2
(زمان حدودی مطالعهی مقالهی اول: ۵ دقیقه
و مقالهی دوم: ۱۵ دقیقه)
نویسنده: حسین میرزاده
#ماتریس_آیزنهاور #مدیریت_کارها #اولویت_بندی_کارها #مهم #ضروری
@Dexign فلسفه دیزاین
______
James Clear
How to be More Productive and Eliminate Time Wasting Activities by Using the “Eisenhower Box”
Learn how to be more productive by using a decision making matrix called the Eisenhower Matrix. (Plus, get a free template of the Eisenhower Box I use.)
منابعی برای فراگیری دیزاین
در گذشتهای نهچندان دور برای یادگیری یک تخصص و مهارت، شناختهشدهترین و تثبیتشدهترین راه، تحصیلات آکادمیک در آن زمینه بود و اکثر افراد برای یادگیری و فراگرفتن تخصص یا مهارتی که به آن علاقه داشتند سراغ تحصیلات دانشگاهی در آن زمینه میرفتند. اما این راه و روش لزوما بهینهترین و بهترین راه نبود. در کنار افرادی که تحصیلات آکادمیک داشتند، افرادی هم بودند که از روشهای دیگر و به صورت آزاد مهارت و تخصص مورد نظر خود را فرا میگرفتند و حتی در برخی موارد از همکاران آکادمیک خود نیز پیشی میگرفتند.
امروزه نیز با پیشرفت تکنولوژی و گسترش امکانات و بسترهای ارتباطی، راههای متفاوتی برای انتشار دانش و فراگیری آن ایجاد شده است و علاقهمندان میتوانند براساس علاقه و سلیقه خود از راه و روشهای مختلف برای فراگیری و کسب دانش مورد نیاز خود استفاده کنند.
دنیای دیزاین نیز از این قاعده مستثنی نیست و منابع مختلفی از جمله کتابها، پادکستها، ویدئوهای آموزشی، وبسایتها و وبلاگها منتشر شدهاند که طیف وسیعی از مطالب و زمینههای تخصصی دیزاین را در بر میگیرند و با استفاده از آنها میتوان دانش و مهارت خود را در این زمینه بهبود بخشید.
در این مقاله مجموعهای از منابع آموزشی مختلف در زمینه طراحی رابط کاربری و تجربه کاربری معرفی شدهاند که با استفاده از آنها میتوان دانش مهارت لازم در این زمینه را به دست آورد:
http://bit.ly/dxgn770
(زمان حدودی مطالعه: ۱۲ دقیقه)
نویسنده: محمدرضا پناهی
#دیزاین #آموزش #پادکست #کتاب #وبلاگ #ویدئو
@Dexign فلسفه دیزاین
______
در گذشتهای نهچندان دور برای یادگیری یک تخصص و مهارت، شناختهشدهترین و تثبیتشدهترین راه، تحصیلات آکادمیک در آن زمینه بود و اکثر افراد برای یادگیری و فراگرفتن تخصص یا مهارتی که به آن علاقه داشتند سراغ تحصیلات دانشگاهی در آن زمینه میرفتند. اما این راه و روش لزوما بهینهترین و بهترین راه نبود. در کنار افرادی که تحصیلات آکادمیک داشتند، افرادی هم بودند که از روشهای دیگر و به صورت آزاد مهارت و تخصص مورد نظر خود را فرا میگرفتند و حتی در برخی موارد از همکاران آکادمیک خود نیز پیشی میگرفتند.
امروزه نیز با پیشرفت تکنولوژی و گسترش امکانات و بسترهای ارتباطی، راههای متفاوتی برای انتشار دانش و فراگیری آن ایجاد شده است و علاقهمندان میتوانند براساس علاقه و سلیقه خود از راه و روشهای مختلف برای فراگیری و کسب دانش مورد نیاز خود استفاده کنند.
دنیای دیزاین نیز از این قاعده مستثنی نیست و منابع مختلفی از جمله کتابها، پادکستها، ویدئوهای آموزشی، وبسایتها و وبلاگها منتشر شدهاند که طیف وسیعی از مطالب و زمینههای تخصصی دیزاین را در بر میگیرند و با استفاده از آنها میتوان دانش و مهارت خود را در این زمینه بهبود بخشید.
در این مقاله مجموعهای از منابع آموزشی مختلف در زمینه طراحی رابط کاربری و تجربه کاربری معرفی شدهاند که با استفاده از آنها میتوان دانش مهارت لازم در این زمینه را به دست آورد:
http://bit.ly/dxgn770
(زمان حدودی مطالعه: ۱۲ دقیقه)
نویسنده: محمدرضا پناهی
#دیزاین #آموزش #پادکست #کتاب #وبلاگ #ویدئو
@Dexign فلسفه دیزاین
______
Medium
The Best Books, Podcasts, Blogs, and YouTube Channels I Used to Learn UI/UX Design — Updated for 2021
Here’s a list of the best resources I’ve used to learn about UI/UX design.
سند نیازمندیهای محصول (PRD)
برای دههها، سند نیازمندیهای محصول (PRD) مهمترین سندی بود که مدیران محصول در فرآیند تولید محصولات ایجاد میکردند. در این سند، تمام آن چیزهایی که برای ریلیز یک محصول خاص لازم است، با دقت فهرست شده و کل فرآیند ریلیز محصول بر اساس آن انجام میشود. همچنین از آن به عنوان سندی راهنما در روند ریلیزهای بعدی محصول استفاده میگردد.
این نوع سندها در فرآیند توسعه محصولات مورد استفاده قرار میگیرند تا تیمهای توسعه و تست از طریق مراجعه به آنها بتواند از قابلیتهایی که محصول باید در هنگام ریلیز داشته باشد اطلاع پیدا نمایند. عمده کاربری این قبیل سندها معمولاً در متدهای توسعه محصول آبشاری میباشد که در آنها سه مرحله تعریف، دیزاین و تحویل محصول به طور متوالی اتفاق میافتد. اما گاهی ممکن است از این سندها در محیط Agile نیز استفاده شود.
از مزایای اصلی استفاده از سند نیازمندیهای محصول (PRD) میتوان به مواردی همچون درک مشترک از نیازهای محصول، صرفهجویی در زمان، جلوگیری از سوتفاهم و کاهش ریسک در پروژه اشاره کرد.
در نوشتن سند نیازمندیهای محصول، معمولا در گام نخست یک طرح کلی از آنچه باید در PRD گنجانده شود با توجه به موارد ذیل تدوین میشود:
- هدف از ساخت محصول
- امکانات محصول
- جریان تجربه کاربری UX Flow و یادداشتهای طراحی
- نیازهای سیستم و محیط
- پیشفرضها، محدودیتها و وابستگیها
جهت درک بیشتر این مفهوم و آشنایی با نحوه نوشتن یک سند نیازمندیهای محصول کارآمد، شما را به خواندن متن کامل این مقاله دعوت میکنم.
http://bit.ly/dxgn771
(زمان مورد نیاز برای مطالعه: ۷ دقیقه)
نویسنده: نیما حکیمرابط
#سندنیازمندیهایمحصول #مدیریتمحصول #متدآبشاری
@Dexign فلسفه دیزاین
______
برای دههها، سند نیازمندیهای محصول (PRD) مهمترین سندی بود که مدیران محصول در فرآیند تولید محصولات ایجاد میکردند. در این سند، تمام آن چیزهایی که برای ریلیز یک محصول خاص لازم است، با دقت فهرست شده و کل فرآیند ریلیز محصول بر اساس آن انجام میشود. همچنین از آن به عنوان سندی راهنما در روند ریلیزهای بعدی محصول استفاده میگردد.
این نوع سندها در فرآیند توسعه محصولات مورد استفاده قرار میگیرند تا تیمهای توسعه و تست از طریق مراجعه به آنها بتواند از قابلیتهایی که محصول باید در هنگام ریلیز داشته باشد اطلاع پیدا نمایند. عمده کاربری این قبیل سندها معمولاً در متدهای توسعه محصول آبشاری میباشد که در آنها سه مرحله تعریف، دیزاین و تحویل محصول به طور متوالی اتفاق میافتد. اما گاهی ممکن است از این سندها در محیط Agile نیز استفاده شود.
از مزایای اصلی استفاده از سند نیازمندیهای محصول (PRD) میتوان به مواردی همچون درک مشترک از نیازهای محصول، صرفهجویی در زمان، جلوگیری از سوتفاهم و کاهش ریسک در پروژه اشاره کرد.
در نوشتن سند نیازمندیهای محصول، معمولا در گام نخست یک طرح کلی از آنچه باید در PRD گنجانده شود با توجه به موارد ذیل تدوین میشود:
- هدف از ساخت محصول
- امکانات محصول
- جریان تجربه کاربری UX Flow و یادداشتهای طراحی
- نیازهای سیستم و محیط
- پیشفرضها، محدودیتها و وابستگیها
جهت درک بیشتر این مفهوم و آشنایی با نحوه نوشتن یک سند نیازمندیهای محصول کارآمد، شما را به خواندن متن کامل این مقاله دعوت میکنم.
http://bit.ly/dxgn771
(زمان مورد نیاز برای مطالعه: ۷ دقیقه)
نویسنده: نیما حکیمرابط
#سندنیازمندیهایمحصول #مدیریتمحصول #متدآبشاری
@Dexign فلسفه دیزاین
______
Productplan
Product Requirements Document
What is a Product Requirements Document? Learn more about Product Requirements Document s and other product management terminology in our resources library.
راهنمای تزریق حرکت در دنیای رابطهای کاربری
دنیای واقعی در اطراف ما هرگز از حرکت نمیایستد، جریان زندگی با تحرک و تغییر خود را به ما نشان میدهد و تصور نبودن آن شبیه به تصور نبودن جهان غیر ممکن است. بااینحال ایجاد حرکت و تغییر در طراحی رابطهای کاربری بدون درک نیازهای این فضا ممکن است بجای ساخت تجربهای زنده، تجربهی موجود را نیز مختل سازد.
در ابتدای کار باید بدانیم که حرکت بخشیدن یک مقولهی تزئینی نیست. نمیتوانیم به ساخت انیمیشنهای جذاب و تغییرات چشمنواز اکتفا کنیم و زیربنای تجربه کاربری را نادیده بگیریم. حرکت «رفتار» میسازد و رفتار «پیام» منتقل میکند. پیامی که راهنمای کاربر بوده و مسیرش را مشخص میکند تا «تجربه» بهتری داشته باشد. یک رفتار نادرست، پیامهای رابط کاربری را مختل کرده و تجربه کاربری قربانی میشود.
در ادامه باید به یاد داشته باشیم که نمیتوان در طراحی رابطهای کاربری تنها از اصول سنتی انیمیشنهای کمپانی دیزنی پیروی کرد؛ آنها به دنبال هرچه نزدیکتر کردن انیمیشنها به دنیای واقعیت هستند اما در طراحی رابط کاربری همواره به دنبال نزدیک شدن به تصورات، ذهنیت و انتظارات کاربران هستیم، در تعامل با آنهاست که طراحی حرکت کرده و تغییر میکند.
در رابطه با انیمیشن و حرکت این تعامل را میتوان از دو جنبه بررسی کرد: تعامل در لحظه (Real-Time) و با تاخیر (Non-Real-Time). تعامل در لحظه نتیجه اقدامات و تصمیمهای کاربران را در لحظه به آنها نشان میدهد؛ با انتخاب تعداد بیشتری از یک محصول قیمت تمام شده برای مشتری حرکت کرده و افزایش میابد. در مقابل در تعامل با تاخیر کاربر به تماشای نتیجهی اقدام خود مینشیند؛ با انتخاب دکمهی بازگشت صفحه حاضر محو شده و مرحله پیشین جای آن را میگیرد.
برای انتخاب حرکات و تغییرات مناسب برای هر یک از این تعاملات در رابط کاربری میبایست اصول مناسب با این فضا را شناخته و تمرین کنیم. در این مقاله میتوانید ۱۲ اصل راهنما برای تزریق حرکت در رابطهای کاربری را بخوانید.
http://bit.ly/dxgn772
(زمان حدودی مطالعه: ۹ دقیقه)
نویسنده: ریحانه خدایی
#طراحی #رابط_کاربری #انیمیشن #حرکت
@Dexign فلسفه دیزاین
______
دنیای واقعی در اطراف ما هرگز از حرکت نمیایستد، جریان زندگی با تحرک و تغییر خود را به ما نشان میدهد و تصور نبودن آن شبیه به تصور نبودن جهان غیر ممکن است. بااینحال ایجاد حرکت و تغییر در طراحی رابطهای کاربری بدون درک نیازهای این فضا ممکن است بجای ساخت تجربهای زنده، تجربهی موجود را نیز مختل سازد.
در ابتدای کار باید بدانیم که حرکت بخشیدن یک مقولهی تزئینی نیست. نمیتوانیم به ساخت انیمیشنهای جذاب و تغییرات چشمنواز اکتفا کنیم و زیربنای تجربه کاربری را نادیده بگیریم. حرکت «رفتار» میسازد و رفتار «پیام» منتقل میکند. پیامی که راهنمای کاربر بوده و مسیرش را مشخص میکند تا «تجربه» بهتری داشته باشد. یک رفتار نادرست، پیامهای رابط کاربری را مختل کرده و تجربه کاربری قربانی میشود.
در ادامه باید به یاد داشته باشیم که نمیتوان در طراحی رابطهای کاربری تنها از اصول سنتی انیمیشنهای کمپانی دیزنی پیروی کرد؛ آنها به دنبال هرچه نزدیکتر کردن انیمیشنها به دنیای واقعیت هستند اما در طراحی رابط کاربری همواره به دنبال نزدیک شدن به تصورات، ذهنیت و انتظارات کاربران هستیم، در تعامل با آنهاست که طراحی حرکت کرده و تغییر میکند.
در رابطه با انیمیشن و حرکت این تعامل را میتوان از دو جنبه بررسی کرد: تعامل در لحظه (Real-Time) و با تاخیر (Non-Real-Time). تعامل در لحظه نتیجه اقدامات و تصمیمهای کاربران را در لحظه به آنها نشان میدهد؛ با انتخاب تعداد بیشتری از یک محصول قیمت تمام شده برای مشتری حرکت کرده و افزایش میابد. در مقابل در تعامل با تاخیر کاربر به تماشای نتیجهی اقدام خود مینشیند؛ با انتخاب دکمهی بازگشت صفحه حاضر محو شده و مرحله پیشین جای آن را میگیرد.
برای انتخاب حرکات و تغییرات مناسب برای هر یک از این تعاملات در رابط کاربری میبایست اصول مناسب با این فضا را شناخته و تمرین کنیم. در این مقاله میتوانید ۱۲ اصل راهنما برای تزریق حرکت در رابطهای کاربری را بخوانید.
http://bit.ly/dxgn772
(زمان حدودی مطالعه: ۹ دقیقه)
نویسنده: ریحانه خدایی
#طراحی #رابط_کاربری #انیمیشن #حرکت
@Dexign فلسفه دیزاین
______
Medium
A guide to Motion Design principles
Motion has a profound impact on the user experience of digital products, but if interface elements don’t exhibit basic motion design…
آغاز کار، مهمترین قسمت کار
افلاطون میگوید: آغاز کار، مهمترین قسمت کار است. تقریبا ۲۴ قرن از آن زمان میگذرد اما این جمله به صورت واقعگرایانهای هنوز به روز است.
فرض کنید شما یک معمار هستید و قصد طراحی یک خانه را دارید، آیا ساختن و یا حتی طراحی آن خانه بدون کشیدن نمونههای اولیه شامل اسکچهای دستی، طراحی پلانهای دوبعدی، نقشههای سیاه و سفید و در نهایت ساخت ماکت اولیه، ممکن است؟ یک معمار قبل از اینکه بفهمد چگونه خانه واقعی را بسازد باید آن را در نمودارهای سیاه و سفید دوبعدی ببیند. این قانون برای روند کاری هر طراحی صدق میکند.
کشیدن وایرفریم برای طراحان تجربه کاربری مانند همان نقشههای دوبعدی سیاه و سفید برای معماران عمل میکند. کشیدن وایرفریم به ما کمک میکند که از خلاقیت خود بیشترین استفاده را ببریم و ذهن خود را محدود به رنگها، شکلها و فونتها نکنیم.
هر طراح برای موفق بودن در کشیدن وایرفریمها باید نکاتی را بداند که در این مقاله به آنها اشاره شده است.
http://bit.ly/dxgn773
(زمان حدودی مطالعه: ۱۰ دقیقه)
نویسنده: هانیه طاهری
#تجربه_کاربری #وایرفریم
@dexign فلسفه دیزاین
______
افلاطون میگوید: آغاز کار، مهمترین قسمت کار است. تقریبا ۲۴ قرن از آن زمان میگذرد اما این جمله به صورت واقعگرایانهای هنوز به روز است.
فرض کنید شما یک معمار هستید و قصد طراحی یک خانه را دارید، آیا ساختن و یا حتی طراحی آن خانه بدون کشیدن نمونههای اولیه شامل اسکچهای دستی، طراحی پلانهای دوبعدی، نقشههای سیاه و سفید و در نهایت ساخت ماکت اولیه، ممکن است؟ یک معمار قبل از اینکه بفهمد چگونه خانه واقعی را بسازد باید آن را در نمودارهای سیاه و سفید دوبعدی ببیند. این قانون برای روند کاری هر طراحی صدق میکند.
کشیدن وایرفریم برای طراحان تجربه کاربری مانند همان نقشههای دوبعدی سیاه و سفید برای معماران عمل میکند. کشیدن وایرفریم به ما کمک میکند که از خلاقیت خود بیشترین استفاده را ببریم و ذهن خود را محدود به رنگها، شکلها و فونتها نکنیم.
هر طراح برای موفق بودن در کشیدن وایرفریمها باید نکاتی را بداند که در این مقاله به آنها اشاره شده است.
http://bit.ly/dxgn773
(زمان حدودی مطالعه: ۱۰ دقیقه)
نویسنده: هانیه طاهری
#تجربه_کاربری #وایرفریم
@dexign فلسفه دیزاین
______
Smashing Magazine
How To Succeed In Wireframe Design — Smashing Magazine
In this article, we will take a deeper look at one of the most simple yet quite often underrated activities in web development: the design of wireframes.
👍1
فونتهایی از جنس تصویر
درباره فونت آیکن بیشتر بدانیم
خروجی طرحها بعد از توسعه همیشه مطابق چیزی که طراحی کردهایم نیست و بارها برایمان پیش آمده که از خروجی طرحهای توسعهیافتهمان چندان راضی نباشیم. اما چرا چنین اتفاقی میافتد؟ شاید سادهترین جواب وجود محدودیتهاییست که ما به عنوان طراح از آن آگاه نیستیم و گاهی طراحیهایی انجام میدهیم که امکان اجرای آن به صورت کامل وجود ندارد.
با اینکه هرگز با محدود کردن خلاقیت ذهن طراح موافق نیستم ولی انجام کارهای سادهای که باعث ایجاد یک زبان مشترک بین طراحان و توسعه دهندگان میشود را میپسندم. به همین دلیل شنیدن کلمه فونتآیکن و صحبت از مزایای آن از زبان یک دولوپر توجهام را به سمت خود جلب کرد و تصمیم گرفتم درباره آن بیشتر بدانم.
ما به عنوان یک طراح برای نمایش بهتر مفاهیم و در برخی موارد برای بخشیدن جلوه بیشتر به طرحهایمان از آیکنها استفاده میکنیم. این آیکنها بسته به نظر طراح به صورت SVG و گاهی PNG در طرحها قرار میگیرد و اشکال متفاوتی دارد. حالا تصور کنید که این آیکنها بهجای یک تصویر مجزا به فونت تبدیل شوند و بتوان به آسانی تایپ کردن به کار برد یا ابعاد و اندازههایشان را تغییر داد، این دقیقا کاری است که با تبدیل آیکنها به فونت آیکن (Font icon) امکانپذیر میشود.
فونتها معمولا از حروف و اعداد تشکیل میشوند و به ما این امکان را میدهند تا با استفاده از آنها متن مورد نظر خود را بنویسیم. فونت آیکنها فونتهایی هستند که بهجای حروف و اعداد از تصاویر تشکیل شدهاند، اندازه و رنگ آنها قابل تغییر است و امکان اصلاح آن با استفاده از CSS وجود دارد.
استفاده از فونت آیکنبرای توسعه دهندگان از آیکنهای عادی بسیار راحتتر است چون همه این تغییرات با CSS انجام میشود و دیگر نیازی نیست که برای هر آیکن تصویر منحصر به فردی ایجاد شود و این مساله در کمکردن حجم وبسایت و کدها تاثیر زیادی دارد.
با اینکه ساخت فونت آیکنها چندان کار پیچیدهای نیست، اما لازم نیست که خودتان آنها را ایجاد کنید چرا که آنها در سراسر اینترنت وجود دارند. محبوبترین و شناخته شدهترین کتابخانه فونت آیکن Font Awesome است. برای بیش از 100 میلیون وبسایت استفاده می شود و شامل مجموعه ای قدرتمند از انواع آیکنهاست که با تمام ابزارهای محبوب کار میکند.
اگر به دانستن اطلاعات بیشتر درباره فونت آیکنها، مزایا و معایب استفاده از آنها و همینطور آشنایی با سایتهایی که امکان ایجاد و دانلود فونت آیکن در آنها وجود دارد علاقهدارید این مقاله را بخوانید.
http://bit.ly/dxgn774
(زمان حدودی مطالعه: ۷ دقیقه)
نویسنده: فیروزه ایمانی
#طراحی #رابط_کاربری #آیکن #فونت_آیکن
@Dexign فلسفه دیزاین
_____
درباره فونت آیکن بیشتر بدانیم
خروجی طرحها بعد از توسعه همیشه مطابق چیزی که طراحی کردهایم نیست و بارها برایمان پیش آمده که از خروجی طرحهای توسعهیافتهمان چندان راضی نباشیم. اما چرا چنین اتفاقی میافتد؟ شاید سادهترین جواب وجود محدودیتهاییست که ما به عنوان طراح از آن آگاه نیستیم و گاهی طراحیهایی انجام میدهیم که امکان اجرای آن به صورت کامل وجود ندارد.
با اینکه هرگز با محدود کردن خلاقیت ذهن طراح موافق نیستم ولی انجام کارهای سادهای که باعث ایجاد یک زبان مشترک بین طراحان و توسعه دهندگان میشود را میپسندم. به همین دلیل شنیدن کلمه فونتآیکن و صحبت از مزایای آن از زبان یک دولوپر توجهام را به سمت خود جلب کرد و تصمیم گرفتم درباره آن بیشتر بدانم.
ما به عنوان یک طراح برای نمایش بهتر مفاهیم و در برخی موارد برای بخشیدن جلوه بیشتر به طرحهایمان از آیکنها استفاده میکنیم. این آیکنها بسته به نظر طراح به صورت SVG و گاهی PNG در طرحها قرار میگیرد و اشکال متفاوتی دارد. حالا تصور کنید که این آیکنها بهجای یک تصویر مجزا به فونت تبدیل شوند و بتوان به آسانی تایپ کردن به کار برد یا ابعاد و اندازههایشان را تغییر داد، این دقیقا کاری است که با تبدیل آیکنها به فونت آیکن (Font icon) امکانپذیر میشود.
فونتها معمولا از حروف و اعداد تشکیل میشوند و به ما این امکان را میدهند تا با استفاده از آنها متن مورد نظر خود را بنویسیم. فونت آیکنها فونتهایی هستند که بهجای حروف و اعداد از تصاویر تشکیل شدهاند، اندازه و رنگ آنها قابل تغییر است و امکان اصلاح آن با استفاده از CSS وجود دارد.
استفاده از فونت آیکنبرای توسعه دهندگان از آیکنهای عادی بسیار راحتتر است چون همه این تغییرات با CSS انجام میشود و دیگر نیازی نیست که برای هر آیکن تصویر منحصر به فردی ایجاد شود و این مساله در کمکردن حجم وبسایت و کدها تاثیر زیادی دارد.
با اینکه ساخت فونت آیکنها چندان کار پیچیدهای نیست، اما لازم نیست که خودتان آنها را ایجاد کنید چرا که آنها در سراسر اینترنت وجود دارند. محبوبترین و شناخته شدهترین کتابخانه فونت آیکن Font Awesome است. برای بیش از 100 میلیون وبسایت استفاده می شود و شامل مجموعه ای قدرتمند از انواع آیکنهاست که با تمام ابزارهای محبوب کار میکند.
اگر به دانستن اطلاعات بیشتر درباره فونت آیکنها، مزایا و معایب استفاده از آنها و همینطور آشنایی با سایتهایی که امکان ایجاد و دانلود فونت آیکن در آنها وجود دارد علاقهدارید این مقاله را بخوانید.
http://bit.ly/dxgn774
(زمان حدودی مطالعه: ۷ دقیقه)
نویسنده: فیروزه ایمانی
#طراحی #رابط_کاربری #آیکن #فونت_آیکن
@Dexign فلسفه دیزاین
_____
designshack.net
What Is an Icon Font? (And How to Use One)
Icon fonts are a popular solution to a common CSS problem; how to incorporate web icons into your website design in an efficient, fast-loading way. With plenty of services available to make choosing and using an icon font easy, you don’t have to create your…
به تصویر کشیدن پیچیدگیها
در دنیای طراحی ما بیش از هر چیز با تصاویر سر و کار داریم و با آنهاست که محتواهای متنوع را از هم متمایز کرده و به کاربران انتقال میدهیم. اما تا چه اندازه میدانیم که کاربران چهطور تصاویر را میخوانند؟ و به چه شکلی میتوان محتوای پیچیده را به تصاویر خوانا ترجمه کرد؟
بهترین راهنما برای رسیدن به جواب این سوالات در این جملهی آلبرتو کایرو (Alberto cairo) نهفته است «تصویرسازی بر روی یک صفحه کاغذ اتفاق نمیافتد بلکه در ذهن مخاطب رخ میدهد» در ابتدا باید با شیوه خوانش تصاویر در ذهن مخاطبان آشنا شویم تا بتوانیم تصاویری خوانا ساخته و در ادامه پیچیدهترین مفاهیم را نیز به تصویر بکشیم.
به طور کلی دو سیستم برای پردازش و آنالیز اطلاعات در ذهن ما وجود دارد:
• سیستم شماره ۱ به صورت اتوماتیک و به سرعت عمل کرده و تقریبا به هیچگونه تلاش ارادی نیاز ندارد.
• سیستم شماره ۲ نیاز به فعالیتهای ذهنی ارادی داشته و معمولا برای پردازش اطلاعات پیچیده فعال میشود.
سیستم شماره ۱ به ما در تصمیمگیریهای سریع بر پایهی اطلاعات دریافتی کمک میکند؛ با این حال تحریک این سیستم در ذهن مخاطب تنها به جلب توجه و تصمیمگیریهای سطحی او منجر خواهد شد . برای کمک به او در خوانش و درک محتوای تصویری باید با سیستم شماره ۲ در ذهنش درگیر شویم و یکی از مفاهیمی که در ارتباط با این سیستم باید بشناسیم بار شناختی (Cognitive Load) است.
به عبارتی ساده بار شناختی به میران درگیر شدن حافظه فعال در مواجهه با یک عمل شناختی گفته میشود و میتوان آن را به سه زیرمجموعه تقسیم کرد:
۱. بار ذاتی (Intrinsic) که اشاره به میزان پیچیدگی ذاتی هر موضوعی دارد.
۲. بار خارجی (Extraneos) که در رابطه با طراحی و نحوه ارائه موضوع مطرح میشود.
۳. بار وابسته (Germane) که به الگوی طبقهبندی و مرتبسازی دادهها مرتبط است.
با کم کردن هر یک از این زیرمجموعه بارها میتوانیم از مجموعه بار شناختی کاسته و طراحیهایمان را برای کاربران سادهتر کنیم. اما از کجا باید شروع کرد؟
یکی از اشتباهات اکثر طراحان تجربه بهخصوص در ابتدای کارشان این است که تنها به بار ذاتی اطلاعات توجه میکنند و تمام تلاششان در راستای سادهتر کردن ذات محتوایی است که ارائه میدهند. با این حال برای محتوایی که ذاتا پیچیده است این میتواند به معنای از دست رفتن بخشی از اطلاعات و یا ایجاد نقص در آن باشد. اگر بخواهیم تمام و کمال یک محتوای پیچیده را انتقال دهیم باید هویت و ذات آن را تا جایی که ممکن است حفظ کنیم. یک طراح تجربه همیشه میبایست پیش از تغییر ماهیت محتوا، نحوه ارائه (بار خارجی) و الگوی ارائه (بار وابسته) محتوا را تغییر دهد تا تصویرسازی آن در ذهن مخاطب را بهبود بخشد.
در این مقاله میتوانید مثالهایی برای کاهش بار شناختی از این طریق را مشاهده کرده و بیشتر درباره نحوهی ادراک تصاویر توسط کاربر مطالعه کنید.
http://bit.ly/dxgn776
(زمان حدودی مطالعه: ۷ دقیقه)
نویسنده: ریحانه خدایی
#طراحی #تجربه_کاربری #تصویر #اطلاعات #بار_شناختی
@Dexign فلسفه دیزاین
______
در دنیای طراحی ما بیش از هر چیز با تصاویر سر و کار داریم و با آنهاست که محتواهای متنوع را از هم متمایز کرده و به کاربران انتقال میدهیم. اما تا چه اندازه میدانیم که کاربران چهطور تصاویر را میخوانند؟ و به چه شکلی میتوان محتوای پیچیده را به تصاویر خوانا ترجمه کرد؟
بهترین راهنما برای رسیدن به جواب این سوالات در این جملهی آلبرتو کایرو (Alberto cairo) نهفته است «تصویرسازی بر روی یک صفحه کاغذ اتفاق نمیافتد بلکه در ذهن مخاطب رخ میدهد» در ابتدا باید با شیوه خوانش تصاویر در ذهن مخاطبان آشنا شویم تا بتوانیم تصاویری خوانا ساخته و در ادامه پیچیدهترین مفاهیم را نیز به تصویر بکشیم.
به طور کلی دو سیستم برای پردازش و آنالیز اطلاعات در ذهن ما وجود دارد:
• سیستم شماره ۱ به صورت اتوماتیک و به سرعت عمل کرده و تقریبا به هیچگونه تلاش ارادی نیاز ندارد.
• سیستم شماره ۲ نیاز به فعالیتهای ذهنی ارادی داشته و معمولا برای پردازش اطلاعات پیچیده فعال میشود.
سیستم شماره ۱ به ما در تصمیمگیریهای سریع بر پایهی اطلاعات دریافتی کمک میکند؛ با این حال تحریک این سیستم در ذهن مخاطب تنها به جلب توجه و تصمیمگیریهای سطحی او منجر خواهد شد . برای کمک به او در خوانش و درک محتوای تصویری باید با سیستم شماره ۲ در ذهنش درگیر شویم و یکی از مفاهیمی که در ارتباط با این سیستم باید بشناسیم بار شناختی (Cognitive Load) است.
به عبارتی ساده بار شناختی به میران درگیر شدن حافظه فعال در مواجهه با یک عمل شناختی گفته میشود و میتوان آن را به سه زیرمجموعه تقسیم کرد:
۱. بار ذاتی (Intrinsic) که اشاره به میزان پیچیدگی ذاتی هر موضوعی دارد.
۲. بار خارجی (Extraneos) که در رابطه با طراحی و نحوه ارائه موضوع مطرح میشود.
۳. بار وابسته (Germane) که به الگوی طبقهبندی و مرتبسازی دادهها مرتبط است.
با کم کردن هر یک از این زیرمجموعه بارها میتوانیم از مجموعه بار شناختی کاسته و طراحیهایمان را برای کاربران سادهتر کنیم. اما از کجا باید شروع کرد؟
یکی از اشتباهات اکثر طراحان تجربه بهخصوص در ابتدای کارشان این است که تنها به بار ذاتی اطلاعات توجه میکنند و تمام تلاششان در راستای سادهتر کردن ذات محتوایی است که ارائه میدهند. با این حال برای محتوایی که ذاتا پیچیده است این میتواند به معنای از دست رفتن بخشی از اطلاعات و یا ایجاد نقص در آن باشد. اگر بخواهیم تمام و کمال یک محتوای پیچیده را انتقال دهیم باید هویت و ذات آن را تا جایی که ممکن است حفظ کنیم. یک طراح تجربه همیشه میبایست پیش از تغییر ماهیت محتوا، نحوه ارائه (بار خارجی) و الگوی ارائه (بار وابسته) محتوا را تغییر دهد تا تصویرسازی آن در ذهن مخاطب را بهبود بخشد.
در این مقاله میتوانید مثالهایی برای کاهش بار شناختی از این طریق را مشاهده کرده و بیشتر درباره نحوهی ادراک تصاویر توسط کاربر مطالعه کنید.
http://bit.ly/dxgn776
(زمان حدودی مطالعه: ۷ دقیقه)
نویسنده: ریحانه خدایی
#طراحی #تجربه_کاربری #تصویر #اطلاعات #بار_شناختی
@Dexign فلسفه دیزاین
______
Medium
How to create visualizations about complex topics
Perception, Cognition, and the mistake most people make