بهترین روش‌ها برای طراحی کارت‌های رابط کاربری

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

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

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

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

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

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

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

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

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

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

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

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

🔗 برای مطالعه ادامه مقاله می‌توانید به این لینک مراجعه کنید.

(زمان حدودی مطالعه: ۸ دقیقه)

گردآورنده: امیرحسین معظمی

#رابط_کاربر #کارت
#UI

@Dexign فلسفه دیزاین

______

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

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

بگذارید این موضوع را از طریق موسیقی توضیح دهم

از اوایل بیست‌سالگی، اشتیاق زیادی برای خلق موسیقی داشتم. بالاخره فرصتی پیش آمد تا به ساخت استودیو موسیقی در آپارتمان جدید دوستم جاستین کمک کنم. دانش من محدود بود، اما هیجان من نامحدود بود، بنابراین با کمال میل قبول کردم. و به مدت ۴ ماه، من به عنوان تنها تولیدکننده در استودیو ۸ تا ۱۶ ساعت در روز کار کردم و هشت آهنگ کامل منتشر کردم. (به طور متوسط ۴۰ ساعت کار برای هرکدام)

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

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

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

🔗 برای مطالعه ادامه مقاله می‌توانید به این لینک مراجعه کنید

(زمان حدودی مطالعه: ۵ دقیقه)

گردآورنده: مجتبی زینوند

#دیزاین #طراحی_محصول
#product_design

@Dexign فلسفه دیزاین

______

تفکر طراحی چیست؟

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

پنج مرحله اصلی تفکر طراحی

1. همدلی (Empathize): جمع‌آوری اطلاعات درباره کاربران از طریق مصاحبه‌ها و مشاهدات برای درک نیازها و مشکلات آن‌ها.

2. تعریف (Define): تحلیل بینش‌های به‌دست‌آمده از مرحله همدلی برای تعریف واضح نیازها و چالش‌های کاربران.

3. ایده‌پردازی (Ideate): تولید مجموعه‌ای از ایده‌ها و راه‌حل‌ها بر اساس نیازها و مشکلات تعریف‌شده.

4. نمونه‌سازی (Prototype): توسعه نسخه‌های ساده و قابل آزمایش از ایده‌ها برای بررسی قابلیت‌های آن‌ها.

5. آزمایش (Test): ارزیابی نمونه‌ها با کاربران واقعی، جمع‌آوری بازخورد و تجدید نظر بر اساس بینش‌های به‌دست‌آمده.

چند ویژگی این تفکر

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

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

منابع و یادگیری بیشتر

برای کسب اطلاعات بیشتر درباره تفکر طراحی و کاربردهای عملی آن، لینکدین و کانال یوتیوب AJ&Smart را دنبال کنید و همچنین منابعی مثل "راهنمای نهایی مبتدیان برای تفکر طراحی" را بررسی کنید.

🔗 برای مشاهده ویدئو می توانید به این لینک مراجعه کنید.

(زمان ویدئو: ۱۰ دقیقه)

گردآورنده : فاطمه حیدری

#تفکر_طراحی

@Dexign فلسفه دیزاین

______

طراحی برای سادگی

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

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

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

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

🔗 برای مشاهده این تدتاک به «لینک» مراجعه کنید.

(مدت زمان ویدئو : ۱۶ دقیقه)

گردآورنده : رها کاوه

#دیزاین #طراحی_محصول
#product_design

@Dexign فلسفه دیزاین

______

روان‌شناسی طراحی رفتاری برای طراحان UX

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

برایان سپس به عصب‌شناسی انگیزه احساسی می‌پردازد و بیان می‌کند که احساسات و انگیزه‌ها به‌طور ذاتی با یکدیگر مرتبط هستند. احساسات رفتار را هدایت می‌کنند و درک این ارتباط به طراحان کمک می‌کند تا محصولات مؤثرتری ایجاد کنند. او اهمیت طراحی احساسی را مورد تأکید قرار می‌دهد و بیان می‌کند که علم عصب‌شناسی مدرن از مفاهیم قبلی فراتر رفته و استراتژی‌های جدیدی برای انگیزش کاربران و ایجاد وفاداری بلندمدت ارائه می‌دهد.

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

برای مشاهده ویدئو می توانید به این لینک مراجعه کنید.

(زمان ویدئو: ۱۹ دقیقه)

گردآورنده: فاطمه حیدری

#تفکر_طراحی #روانشناسی

@Dexign فلسفه دیزاین

______

پروتو پرسونا در مقابل پرسونا
من به تازگی خواندن کتاب User Experience Team Of One از Leah Buley را تمام کرده‌ام. اینجا بود که با اصطلاح پروتو پرسونا آشنا شدم.
اگر کسی در خیابان از من می‌پرسید "پرسونا چیست؟" احتمالاً به او می‌گفتم که روشی شیک برای بیان شخصیت است. با این حال من اشتباه می‌کردم!
در دانشگاه در مورد بسیاری از روش‌های تحقیق تجربه کاربر به ما آموزش داده شد و زمان زیادی را صرف استفاده از پرسونا در پروژه‌های خود کردیم. با این حال هرگز در مورد پروتو پرسونا به ما آموزش داده نشد. اکنون دو سال از زمان دانشگاه می‌گذرد، بدیهی است که اصول زیادی در دنیای تجربه کاربری تغییر کرده و من مدتی را صرف یافتن روش‌های جدیدتر می‌کنم.

اولاً برای کسانی که اطلاعاتی در مورد پرسونا ندارند؛ به عبارت ساده، پرسونا فقط یک شخصیت خیالی است...
این شخصیت خیالی نماینده مخاطب هدف شما خواهد بود و معمولاً از نتایج تحقیقات ایجاد می‌شود.
پرسونا برای مدت طولانی در دنیای تجربه کاربری وجود داشته است در‌حالی‌که (حداقل برای من) پروتو پرسوناها نسبتاً جدید هستند.
من دوست دارم فکر کنم که اگر پروتو پرسونا یک سیستم نرم‌افزاری باشد، فقط نسخه‌ لایتِ پرسونا خواهد بود. بنابراین بیایید یک نگاه سریع به تفاوت‌ها بیاندازیم:

ویژگی‌های کلیدی پروتو پرسونا:• شخصیت غیرتحقیق‌محور
• تک کاره
• وفاداری کمتر نسبت به پرسونا

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

آیا یک پرسونا و یک پروتو پرسونا متفاوت هستند؟

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

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

🔗 برای مطالعه ادامه مقاله می‌توانید به این لینک مراجعه کنید

(زمان حدودی مطالعه: ۵ دقیقه)

گردآورنده: مجتبی زینوند

#ux #user_research #persona
#تجربه_کاربر #پرسونا

@Dexign فلسفه دیزاین

______

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

https://dexignresources.com/

@Dexign فلسفه دیزاین

______