اصول انتخاب رنگها
بسیاری معتقدند در طراحی محصول، استفاده از رنگها تنها به سلیقهی طراح مربوط میشود در حالیکه اهمیت این موضوع در طراحی بسیار بالاتر از این است که هر فرد با سلیقهی خود درگیر آن شود.
تحقیقات نشان از آن دارند که هر کاربر در ۹۰ ثانیه اول برخورد با هر محصول، آن را قضاوت میکند و رنگهای بکار برده شده در محصول، قسمت اصلی این قضاوت را در برمیگیرند.
دایرهی رنگ که دایرهای متشکل از رنگهای مختلف است [تصویر آن را در مقاله معرفی شده میبینیم] به درک نحوه ارتباط رنگهای مختلف با یکدیگر و نحوه ترکیب آنها کمک میکند. دایرهی رنگ معمولاً از رنگهای اولیه ، ثانویه و سوم ساخته شده است. رنگهای اصلی سه رنگدانهای هستند که با هیچ ترکیبی از رنگهای دیگر تشکیل نمیشوند. با ترکیب رنگهای اصلی، رنگهای ثانویه را به دست میآوریم و ترکیب رنگهای اصلی و ثانویه رنگهای ثالثی را به ما میدهد که معمولاً دارای نامهای دو کلمهای هستند.
پیداکردن و انتخاب ترکیب و هارمونی میانِ رنگهای این چرخه براساس چند هارمونی خاص صورت میگیرد، برای مثال:
۱. هارمونی تکرنگ: طراحی بر اساس یک رنگ با سایههای مختلف آن است. هارمونی تکرنگ همیشه یک انتخاب برنده است زیرا اشتباه کردن و احتمال ایجاد طرح ناخوشایند پایین است.
۲. هارمونی مشابه: برای ایجاد هارمونی مشابه، باید از رنگهایی استفاده کنید که درست در کنار یکدیگر روی چرخه رنگ قرار گرفتهاند. این نوع رنگبندی برای طراحی مورد استفاده قرار میگیرد که در آن نیازی به کنتراست نیست.
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
سفری به شهر هاوکینز
اگر اهل تماشای سریالهای علمی-تخیلی باشید، احتمالا نام شهر «هاوکینز (Hawkins)» برایتان آشنا باشد. هاوکینز شهری خیالی در ایالت ایندیانا است که اتفاقات و داستان سریال «Stranger Things» در آن جریان دارد. این سریال که یکی از ساختههای کمپانی نتفلیکس است طرفداران زیادی در میان اهالی سریالهای علمی-تخیلی دارد. امروز میخواهیم سری به هاوکینز بزنیم؛ اما نه آن شهر خیالی، بلکه دیزاینسیستم کمپانی نتفلیکس که با نام هاوکینز شناخته میشود.
در کنفرانس Schema 2021 که توسط فیگما با موضوع دیزاینسیستمها برگزار شد، لوکا اوریو (Luca Orio) و جن یی (Jen Yee) از تیم دیزاین نتفلیکس به معرفی و صحبت درباره توسعه و طراحی دیزاینسیستم هاوکینز پرداختند و همین سخنرانی بهانهای شد تا به سراغ این دیزاینسیستم برویم و آن را معرفی کنیم.
نتفلیکس یک سرویس صوت و تصویر فراگیر است که در نقاط مختلفی از دنیا فعالیت دارد و محتوای ویدئویی متنوعی را برای انسانها با فرهنگها و سلیقههای مختلف تولید میکند. این طیف وسیع مخاطبین با ویژگیها، علایق و سلیقههای مختلف باعث میشود ایجاد سیستمی یکپارچه و در عینحال شخصیسازی شده برای گروههای مختلف مخاطبین، حائز اهمیت و حیاتی باشد. بر همین اساس، دیزاینسیستم نتفلیکس طراحی و توسعه داده شده است تا علاوه بر پاسخگویی به نیاز مخاطبین، یکپارچگی در میان قسمتها و امکانات مختلف سرویس حفظ شود. استفاده از یک دیزاینسیستم از پیش تعریف شده باعث میشود تا کاربران تجربه کاربری مناسب و دلنشینی را در استفاده از تمامی امکانات و ویژگیهای نتفلیکس تجربه کنند.
در این مقاله روند تصمیمگیری و برنامهریزی درباره طراحی و توسعه دیزاینسیستم هاوکینز و نحوه استفاده از ان توضیح داده شده است:
https://bit.ly/dxgn851
همچنین اگر تمایل دارید بیشتر درباره دیزاینسیستمها بدانید، میتوانید مطالب قبلی ما در این زمینه را مطالعه کنید:
https://t.iss.one/Dexign/549
https://t.iss.one/Dexign/720
(زمان حدودی مطالعه مقاله اصلی: ۱۵ دقیقه)
نویسنده: محمدرضا پناهی
#دیزاینسیستم #هاوکینز #نتفلیکس
@Dexign فلسفه دیزاین
______
اگر اهل تماشای سریالهای علمی-تخیلی باشید، احتمالا نام شهر «هاوکینز (Hawkins)» برایتان آشنا باشد. هاوکینز شهری خیالی در ایالت ایندیانا است که اتفاقات و داستان سریال «Stranger Things» در آن جریان دارد. این سریال که یکی از ساختههای کمپانی نتفلیکس است طرفداران زیادی در میان اهالی سریالهای علمی-تخیلی دارد. امروز میخواهیم سری به هاوکینز بزنیم؛ اما نه آن شهر خیالی، بلکه دیزاینسیستم کمپانی نتفلیکس که با نام هاوکینز شناخته میشود.
در کنفرانس Schema 2021 که توسط فیگما با موضوع دیزاینسیستمها برگزار شد، لوکا اوریو (Luca Orio) و جن یی (Jen Yee) از تیم دیزاین نتفلیکس به معرفی و صحبت درباره توسعه و طراحی دیزاینسیستم هاوکینز پرداختند و همین سخنرانی بهانهای شد تا به سراغ این دیزاینسیستم برویم و آن را معرفی کنیم.
نتفلیکس یک سرویس صوت و تصویر فراگیر است که در نقاط مختلفی از دنیا فعالیت دارد و محتوای ویدئویی متنوعی را برای انسانها با فرهنگها و سلیقههای مختلف تولید میکند. این طیف وسیع مخاطبین با ویژگیها، علایق و سلیقههای مختلف باعث میشود ایجاد سیستمی یکپارچه و در عینحال شخصیسازی شده برای گروههای مختلف مخاطبین، حائز اهمیت و حیاتی باشد. بر همین اساس، دیزاینسیستم نتفلیکس طراحی و توسعه داده شده است تا علاوه بر پاسخگویی به نیاز مخاطبین، یکپارچگی در میان قسمتها و امکانات مختلف سرویس حفظ شود. استفاده از یک دیزاینسیستم از پیش تعریف شده باعث میشود تا کاربران تجربه کاربری مناسب و دلنشینی را در استفاده از تمامی امکانات و ویژگیهای نتفلیکس تجربه کنند.
در این مقاله روند تصمیمگیری و برنامهریزی درباره طراحی و توسعه دیزاینسیستم هاوکینز و نحوه استفاده از ان توضیح داده شده است:
https://bit.ly/dxgn851
همچنین اگر تمایل دارید بیشتر درباره دیزاینسیستمها بدانید، میتوانید مطالب قبلی ما در این زمینه را مطالعه کنید:
https://t.iss.one/Dexign/549
https://t.iss.one/Dexign/720
(زمان حدودی مطالعه مقاله اصلی: ۱۵ دقیقه)
نویسنده: محمدرضا پناهی
#دیزاینسیستم #هاوکینز #نتفلیکس
@Dexign فلسفه دیزاین
______
Medium
Hawkins: Diving into the Reasoning Behind our Design System
by Hawkins team member Joshua Godi; with cover art from Martin Bekerman and additional imagery from Wiki Chaves
طراحی تجربه کاربری منطبق با چشم انسان
میزان موفقیت یک طراحی کاملا به میزان تعامل کاربران با آن بستگی دارد. هرچه برای انسان ها درک و انجام کارهایشان در محصولی راحت تر باشد، تمایل آنها برای استفاده از آن محصول بیشتر است. بنابراین مهم است که طراحان از نحوه برخورد انسان ها با رابط کاربری آگاهی کافی داشته باشند. به ویژه الگوی برداشت بصری چشم از اطلاعات نمایش داده شده. دانستن این الگو به طراحان کمک میکند تا بتوانند یک سلسله مراتب بصری کارآمد برای تفسیر بهتر کاربران از اطلاعات هر صفحه تهیه کنند.
در این مقاله از قوانین استفاده از الگوی حرکت چشمی انسان در جهت بهبود اسکن پذیری و طراحی محصول صحبت شده است که بطور خلاصه به بخشی از آنها اشاره میکنیم.
- اندازه المانها باید به قدر کافی بزرگ باشد تا کاربران بتوانند به راحتی آنها را ببینند. المانهای بزرگتر توجه بیشتری را نسبت به المانهای کوچکتر جلب می کنند چرا که انسانها تمایل دارند اشیایی را که به وضوح نمیبینند نادیده بگیرند.
- باید از رنگهای روشن اما آرامشبخش استفاده کرد که نظر کاربران را به سمت خود میکشند. همچنین ، رنگ بندی مورد استفاده باید دارای کنتراست باشد، به ویژه بین عناصر پس زمینه و پیش زمینه که به کاربر کمک میکند به راحتی بین آنها تمایز قائل شود.
- فونتهای تزئینی اضافی تفسیر کلمات را برای کاربران مشکل میکند. استفاده از فونتهای ساده مانند Arial, New Times Roman و ... ارجحیت دارند.
- محتوای مشابه باید دارای هم ترازی باشد تا کاربران بتوانند آنها را با یکدیگر مرتبط کنند. همچنین، عنصری که از الگوی تراز جدا میشود، تمایل بیشتری برای جلب توجه کاربر دارد.
- در بحث طراحی، مارجینها یکی از اساسیترین عوامل هستند. علیرغم این که تصور میشود عناصر نزدیک به هم مرتبط هستند، همه عناصر باید به گونه ای سازماندهی و فاصله گذاری شوند که واضح باشند و به راحتی پیدا شوند.
- برای هر نوع المانی در طراحی باید از اشکال استاندارد استفاده شود. طراحی زیبا و پیچیده یک المان زمانی که کاربر عملکرد آن را درک نکند اهمیتی نخواهد داشت.
- مهم است که فضای سفید را نه به عنوان یک فضای اضافه، بلکه به عنوان یک عنصر مهم طراحی بدانیم. فضاهای سفید مناسب به کاربران این امکان را می دهد که هر یک از المانهای طراحی را بدون تلاش زیادی درک کنند.
- المانها و محتویات مهم باید در مکانهایی قرار گیرند که چشم انسان سریع تر یا بیشتر آن بخشها را اسکن میکند. همینطور میتوان به وسیله افزایش سایز یا وزن فونت، کنتراست رنگی و یا تغییر تراز روی این محتویات تاکید کرد.
- استایل یکپارچه محصول مانند اشکال ، آیکون پکها، رنگها و فونتها باعث میشود کاربران محتوا را به عنوان یک کلیت منسجم و مرتبط تشخیص دهند.
مقاله زیر به کلیه ابعاد ذکر شده به صورت مفصل پرداخته است:
https://bit.ly/dxgn852
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده : فریما فرحمند
#طراحی #الگوی_چشمی #UX #کاربردپذیری
@Dexign فلسفه دیزاین
______
میزان موفقیت یک طراحی کاملا به میزان تعامل کاربران با آن بستگی دارد. هرچه برای انسان ها درک و انجام کارهایشان در محصولی راحت تر باشد، تمایل آنها برای استفاده از آن محصول بیشتر است. بنابراین مهم است که طراحان از نحوه برخورد انسان ها با رابط کاربری آگاهی کافی داشته باشند. به ویژه الگوی برداشت بصری چشم از اطلاعات نمایش داده شده. دانستن این الگو به طراحان کمک میکند تا بتوانند یک سلسله مراتب بصری کارآمد برای تفسیر بهتر کاربران از اطلاعات هر صفحه تهیه کنند.
در این مقاله از قوانین استفاده از الگوی حرکت چشمی انسان در جهت بهبود اسکن پذیری و طراحی محصول صحبت شده است که بطور خلاصه به بخشی از آنها اشاره میکنیم.
- اندازه المانها باید به قدر کافی بزرگ باشد تا کاربران بتوانند به راحتی آنها را ببینند. المانهای بزرگتر توجه بیشتری را نسبت به المانهای کوچکتر جلب می کنند چرا که انسانها تمایل دارند اشیایی را که به وضوح نمیبینند نادیده بگیرند.
- باید از رنگهای روشن اما آرامشبخش استفاده کرد که نظر کاربران را به سمت خود میکشند. همچنین ، رنگ بندی مورد استفاده باید دارای کنتراست باشد، به ویژه بین عناصر پس زمینه و پیش زمینه که به کاربر کمک میکند به راحتی بین آنها تمایز قائل شود.
- فونتهای تزئینی اضافی تفسیر کلمات را برای کاربران مشکل میکند. استفاده از فونتهای ساده مانند Arial, New Times Roman و ... ارجحیت دارند.
- محتوای مشابه باید دارای هم ترازی باشد تا کاربران بتوانند آنها را با یکدیگر مرتبط کنند. همچنین، عنصری که از الگوی تراز جدا میشود، تمایل بیشتری برای جلب توجه کاربر دارد.
- در بحث طراحی، مارجینها یکی از اساسیترین عوامل هستند. علیرغم این که تصور میشود عناصر نزدیک به هم مرتبط هستند، همه عناصر باید به گونه ای سازماندهی و فاصله گذاری شوند که واضح باشند و به راحتی پیدا شوند.
- برای هر نوع المانی در طراحی باید از اشکال استاندارد استفاده شود. طراحی زیبا و پیچیده یک المان زمانی که کاربر عملکرد آن را درک نکند اهمیتی نخواهد داشت.
- مهم است که فضای سفید را نه به عنوان یک فضای اضافه، بلکه به عنوان یک عنصر مهم طراحی بدانیم. فضاهای سفید مناسب به کاربران این امکان را می دهد که هر یک از المانهای طراحی را بدون تلاش زیادی درک کنند.
- المانها و محتویات مهم باید در مکانهایی قرار گیرند که چشم انسان سریع تر یا بیشتر آن بخشها را اسکن میکند. همینطور میتوان به وسیله افزایش سایز یا وزن فونت، کنتراست رنگی و یا تغییر تراز روی این محتویات تاکید کرد.
- استایل یکپارچه محصول مانند اشکال ، آیکون پکها، رنگها و فونتها باعث میشود کاربران محتوا را به عنوان یک کلیت منسجم و مرتبط تشخیص دهند.
مقاله زیر به کلیه ابعاد ذکر شده به صورت مفصل پرداخته است:
https://bit.ly/dxgn852
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده : فریما فرحمند
#طراحی #الگوی_چشمی #UX #کاربردپذیری
@Dexign فلسفه دیزاین
______
UX Magazine
Designing Effective UX for Human Eyes
The success of a design completely depends upon how the users interact with it.
جدولهایی بهروز و کارآمد بسازید
جدولها یکی از پرکاربردترین المانها در فضای طراحی دیجیتال هستند که در نگاه اول بسیار ساده به نظر میآیند، اما اگر ویژگیهای یک جدول چهارچوبهای طراحی آن را نشناسیم نمیتوانیم جدولهایی کارآمد طراحی کنیم.
مهمترین ویژگی یک جدول قابلیت تطبیقپذیری آن با اطلاعات متنوع است، به عنوان یک طراح باید انواع متغیرهای محتوا را در نظر گرفته و پیشبینی کنید.
ممکن است ورودیهای جدول طولی بیش از یک خط داشته باشند؟ دسترسی افراد مختلف به جدول یکسان است یا با توجه به نقش آنها باید متفاوت باشد؟ جدولها تا چه اندازه از محتوا را میتوانند در خود ذخیره کنند و بهترین شیوه برای نمایش آنها و اولویتبندیشان کدام است؟
ویژگی دیگر جدولها مانند هر محتوای دیگری در فضای دیجیتال قابلیت اسکن شدن آنهاست، محتوای جدولها باید در سریعترین زمان ممکن از هم تفکیک شوند. تفاوت حالت نمایش نام ستونها از محتوای درونی جدول و استفاده از دو پسزمینه مختلف برای ردیفها نیز به همین دلیل است.
ویژگی بعدی که باید به آن توجه کرد، تعاملی بودن عملکرد آنهاست. گاهی نیاز داریم عملکردهای مجازا برای هر ردیف یا ستون تعرف کنیم، مانند عمل حذف کردن یا ویرایش. در کنار آن کاربر نیاز دارد بتواند تعدادی از محتوای جدول به صورت یکجا تغییر دهد. هر یک از این تعاملها محدودیتها و نیازمندیهای مخصوص به خود را دارند که در طراحی باید در نظر گرفته شوند.
برای طراحی یک جدول کارآمد باید تمام این ویژگیها را در کنار هم در نظر بگیریم و فضاهایی منعطف، قابل فهم، قابل اسکن و تعاملی ایجاد کنیم. اصول جزییتر برای طراحی جدولها و مثالهایی از هر کدام را در این مقاله بخوانید.
https://bit.ly/dxgn853
(زمان حدودی مطالعه: ۴ دقیقه)
نویسنده : ریحانه خدایی
#طراحی #رابط_کاربری #جدول
@Dexign فلسفه دیزاین
______
جدولها یکی از پرکاربردترین المانها در فضای طراحی دیجیتال هستند که در نگاه اول بسیار ساده به نظر میآیند، اما اگر ویژگیهای یک جدول چهارچوبهای طراحی آن را نشناسیم نمیتوانیم جدولهایی کارآمد طراحی کنیم.
مهمترین ویژگی یک جدول قابلیت تطبیقپذیری آن با اطلاعات متنوع است، به عنوان یک طراح باید انواع متغیرهای محتوا را در نظر گرفته و پیشبینی کنید.
ممکن است ورودیهای جدول طولی بیش از یک خط داشته باشند؟ دسترسی افراد مختلف به جدول یکسان است یا با توجه به نقش آنها باید متفاوت باشد؟ جدولها تا چه اندازه از محتوا را میتوانند در خود ذخیره کنند و بهترین شیوه برای نمایش آنها و اولویتبندیشان کدام است؟
ویژگی دیگر جدولها مانند هر محتوای دیگری در فضای دیجیتال قابلیت اسکن شدن آنهاست، محتوای جدولها باید در سریعترین زمان ممکن از هم تفکیک شوند. تفاوت حالت نمایش نام ستونها از محتوای درونی جدول و استفاده از دو پسزمینه مختلف برای ردیفها نیز به همین دلیل است.
ویژگی بعدی که باید به آن توجه کرد، تعاملی بودن عملکرد آنهاست. گاهی نیاز داریم عملکردهای مجازا برای هر ردیف یا ستون تعرف کنیم، مانند عمل حذف کردن یا ویرایش. در کنار آن کاربر نیاز دارد بتواند تعدادی از محتوای جدول به صورت یکجا تغییر دهد. هر یک از این تعاملها محدودیتها و نیازمندیهای مخصوص به خود را دارند که در طراحی باید در نظر گرفته شوند.
برای طراحی یک جدول کارآمد باید تمام این ویژگیها را در کنار هم در نظر بگیریم و فضاهایی منعطف، قابل فهم، قابل اسکن و تعاملی ایجاد کنیم. اصول جزییتر برای طراحی جدولها و مثالهایی از هر کدام را در این مقاله بخوانید.
https://bit.ly/dxgn853
(زمان حدودی مطالعه: ۴ دقیقه)
نویسنده : ریحانه خدایی
#طراحی #رابط_کاربری #جدول
@Dexign فلسفه دیزاین
______
Medium
Tips for designing modern tables
Every product designer encounters tables during work on a big product. User tables, product tables in e-commerce platforms, bill tables…
دیالوگهای Modal و Nonmodal
همانند مکالمهی بین دو انسان در رابط کاربری نیز کلمه دیالوگ به مکالمه و گفتوگوی بین سیستم و کاربر اشاره دارد و گاها نیازمند انجام عمل و یا دریافت اطلاعات از سوی کاربر است.
"دیالوگهای مدال "(Modal Dialogs) دیالوگهایی هستند که بر روی محتوای اصلی رابط کاربری ظاهر میشوند و سیستم را به حالت خاصی میبرند که نیازمند تعامل با کاربر است. این دیالوگها تا زمانی که کاربر با آنها تعامل را برقرار نکند، دسترسی به محتوای اصلی را کاملا قطع میکنند.
در مقابل "دیالوگهای غیر مدال "(Nonmodal Dialogs) محتوای اصلی را غیرفعال نکرده، تغییری در عملکرد سرویس ایجاد نمیکنند و کاربر همچنان میتواند به فعالیت خود و تعامل با محتوای اصلی رابط کاربری ادامه دهد.
هدف اصلی این مدالها هشدار به کاربران در هنگام رخدادن خطاها بود. در وضعیتی که سیستم باید سریعا به کاربر اطلاع رسانی و او را از اتفاق رخ داده آگاه میکرد. لذا در این شرایط قرار گرفتن یک باکس دیالوگ در مرکز کانون توجه کاربر بسیار میتوانست مفید واقع شود. بزرگترین مزیت این دیالوگهای مدال این بود که توجه کاربر را کاملا به خود جلب میکردند، او را آگاه و به او اجازه حل سریع مشکل و یا دریافت اطلاعات را میدادند.
معایب دیالوگهای مدال:
- نیاز به توجه فوری دارند
- جریان کاری و تعامل با رابط کاربری را قطع میکنند
- باعث میشوند کاربر فراموش کند که چه کاری را انجام میداده
- باعث ایجاد و جلب توجه کاربر به سمت یک هدف جانبی میشوند
- محتوای اصلی را در پسزمینه غیر قابل استفاده و غیرفعال میکنند
راههایی برای استفاده بهتر از دیالوگهای مدال:
- استفاده از آنها برای اطلاع رسانیهای مهم به کاربر
- برای دریافت اطلاعات از کاربر
- شکستن فرآیندی پیچیده به گامهای کوچکتر و سادهتر
- عدم استفاده از آنها برای اطلاعات غیرضروری و نامرتبط با تسک اصلی کاربر
- عدم استفاده در حین انجام یک عملیات پر ریسک مانند پرداخت اینترنتی
- عدم استفاده از دیالوگهای مدال برای تصمیمات پیچیده که اطلاعات زیادی را نیاز دارند
متن بالا خلاصهای بود از مقاله پیش رو در ارتباط با دیالوگهای مدال در طراحی رابط کاربری. برای مطالعه بیشتر و دریافت جزییات هر یک از مواردی که در متن بالا ذکر شد میتوانید متن کامل مقاله را از طریق لینک زیر بخوانید.
https://bit.ly/dxgn854
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده: رشید مسعودی
#دیالوگ #مدال #رابط_کاربری #UI #Modal #Dialog #UX
@Dexign فلسفه دیزاین
______
همانند مکالمهی بین دو انسان در رابط کاربری نیز کلمه دیالوگ به مکالمه و گفتوگوی بین سیستم و کاربر اشاره دارد و گاها نیازمند انجام عمل و یا دریافت اطلاعات از سوی کاربر است.
"دیالوگهای مدال "(Modal Dialogs) دیالوگهایی هستند که بر روی محتوای اصلی رابط کاربری ظاهر میشوند و سیستم را به حالت خاصی میبرند که نیازمند تعامل با کاربر است. این دیالوگها تا زمانی که کاربر با آنها تعامل را برقرار نکند، دسترسی به محتوای اصلی را کاملا قطع میکنند.
در مقابل "دیالوگهای غیر مدال "(Nonmodal Dialogs) محتوای اصلی را غیرفعال نکرده، تغییری در عملکرد سرویس ایجاد نمیکنند و کاربر همچنان میتواند به فعالیت خود و تعامل با محتوای اصلی رابط کاربری ادامه دهد.
هدف اصلی این مدالها هشدار به کاربران در هنگام رخدادن خطاها بود. در وضعیتی که سیستم باید سریعا به کاربر اطلاع رسانی و او را از اتفاق رخ داده آگاه میکرد. لذا در این شرایط قرار گرفتن یک باکس دیالوگ در مرکز کانون توجه کاربر بسیار میتوانست مفید واقع شود. بزرگترین مزیت این دیالوگهای مدال این بود که توجه کاربر را کاملا به خود جلب میکردند، او را آگاه و به او اجازه حل سریع مشکل و یا دریافت اطلاعات را میدادند.
معایب دیالوگهای مدال:
- نیاز به توجه فوری دارند
- جریان کاری و تعامل با رابط کاربری را قطع میکنند
- باعث میشوند کاربر فراموش کند که چه کاری را انجام میداده
- باعث ایجاد و جلب توجه کاربر به سمت یک هدف جانبی میشوند
- محتوای اصلی را در پسزمینه غیر قابل استفاده و غیرفعال میکنند
راههایی برای استفاده بهتر از دیالوگهای مدال:
- استفاده از آنها برای اطلاع رسانیهای مهم به کاربر
- برای دریافت اطلاعات از کاربر
- شکستن فرآیندی پیچیده به گامهای کوچکتر و سادهتر
- عدم استفاده از آنها برای اطلاعات غیرضروری و نامرتبط با تسک اصلی کاربر
- عدم استفاده در حین انجام یک عملیات پر ریسک مانند پرداخت اینترنتی
- عدم استفاده از دیالوگهای مدال برای تصمیمات پیچیده که اطلاعات زیادی را نیاز دارند
متن بالا خلاصهای بود از مقاله پیش رو در ارتباط با دیالوگهای مدال در طراحی رابط کاربری. برای مطالعه بیشتر و دریافت جزییات هر یک از مواردی که در متن بالا ذکر شد میتوانید متن کامل مقاله را از طریق لینک زیر بخوانید.
https://bit.ly/dxgn854
(زمان حدودی مطالعه: ۶ دقیقه)
نویسنده: رشید مسعودی
#دیالوگ #مدال #رابط_کاربری #UI #Modal #Dialog #UX
@Dexign فلسفه دیزاین
______
Nielsen Norman Group
Modal & Nonmodal Dialogs: When (& When Not) to Use Them
Modal dialogs interrupt users and demand an action. They are appropriate when user’s attention needs to be directed toward important information.
۵ نکته جذاب از کتاب «مثل یک هنرمند بدزد»
زمانی که در تنگناهای خلاقیت گیر میکنیم و به چهکنم چهکنم میافتیم، راهحلهایی وجود دارد که ازین شرایط عبور کنیم و به جریان دیزاین برگشته و کیفیت کار خود را بهتر کنیم. کتاب «مثل یک هنرمند بدزد» به نکات خوبی اشاره کرده است که با ۵ قسمت بااهمیت آن آشنا میشویم:
۱. الهامات خود را از هرجایی که میتوانید بدزدید.
- هر چیزی را گوگل کنید.
- جهان را از دریچهی اینکه «فلان چیز ارزش دزدی را دارد»، نگاه کنید تا بهترین آنها روی پروژهی خود به کار ببرید.
- تا میتوانید کپی کنید. این بدین معناست که شما در حال کندوکاو و پژوهش هستید.
- کاغذو قلم را بردارید و چیزهایی که ارزش یادآوری دارد را بکشید و یادداشت کنید (فقط به حافظه خود متکی نباشید).
۲. دست به کار شوید
- زمانی را به خودتان اجازه دهید که حوصلهتان سر رود و در اطرافتان سرگردان باشید، این موضوع باعث میشود که ایدههای جدیدی برای شما به ارمغان اورده شود.
- چیدمان فضای کاری خود را به ۲ نوع دیجیتالی (میز و لپتاپ) و آنالوگی (میز و کاغذوقلم) تقسیم کنید.
- محدودیتها بهترین راهنمای شما برای رسیدن به بهترین نتیجه هستند. به عنوان مثال به جای طراحی با چند رنگ، با یک رنگ آن کار را انجام دهید.
- تصور کنید که هنرمند محبوب شما در حال طراحیست، مثل او خلق کنید.
- پروژههای جانبی را شروع کنید، بسیار خلاقتر از قبل خواهید شد.
- هر روز یک اثر هنری کوچک خلق کنید. بعد ۳۶۵ روز، یک کتاب خواهید داشت.
۳. اثر خود را با دیگران به اشتراک بگذارید.
- کار خود را خلق کنید. اگر جالب یا مفید است، آن را به اشتراک بگذارید.
- به اشتراکگذاری «فرآیند» به اندازه نمایش نتیجه مهم است. بنابراین، علاوه بر نشان دادن آنچه انجام دادید، علت و چگونگی انجام آن را نیز به اشتراک بگذارید.
۴. افراد الهام بخش را بشناسید
- با افراد آنلاین ملاقات کنید. از طریق اینترنت، میتوانید با افراد زیادی در جهان ارتباط برقرار کنید که ممکن است به شما الهام بخش در کار یا زندگی باشند.
- شخص الهامبخش خود را پیدا کنید. سپس نامهای طرفداری برای او بنویسید. اما برای پاسخ آن هیچ انتظاری نداشته باشید.
- شخصی را پیدا کنید که به شما الهام ببخشد. همچنین، افرادی را بشناسید که الگوی (Role Model) شما از آنها الهام گرفته است. با فهمیدن اینکه الگوی شما چه کسی را تحسین میکند، در مییابید که آنها چگونه این شخصی که هستند، شدند. و همچنین گروهی از افرادی را پیدا کنید که میتوانید از آنها بیاموزید.
- دوستان، همراهان و همکاران خود را از بین افرادی انتخاب کنید که الهامبخش هستند. و با آنها ازدواج هم بکنید 😁
۵. روحیهی خود را بالا نگه دارید.
- با جمعآوری تمجیدها از دیگران، نقاط قوت خود را میشناسید و هر بار که آنها را مرور میکنید احساس خوشحالی میکنید.
- آنچه را که میخواهید در روز به دست آورید، برنامهریزی کنید و سعی کنید تیک انجام آن را علامت بزنید. با گذشت زمان، هدف شما بیشتر از آنچه انتظار داشتید قابل دستیابی خواهد بود.
- ادای اعتماد به نفس و شایستگی را در بیاورید. همراه با یک طرز فکر خوشبینانه، یک روزی به آن چیزی که تقلید میکردید، میرسید. (Fake it till you make it)
- حتما به سرگرمیهای خود برسید. آنها شما را کامل میکنند.
- همهی ما ضربالاجلهای مشخصی داریم، کاری را که دوست دارید انجام دهید.
مقالهی زیر را باز کرده و ایلاستریشنهای سادهی آن را ببینید، در درک بهتر موارد بالا کمککنندهست:
https://bit.ly/dxgn855
(زمان حدودی مطالعه مقاله: ۸ دقیقه)
نویسنده: حسین میرزاده
#تقلید #کپی #خلاصه_کتاب #خلاقیت
@Dexign فلسفه دیزاین
_______
زمانی که در تنگناهای خلاقیت گیر میکنیم و به چهکنم چهکنم میافتیم، راهحلهایی وجود دارد که ازین شرایط عبور کنیم و به جریان دیزاین برگشته و کیفیت کار خود را بهتر کنیم. کتاب «مثل یک هنرمند بدزد» به نکات خوبی اشاره کرده است که با ۵ قسمت بااهمیت آن آشنا میشویم:
۱. الهامات خود را از هرجایی که میتوانید بدزدید.
- هر چیزی را گوگل کنید.
- جهان را از دریچهی اینکه «فلان چیز ارزش دزدی را دارد»، نگاه کنید تا بهترین آنها روی پروژهی خود به کار ببرید.
- تا میتوانید کپی کنید. این بدین معناست که شما در حال کندوکاو و پژوهش هستید.
- کاغذو قلم را بردارید و چیزهایی که ارزش یادآوری دارد را بکشید و یادداشت کنید (فقط به حافظه خود متکی نباشید).
۲. دست به کار شوید
- زمانی را به خودتان اجازه دهید که حوصلهتان سر رود و در اطرافتان سرگردان باشید، این موضوع باعث میشود که ایدههای جدیدی برای شما به ارمغان اورده شود.
- چیدمان فضای کاری خود را به ۲ نوع دیجیتالی (میز و لپتاپ) و آنالوگی (میز و کاغذوقلم) تقسیم کنید.
- محدودیتها بهترین راهنمای شما برای رسیدن به بهترین نتیجه هستند. به عنوان مثال به جای طراحی با چند رنگ، با یک رنگ آن کار را انجام دهید.
- تصور کنید که هنرمند محبوب شما در حال طراحیست، مثل او خلق کنید.
- پروژههای جانبی را شروع کنید، بسیار خلاقتر از قبل خواهید شد.
- هر روز یک اثر هنری کوچک خلق کنید. بعد ۳۶۵ روز، یک کتاب خواهید داشت.
۳. اثر خود را با دیگران به اشتراک بگذارید.
- کار خود را خلق کنید. اگر جالب یا مفید است، آن را به اشتراک بگذارید.
- به اشتراکگذاری «فرآیند» به اندازه نمایش نتیجه مهم است. بنابراین، علاوه بر نشان دادن آنچه انجام دادید، علت و چگونگی انجام آن را نیز به اشتراک بگذارید.
۴. افراد الهام بخش را بشناسید
- با افراد آنلاین ملاقات کنید. از طریق اینترنت، میتوانید با افراد زیادی در جهان ارتباط برقرار کنید که ممکن است به شما الهام بخش در کار یا زندگی باشند.
- شخص الهامبخش خود را پیدا کنید. سپس نامهای طرفداری برای او بنویسید. اما برای پاسخ آن هیچ انتظاری نداشته باشید.
- شخصی را پیدا کنید که به شما الهام ببخشد. همچنین، افرادی را بشناسید که الگوی (Role Model) شما از آنها الهام گرفته است. با فهمیدن اینکه الگوی شما چه کسی را تحسین میکند، در مییابید که آنها چگونه این شخصی که هستند، شدند. و همچنین گروهی از افرادی را پیدا کنید که میتوانید از آنها بیاموزید.
- دوستان، همراهان و همکاران خود را از بین افرادی انتخاب کنید که الهامبخش هستند. و با آنها ازدواج هم بکنید 😁
۵. روحیهی خود را بالا نگه دارید.
- با جمعآوری تمجیدها از دیگران، نقاط قوت خود را میشناسید و هر بار که آنها را مرور میکنید احساس خوشحالی میکنید.
- آنچه را که میخواهید در روز به دست آورید، برنامهریزی کنید و سعی کنید تیک انجام آن را علامت بزنید. با گذشت زمان، هدف شما بیشتر از آنچه انتظار داشتید قابل دستیابی خواهد بود.
- ادای اعتماد به نفس و شایستگی را در بیاورید. همراه با یک طرز فکر خوشبینانه، یک روزی به آن چیزی که تقلید میکردید، میرسید. (Fake it till you make it)
- حتما به سرگرمیهای خود برسید. آنها شما را کامل میکنند.
- همهی ما ضربالاجلهای مشخصی داریم، کاری را که دوست دارید انجام دهید.
مقالهی زیر را باز کرده و ایلاستریشنهای سادهی آن را ببینید، در درک بهتر موارد بالا کمککنندهست:
https://bit.ly/dxgn855
(زمان حدودی مطالعه مقاله: ۸ دقیقه)
نویسنده: حسین میرزاده
#تقلید #کپی #خلاصه_کتاب #خلاقیت
@Dexign فلسفه دیزاین
_______
Medium
5 things you can do to boost your creativity
Practical tips from Steal Like an Artist
👍1