https://virgool.io/feed/@sepehranbabaeii در درجه اول یک متفکر محصول در قالب طراح محصول هستم با ذهنت build in public fa 2026-04-15 04:46:30 https://files.virgool.io/upload/users/3173552/avatar/avatar.png?height=120&width=120 https://virgool.io/@sepehranbabaeii https://virgool.io/@sepehranbabaeii/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DA%AF%D8%B1%D9%88%D9%87-%D8%AF%DA%A9%D9%85%D9%87-%D9%87%D8%A7%DB%8C-%D8%AF%D8%B1-%D8%AF%DB%8C%D8%B2%D8%A7%DB%8C%D9%86-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-lkihvvmheuu5 نزدیک به ۶ سال تجربه طراحی که دارم در پروژه های متعدد از دکمه های استفاده کرده ام. دکمه‌ها از عناصر اصلی طراحی رابط کاربری و طراحی design system نیز می باشد. گاهی در این میان به جزییات گروه دکمه های مورد نیاز که برای طراحی و دسترسی پذیری را تحت پوشش قرار دهد پرداخته نشده است که در ادامه به یک سری نکات در این رابطخ رسیدم و در این نوسته قصد دارم ان‌ها را معرفی و در موردشون صحبت کنیم.اشتباهات رایج در طراحی دکمه هادر اکثر دیزاین سیستم طراحی دکمه ها به ۳ سطح تقسیم می‌شوند که بر اساس میزان اهمیت انها را نمایش می‌دهد که شامل موارد زیر می‌شوند :اولیه - primaryثانویه - secondaryدرجه سوم یا ثالث - tertiaryحالا در ادامه بر اساس استاندارد WCGA 2.0 انواع گروه دکمه های زیر را بررسی می‌کنیم :۱- گروه دکمه شماره یکمیزان کانتراست بر اساس استاندادر WCGA برای دکمه‌ها، تب‌ها و فیلد‌های فرم باید نسبت حداقل ۳:۱(بخوانید ۳ به یک) باشد تا افراد مبتلا به اختلال بینایی مشکلی برای برقراری ارتباط با رابط کاربری نداشته باشند.در مثال بالا؛ نسبت کنتراست متن به بک گراند در دکمه ثانویه کمتر از ۳:۱ می‌باشد که این نسبت، دسترسی پذیری، افراد کم‌بینا را دچار مشکلاتی در هنگام استفاده از محصول می‌کند.۲- گروه دکمه شماره دومشکلات این گروه شامل موراد زیر است :حالت ثانویه چون در پاساژ رنگی خاکستری است حالت غیر فعال را برای کاربر تداعی می‌کند.مقدار border حالت ثانویه بر اساس استاندارد WCGA کمتر از ۳:۱ است.کانتراست رنگ متن بر اساس استاندار WCGA کمتر از ۴.۵:۱ است.۳- گروه دکمه شماره سهمشکلات این گروه دکمه های اشمل موارد زیر می‌باشد :شباهت دکمه‌های اولیه و ثانویه باعث سردرگمی کاربران می‌شود و تنظیم و تعیین سلسله مراتب بصری را برای طراح، دچار مشکلاتی‌‌ می‌کند.تنها تفاوت دو حالت اولیه و ثانویه در رنگ‌انهاست که دسترسی پذیری برای افراد دارای اختلال کوررنگی را دچار مشکل می‌کند.۴- گروه دکمه شماره چهاراین گروه دکمه مشکلات زیر را دارد :دکمه‌های حالت اولیه و ثانویه به دلیل سبک طراحی مشابه و عدم کنتراست باهم تضاد دارند.نسبت کنتراست متن به بک گراند در حالت ثانویه کمتر از 4.5:1 است.حالت ثانویه چون شامل رنگ خاکستری می‌باشد ممکن است که حالت غیرفعال را برای کاربر تداعی کند.۵- گروه دکمه شماره پنجدکمه‌های این گروه بیش از حد مشابه‌ هستند و تشخصی تمایز و میزان اهمیت دکمه‌ها برای کاربران بسیار دشوار هستند و تنظیم سلسله مراتب بصری در رابط کاربری با این گروه دکمه‌ها دشوار می‌باشد.تنها تفاوت بین این دکمه ها کنتراست بین ان‌هاست.۶- گروه دکمه شماره ششمشکلات این گروه شامل موراد زیر می‌باشد :تفاوت این دکمه‌ها تنها در کنتراست رنگ‌هاست و تشخیص تفاوت انها برای کاربران بسیار دشوار است.نسبت کانتراست دکمه سوم کمتر از ۳:۱ است.۷- گروه دکمه شماره هفتمزمانی که در مورد دسترسی صحبت‌ می‌کنیم نباید تنها به تفاوت رنگ‌ها تکیه کنیم افرادی که دچار اختلال بینایی هستند این تفاوت را به سختی متوجه می‌شوند.حالت سوم این گروه دکمه‌ نیز دسترسی پذیری مطلوبی ندارد چون تنها به تفاوت رنگ تکیه کرده است. افرادی که دارای محدودیت‌های بینایی هستند در هنگام تعامل با محصول دچار مشکلات و سردرگمی‌هایی خواهند شد.۸- گروه دکمه شماره هشتمهر جزییات طراحی رابط کاربر هدف منطقی را دنبال می‌کنند و یک از اصول طراحی پایداری ان طرح است و نباید طراحی‌ها و اشکال متعددی را برای کاربر ایحاد کنند چون کاربر در مواجه شدن با آن ،حس می‌کند که هدف تغییر کرده است!! پس با تغیر اشکال، کاربران دچار سردرگمی می‌شوند.۹- گروه دکمه شماره نهمسلسله مراتب بصری نحوه ارتباط ما با اهمیت نسبی عناصر رابط است این میزان اهمیت به کاربران در هنگام تصمیم گیری کمک می‌کنند.مشکلات این گروه شامل موراد زیر می‌باشد :سلسله مراتب بصری نامشخص است زیرا دکمه اولیه و ثانویه وزن و برجستگی مشابهی دارند.نسبت کانتراست ثانویه کمتر از ۳:۱ است.نکات طراحی گروه دکمه‌هابا بررسی نمونه‌های بالای نکته‌های زیر را مرور می‌کنیم :گروه دکمه‌ها باید سلسله مراتب بصری مشخصی داشته باشند تا میزان اهمیت ان عنصر کاملا برای کاربران مشخص باشددکمه‌ها برای دسترسی پذیری بیشتر نباید تنها به رنگ‌ها متکی باشند.نسبت کانتراست دکمه‌ها باید حداقل ۳:۱ باشند.گزینه امن برای تعیین گروه دکمه‌های بهتردر مثال بالا، سلسه مراتب بصری دکمه‌ها کاملا مشخص هستند، دسترسی پذیری مناسبی دارد و وابسته به رنگ‌ها نیست.در ادامه به برخی گروه‌ دکمه‌ها در وب‌سایت اشاره‌ می‌کنیم :در تصویر بالا میزان اهمیت دکمه‌ها مشخص نیست و ان‌را به تصویر پایین مقایسه کنید : Sepehran Babaei Sepehran Babaei Thu, 06 Jun 2024 12:05:37 +0330 https://virgool.io/@sepehranbabaeii/%D8%A7%D8%B5%D9%88%D9%84-ui-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DB%B2%DB%B0%DB%B2%DB%B4-eii7lzcjm9ha در دنیای دیجیتال امروزی کاربران روزانه با اپلیکیشن و وب سایت‌های بی شماری در تعامل هستند در نتیجه طراحی رابط کاربری از حالت لوکس بودن خارج شده است و یک ضرورت برای سازمان‌ها محسوب می‌شود.اصول طراحی مجموعه‌ایی از دستورالعمل‌های اساسی که طراحان با کمک انها توانایی طراحی رابط کاربری که هم از نظر زیبایی‌شناختی دلپذیر هستند بلکه از نظر قابل استفاده بودن نیز آسان و ساده باشند نیز تحت شعاع این دستورالعمل‌ها قرار می‌گیرد.طراحان با رعایت این دستورالعمل‌ها می‌توانند رابط کاربری ساده برای کاربران طراحی کنند و تضمین کنند که کاربران در مسر رسیدن به هدفشان در محصول تجربه مثبت و لذت بخشی را طی می‌کنند.در ادامه به مهمترین اصول طراحی رابط کاربری اشاره می‌کنیم:۱- اصل سازگاری ( Consistency )سنگ بنای هر طراحی رابط کاربری، سازگاری است که یک مدل ذهنی منسجم برای کاربران در محصول بوجود می‌اورد تا کاربران به راحتی و بدون زحمت بین صفحات و منو‌های محصول یا سرویس حرکت کنند.به عباری، سازگاری تضمین می‌کند که کاربر بصورت متمرکز درهر مسیر یک هدف را پیروی می‌کند و طوری نیست که در هر نقطه یک هدف یا وظیقه را انجام دهد و از طرفی ابهامات موجود در سیستم را رفع می‌کند.Consistency۲- اصل Visibilityاین اصل می‌گوید که هر تصویر بصری باید به راحتی قابل فهم باشد و کاربر به راحتی بتواند ان را درک و کشف کند و باید انتخاب و چیدمان عناصر همراه با برچسب‌های واضح و مختصر با تضاد رنگ مناسب رعایت کنیم.بر اساس این اصل تصاویر متفاوت و غیرضروری توجه کاربر از اهداف اصلی منحرف می‌کند و از استفاده این عناصر خودداری کرد. اصل Visibility۳- اصل بازخورد ( Feedback )یک طراحی محصول خوب بر اساس اکشن یا اقدامات کاربر پاسخ مناسبی را به کاربر ارائه می‌دهد حالا این پاسخ ممکن است تغییر رنگ یا نمایش جلوه بصری یا متنی و حتی تولید صوت مرتبط باشد.۴- اصل سادگی ( Simplicity )حفظ سادگی در رابط کاربری، کلید محصولی کاربر پسند می‌باشد. این اصل از چیدمان‌های نامنظم و نامرتب جلوگیری می‌کند تا تمرکز کاربر از هدف اصلی منحرف نشود.۵- اصل ترازی ( Alignment ) چیدمان عناصر باید به گونه ایی باید تراز شوند که حس نظم به کاربر انتقال دهد. تا سلسله مراتب بصری به درستی ایجاد گردد تا کاربران در حال اسکن محتوای صفحه وب سایت بتواند روابط بین عناصر را به راحتی متوجه شود.۶- اصل کنتراست ( Contrast ) برای برجسته کردن عناصرهای بصری و ایجاد سلسله مراتب استفاده از کنتراست امری حیاتی است. از رنگ‌ها و تایپوگرافیکی و فاصله‌ها برای ایحاد کانتراست استفاده کنید.۷- اصل گرید ( Grids ) برای ایجاد طرح بندی استفاده از ابزار گرید استفاده می‌شود که طراحی شما متعادل، سازگار و پاسخگو اقدامات کاربران باشد. استفاده از گرید‌ها تضمین می‌کند که عناصر هم‌تراز و در فاصله‌های صحیح باشند.۸- اصل سلسله مراتب ( Hierarchy ) با کمک این اصل چیدمان ترتیب اهمیت عناصر را می‌توانیم سامان‌دهی کنیم. با کمک کنتراست رنگ‌ها، تایپوگرافی، فاصله بدست می‌اید.با کمک این اصل می‌توان توجه کاربران را به سمت عناصر مهم‌تر معطوف کنیم و اقدامات کاربران را هدایت کنیم.نتیجه گیری :با رعایت این ۸ اصل اساسی در طراحی می‌توانید رابط کاربری طراحی کنید که علاوه بر زیبایی شناختی یک تجربه لذت بخش هم برای کاربران فراهم کنید و به یاد داشته باشید که هدف طراحی، رسیدن کاربر به اهداف خود به شیوه ایی روان و ساده و کارآمد است. Sepehran Babaei Sepehran Babaei Sat, 27 Apr 2024 08:38:20 +0330 https://virgool.io/@sepehranbabaeii/%DB%B8-%D8%A7%D9%81%D8%B2%D9%88%D9%86%D9%87-%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1-%DA%A9%D8%B1%D9%88%D9%85-%DA%A9%D9%87-%D9%87%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%AF%D8%A7%D8%B4%D8%AA%D9%87-%D8%A8%D8%A7%D8%B4%D9%86%D8%AF-zon5fxeyxy6i افزونه‌ها، ابزارهایی کوچکی هستند که بهره‌وری شما را افزایش دهد و باعث افزایش خلاقین شما شود تا طراحی حرفه‌ایی تری را طراحی کنید. در ادامه به ۸ افزونه رایگان مرورگر کروم اشاره می‌کنیم.با کمک این افزونه ها می‌توانید منابع الهام‌بخش خود را تهییه کنید و دقیق تر و حرفه ایی تر دیزاین کنید و فیدبک‌ها و انتقادات دریافتی طرح خود را بهتر مدیریت کنید.۱- ابزار Eye Dropperتا حالا براتون پیش اومده که رنگ خاصی را در وب سایتی ببنید و پاساژ رنگی خود را با ان انتخاب کنید. با این افزونه می‌تواند کد رنگ خاص وب سایت مورد نظر را با یک کلیک دریافت کنید.لینک افرونه https://chromewebstore.google.com/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?source=post_page-----572ce085dc61-------------------------------- ۲- ابزار Material Design Palettesگاهی پیش اومده که نیاز به پالت رنگی ساده و اسان داشته باشید ؟ این افزونه یکی از بهترین گزینه‌های موجود برای شماست که در کتابخانه بزرگی در اختیار دارد از طرح‌های رنگی پیش ساخته شده را ارایه می‌دهد که از دستورالعمل‌های متریال گوگل پیروی می‌کند.این ابزار، زیبایی، آسانی استفاده و دسترسی پذیری را تضمین می‌کند.اینک افزونه https://chromewebstore.google.com/detail/design-palette/nmjnpjkmmhbgannednjlojkcocaginoc?source=post_page-----572ce085dc61-------------------------------- ۳- ابزار Nimbus Captureاسکرین شات یکی از ابزارهایی طراحان است که از نان و اب هم برای انها ضروری‌تر است، گاهی نیازه در فرایند طراحی از بنج مارک‌ها تا بررسی نتایج به این شات‌ها همیشه نیاز است.این افزونه به شما کمک میکنه که از صفحات با بخش‌هایی خاص وب‌سایت‌ها، اسکرین شات بگیرین یا ویدیو رکورد کنید حتی می‌توانید صدای خود را در هنگام رکورد ثبت کنید. برای اسکرین‌های خود حاشیه در حاشیه یادداشت کنید و انها را بصورت یکپارچه و منظم به هم تیمی‌ها و سایر افراد نمایش دهید.لینک افزونه https://chromewebstore.google.com/detail/nimbus-screenshot-screen/bpconcjcammlapcogcnnelfmaeghhagj ۳- ابزار UX Checkایا پیش اومده که با اعضای تیم طراحی در حال مشترک کار باشید؟ این افزونه یک راه نجات برای شماست تا کمک کند تغییرات طراحی اعضای تیم طراحی خود را بصورت یکپارچه در یک فایل ذخیره و ادغام کنید.یه چیزی مث کامیت‌هایی که افراد تیم فنی توی کد‌هاشون انجام می‌دهند عمل میکنه که نحوه استفاده این ابزار بر اساس سیستم پلنینگ شما باید صوت گیرد.لینک افزونه https://chromewebstore.google.com/detail/ux-check/giekhiebdpmljgchjojblnekkcgpdobp?source=post_page-----572ce085dc61-------------------------------- ۵- ابزار WhatFontتا حالا پیش اومده که وارد وب‌سایتی شوید و با فونت خیره کننده مواجه بشیم به هر هدفی نیاز به اون داشته باشید دسترسی به اون فونت داشته باشید. این فونت میتونه با هاور کردن اون نوشته، اطلاعات اون فونت رو در اختیارتون میزاره و خانواده فونت رو بهتون معرفی می‌کنهلینک افزونه https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm ۶- ابزار Site Paletteاگر طراح رابط کاربری هستید طبیعتا. دنبال منبع الهامی برای انتخاب رنگ‌ها طراحی خود هستید این افزونه منبع بسیار مناسبی برای شماست که با انتخاب هر رنگی پالت رنگی مرتبط با ان را به شما پیشنهاد می‌دهد و کد رنگ‌های RGB و هگز را در اختیارتان قرار می‌دهد.لینک افزونه https://chromewebstore.google.com/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh ۷- ابزار Loomگاهی یک ویدیو سریع، هزار کلمه را دارد. این ابزار به شما امکان ضبط فرایند طراحی را می‌دهد، می‌توانید داستان طراحی هود را رکورد کنید و انرا با سایرین به اشتراک بگذارید.این ابزاری مفید برای هم صفحه شدن با هم تیمی‌ها خود در قالب ویدیو‌های کوتاه را فراهم می‌کند و یا اشتراک ویدیو با ذی نفعان پروژه یا مشتریان شمارا فراهم می‌کندلینک افزونه https://chromewebstore.google.com/detail/loom-%E2%80%93-screen-recorder-sc/liecbddmkiiihnedobmlmillhodjkdmb ۸- ابزار html.to.designبا کمک این ابزار می‌توانید هر وب سایتی در که در مرورگر خود مشاهده می‌کنید را به نسخه‌ایی قابل تدوین برای ابزار فیگمای خود تبدیل کنید تا فرایند طراحی شما ساده‌تر شود.لینک افزونه https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed Sepehran Babaei Sepehran Babaei Wed, 24 Apr 2024 13:33:35 +0330 https://virgool.io/@sepehranbabaeii/%D9%86%D8%B3%D8%A8%D8%AA-%D8%B7%D9%84%D8%A7%DB%8C%DB%8C-golden-ration-%D8%AF%D8%B1-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-pom2yqjewi6t زمانی که در مورد نسبت طلایی صحبت می کنیم معمولا اون دایره معروف نسبت‌ها(تصویر زیر) به ذهنمان می‌اید یا یاد تصاویر و قوانین عکاسی می‌افتیم و بصورت کلی در نسبت طلایی تلاش می‌کنیم که توجه و تمرکز کاربر رو به یک نقطه سوق بدیم.تاریخچه نسبت طلایی اگر موافق باشین یه اشاره ریز به تاریخچه نسبت طلایی کنیم ( چون برای خود من استوری اتفاقات خیلی جذابه).نسبت طلایی قرن‌ها در زمینه‌های مختلف مثل هنر، معماری و طراحی مورد استفاده قرار گرفته است که برای اولین بار در حدود ۵۰۰ سال قبل از میلاد توسط اشخاصی مانند افلاطون و فیدیاس و بعد‌ها اقلیدس مطرح شده که با نام‌های متعددی به این مفموم اشاره شده است مثل میانگین طلایی ( Golden Mean) ، نسبت طلایی ( Golden Ratio)، بخش طلایی ( Golden Section) و نسبت الهی ( Divine proportion) .و نماد نسبت طلایی رو با فی ( Phi - ϕ) می‌شناسیم.و بصورت ریاضی مقدارش برابر با فرمول x² = x + 1 است و مقدار تقربیش 1.61803398874989482045 میشه.چرا اصلا نسبت طلایی مهمه بر اساس گزارش مجله Artsper نسبت طلایی به‌عنوان قانون مهم در هنر عمل می‌کند و یک رابطه متعادل دوست داشتی برای چشم و ذهن انسان در تصاویر ایجاد می‌کنه و مظهری از زیبایی‌شناسی و تناسب و هماهنگ و زیبایی است.مزایای استفاده از نسبت طلایی در Ui/Ux۱- هارمونی بصری ( Visual Harmony) :نسبت طلایی به ایجاد تعادل در چیدمان عناصر در رابط کاربری منجر میشه یعنی کمک میکنه که فاصله‌ها و نسبت ها و ... رو طوری کنارهم قرار بدیم که حس هماهنگی و انسجام در طراحی برای کاربران فراهم می‌کنه و در عین حال تمرکز کاربر رو هم به نقطه مورد نظر معطوف میکنه.۲- نسبت‌های طلایی انسان ( Natural Human Proportions ) :نسبت‌های طلایی در طبیعت یا بدن انسان هم از قانون نسبت طلایی پیروی می‌کنه و وجود این قانون باعث بوجود اومدن، حس آشنایی و زیبایی کاربران نسبت به طراحی ایجاد می‌کنه.۳- سلسله مراتب و تمرکز ( Hierarchy and Focus ) :نسبت طلایی نقریبا مشابه به قانون فیبونانچی است که هر عدد از مجموع دو عدد قبلی بدست می‌اید ( ۰، ۱، ۱، ۲، ۳، ۵، ...). این توالی هم در طبیعت رایج است و روی الگو‌های چینش مارپیچی برگ‌ها و حیوانات هم مشاهده می‌شود و در نتیجه، به ایجاد یک سلسله مراتب واضح کمک می‌کنه و توجه کاربر را به نقطه کانونی هدایت‌ می‌کنه.۴- تاثیر روانی ( Psychological Impact ) :بر اساس مطالعات و مقالات طراحی‌هایی که بر اساس نسبت طلایی انجام شده‌اند، توانایی پاسخی همراه با احساس مثبت برای نیاز‌ها و انتظارات کاربران فراهم کنند. که باعث افزایش رضایت کاربر و تعامل بیشتر با اون طراحی می‌شود.چگونه نسبت طلایی را در طراحی خودمون استفاده کنیمدر ابتدا به تصویر زیر دقت کنید در تصویر بالا نسبت طلایی به یک مستطیل اعمال شده است که ۶ ناحیه ۱، ۲، ۳، ۴، ۵، ۶ بوجود می‌اید و داخل هر ناحیه یک قوس از ابتدا به انتها اون مربع کشیده می‌شود حالا اندازه طول و ارتفاع هر مربع رو توی ادامه اشنا میشیم که چطوری به دست بیاریم ( با یه مثال پایین‌تر بهش اشاره کرده)نسبت طلایی در تایپوگرافیبا ضرب اندازه پایه فونت سایز تایپوگرافی ( Font base size) در عدد ۱.۶۱۸ (همون مقدار phi ) میتوان سلسله مراتب تایپوگرافی خودتون رو حساب کنید و یه یه نظم و انسجام و سلسه مراتب محتوایی منظم و اشنا برای کاربر فراهم کنید. که نمونه اونو در تصویر پایین مشاهده کنیدنسبت طلایی در چیدمان عناصرابتدا باید طول طراحی خود را استخراح کنید مثلا 1062باشد حالات این مقدار رو تقسیم 1.618 میکنیم که عدد ۶۵۶.۳۷ که رندش کنیم ۶۵۶ میشه این عرض اسکرین شما خواهد بود. حالا برای سایر ناحیه‌ها هم ارتفاع اینگونه بدست می‌اید.اگه توی تصویر بالا کمی دقت کنیم طول ما ۱۰۶۲ پیکسل است که تقسیم بر ۱.۶۱۸ میشه ۶۵۶ .اون ناحیه ابی کمرنگ تر ( ناحیه ۲) طولش میشه ارتفاع قبلی (۶۵۶) که اگه نقسیم بر ۱.۶۱۸ میشه .۶۷۴۰۵ یعنی ارتفاع ابی میشه ۴۰۶ ( گرد به به بالا میشه)اون ناحیه ابی پررنگ طولش که همون ۶۵۶ هست ارتفاعش هم از تفریق ۶۵۶ بر ارتفاع ناحیه ۲ میکنیم که میشه ۲۵۰ .حالا برای ناحیه کوچیکتر این ۲۵۰ رو بر ۱.۶۱۸ تقسیم می کنیم میشه ۱۵۴ یعنی طول ناحیه ۳ میشه ۱۵۴ پیکسل.حالا این ترتیب رو برای سایر ناحیه میشه پیش رفت.چند نمونه طراحی، که از نسبت‌طلایی استفاده می‌کننددر تصویر زیر، که تمرکز کاربر رو روی نقطه شروع خواندن مقالات تنظیم کرده است که در نهایت اکشن کاربر روی دکمه ابی ( CTA ) اقدامی صورت گیرد.در تصویر زیر توجه و تمرکز کاربر رو روی نوشته و شعار اصلی تنظیم کرده است. نسبت طلایی همچنین در طراحی گرافیک و بروشور‌ها برای ترتیب ساختار چینش محتوا و المان‌های گرافیکی استفاده می‌شود که نمونه‌ایی را در پایین مشاهده می‌کنید.نتیجه گیریطراحی و توسعه رابط کاربری دیجیتال یا فیزیکی موفق نیازمند اینه که پاسخ مناسبی برای انتظارت و مشکلات و اهداف کاربر انتقال بدهد. برای رسیدن به این هدف نیازه که توجه و تمرکز کاربر رو به بخش‌هایی جلب کنیم حالا این نقاط می‌تونن جایی هستند که نسبت به سایر محتوا یا ... از اهمیت بیشتری برخوردارند.نسبت طلایی روش و ابزاری هوشمند برای مدیریت توجه و تمرکز کاربر برای طراح فراهم می‌کند تا رابط کاربری شما متعادل و اشنا و دلنشین تر برای کاربران شود و از چینش ها نامرتب و نا متعارف جلوگیری می‌کند و از سردرگمی کاربران جلوگیری کند.من 👨🏻‍💻 در تلاشم که نوشته‌های منظم توی حساب ویرگول قرار بدم و ممنون میشم منو دنبال کنید و تعامل داشته باشید که باهم و کنارهم علم ux رو یاد بگیریم 🤍 Sepehran Babaei Sepehran Babaei Sat, 20 Apr 2024 12:09:38 +0330 https://virgool.io/@sepehranbabaeii/%D8%AA%D8%B3%D8%AA-ab-%D9%88-%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%DB%B5-%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1-%D8%AA%D8%B3%D8%AA-%D8%A2%D9%86-olacfivssmgz تست A/B یکی از مراحل ضروری در فرایند طراحی ux شماست که نشان می‌دهد که کاربران با کدام مدل یا گزینه ارتباط بهتری برقرار کرده اند و کدام مدل یا گزینه را بیشتر دوست دارند و یا کدام مدل یا گزینه انتظارات انها را برآروده می‌کند.تست A/B یکی از بهترین راه‌های اندازه‌گیری میزان اثربخشی طراحی ما است که در این نوشته من سعی میکنم که در ابتدا این تست را یه کوچولو معرفی کنم و یک سری ابزارهایی که میتونین برای تستتون ازش استفاده کنید رو معرفی کنم.چگونه تست A/B به شما کمک میکنه ؟با کمک تست A/B میتوینم مشکلات دسترسی پذیری کاربران یک محصول یا سرویس رو که باعث تجربه بد یا ترک محصول یا سرویس مون میشه رو شناسایی کنیم و اقداماتی برای بهبودش انجام بدیم یا وقتی که از کاربرانمون داده داریم و طراحی رو پیش میبرم ولی یه سری جاها توی دوراهی میمونیم که کدوم گزینه‌ی و مدل دقیقا چیزیه که انتظارت کاربر رو براورده میکنه، بسیار موثر و میتونه کلی بهمون کنه.یا حتی با اندازه‌گیری و ارزیابی این تست میتوینم ورژن‌های محصولمون رو بررسی کنیم و رفتار کاربرانمون رو بصورت مستمر پیگیری کنیم که اگه تغییر رفتاری توی محصول داریم رو برطرف یا حتی پیش بینی کنیم. که در نهایت اون نرخ ریزش کاربرانمون رو در کمترین میزان نگه داریم.چطوری ابزار مناسب برای تست A/B رو انتخاب کینم؟ بصورت کلی وقتی ابزار مناسب رو میخواین انتخاب کنید گزینه های زیر رو یپش رو دارین :عملکرد ابزارراحتی استفاده از ابزارهزینه‌های ابزارپشتیبانی ابزارو نیازمنده که شما تجریه و دانش کافی ( البته حوصله) خوبی برای تحلیل و ادغام داده‌های بدست اومده از بارخورد کاربران رو داشته باشین.هر فیچر یا محصول میتونه خصوصیات خودشوو داشته باشه و انتخاب این ابزار واقعا خیلی مهمه توی این تست و چیزی که مهمه شما گاهی نیاید محدود به ابزار حاضی بشین و ممکنه در فرایند‌های تست A/B داده های چند ابزار رو ادغام کنید.معرفی ابزارهای تست A/B ۱- ابزار Freshmarketerابزاریه که میتونین به کمک اون نسخه‌های مختلف وب سایتتون رو بصروت ویرایشگری که بصورت بصری تهییه کرده جمع آوری کنید و رفتار کاربرانی که وب‌سایتتون رو دیدن ارزیابی کنید. ویزگی های مهم این ابزار اینه که جاهایی که برای کاربراتون مهم بوده رو بهتون پیشنهاد میده و پیشنهاد هایی هم برای بهبود یه سری جاهای میده ( البته اینو بدونین که رفتار کلی کاربران جهان رو در نظر میگیره). ۲- ابزار Firebaseابزار Firebase از محصولات پر قدرت google که طبیعتا خفنه !!! که میتونین با تعریف سناریو‌های تستون رو انجام بدین و سازگاری خیلی بالای با سایر خدمات ابزار‌های مشابه داره که ادغام و بهینه سازی تحریه کاربر خیلی خوبه. و یه چیزی که که داره داده‌ها نهایی (با وجود محدودیت‌های ایران) خیلی پر قدرته و میتونه رو داده‌های بدست اومدش حساب کنید. ۳- ابزار Optimizelyابزار Optimizely یکی از محبوب ترین‌های ابزار بهینه سازی و تست شناخته میشه و ابزارک‌های متعددی برای تست‌هاتون براتون تهییه کرده از جمله تست A/B که یه سری از ویژگی هاش توانایی شخصی سازی محتوا و ایجاد سناریو‌های تست شخصی سازی شده داره و میتونین المان‌های پویا و متغییر و شرطی تعریف کنید. ۴- ابزار Adobe Targetابزار Adobe Target یکی از ابزار‌های شرکت adobe هست که میتوینم تست‌های گسترده‌ایی با این ابزار داشته باشین و داده‌های بدست اومده رو با سایر سرویس های ادوب و ابزار‌های سایر کمپانی‌ها ادعام و ارزیابی کنید.این ابزار از هوش مصنوعی هم خیلی کمک میگیره و میتونه به شما کاربرای انتخابی و فیلتر شده بده ۵- ابزار AB Tastyابزار AB Tasty دارای رابط کاربر ساده و باحال داره که میتونه گزینه‌های زیادری رو برای تست‌های شخصی سازی شده برای محتوا و ... براتون ارایه بده.انتخاب یک ابزار خاص به نیازمندی‌های پروژه، اولویت‌های تیم و بودجه بستگی دارد، اما هر ابزار ذکر شده در بالا گزینه‌ای عالی برای تست A/B هستند. Sepehran Babaei Sepehran Babaei Thu, 18 Apr 2024 12:11:55 +0330 https://virgool.io/@sepehranbabaeii/%DB%B3-%D8%AA%D8%A7-%D8%A7%D8%B2-%D9%85%D8%AD%D8%A8%D9%88%D8%A8-%D8%AA%D8%B1%DB%8C%D9%86-%D9%81%D8%B1%D8%A7%DB%8C%D9%86%D8%AF-%D9%87%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88-%D8%B2%D9%85%D8%A7%D9%86-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A2%D9%86-%D9%87%D8%A7-hhwhlivowizm وجود فرانید استاندارد طراحی در پروسه دیزاین بصورت کلی باعث میشه بتونیم برنامه ریزی دقیق تری در تکمیل و انجام تسک‌های طراحی محصول داشته باشیم طبیعتا این فرایندهای استاندار، تست و مورد ارزیابی قرار گرفته‌اند و با کمک اونها می‌تونیم به نتایج بهتر و موثری تری دست پیدا کنیم.فرانید طراحی به مسیری که طراحی محصول برای رسیدن به نتایح بهتر و سریعتر، رها کردن خلاقیت و همراهی با تیم ذی نفعان گفته می‌شود.اگر مثل من باشید دوست دارین علاوه بر خلاقیت‌ها و دست خط طراحی خودمان، روی شانه غول‌ها هم قدم بگذاریم یعنی از روش‌های تست شده قبلی و آموخته‌های قدیمی استفاده کنید. من برای پیش برد فرایند‌های طراحی از شانه غول‌ها استفاده می‌کنم و داخل این نوشته میخوام ۳ تا رایج‌ترین روش‌های فرایند در طراحی محصول اشاره کنم و زمان‌هایی که لازمه از این فرایند‌ها استفاده می‌کنم اشاره کنم و امیدوارم با کمک این فرایند‌ها چالش‌های تیمی و سازمانی شما هموارتر شود.معرفی فرایند طراحی محصول۱- تفکر طراحی (Design thinking)۲- اسپرینت طراحی گوگل (google Design Sprint)۳- دابل دایموند (Double Diamond)محبوبیت این سه فرایند طراحی هم امارشو توی نتایج گولگ ببینم بصورت زیر هست :همانطور که در تصویر بالا میبینید فرایند تفکر طراحی از محبوب بالایی در نتایج گوگل برای فرایند های طراحی محسوب می‌شود.طبیعتا انتخاب هر فرایند به جزییات پروژه وابسته است مانند :مشتری و کاربران پروژهبودجهمهلتسطح تجربه تیم طراحیجزییات عناصر‌ محصول و رابط کاربریحالا در ادامه به معرفی فرایند طراحی می پزدازیم :۱- فرایند طراحی : تفکر طراحی ( Product Thinking )یک فرایند کاربر محور( UC - User Center ) که مجموعه‌ایی از فرایند‌های طراحی است برای کشف و خلق و طراحی مفاهیم و محصولات جدید یا توسعه محصولات فعلی.در تفکر طراحی با کمک ازمایش و تست های متعدد و مداوم در تلاش هستیم که داده‌ از کاربران و انسان دریافت کنیم و با کمک نقشه‌های همدلی راه حل‌هایمان را بر اساس نیاز و درخواست کاربران فراهم کنیم.همانطوری که در تصویر بالا نمایش داده شده است، تفکر طراحی دارای ۵ مرحله زیر می باشد:همدلی ( empthy)تعریف ( define)ایده پردازی ( ideation)نمونه اولیه (prototyping)تست (test)نکته ایی که در تفکر طراحی لازمه بدونیم اینه که این مراحل بصورت تکراری هستن و خطی نیست یعنی ممکنه از قدم سوم برگردین قدم اول یا ممکنه از قدم دوم به قدم چهارم بپریم و ممکنه برای یه سناریو مراحل مختلفی رو تکرار کنیم تا به نتیجه مورد نظر برسیم.چه زمانی از تفکر طراحی استفاده کنیم ؟تفکر طراحی برای درک و حل مسائل باز در یک حوزه، بسیار موثر است و برای وقتی که موضوعی از قبل شناخته شده باشه زیاد مفید نخواهد بود و در این مواقع به عنوان ابزاری برای کمک به جمع اوری داده و متقاعد سازی اون داده‌ها استفاده می‌شه.لینک زیر می‌تونه خیلی کاربردی براتون باشه در ادامه که وقت کردین حتمن بهش سر بزنین : https://designthinking.ideo.com/ ۲- فرایند طراحی : اسپرینت طراحی گوگل ( Google Design Sprint )ایده این فرایند توسط گوگل تهیه شده است و یک رویکرد کوتاه و متمرکز برای جمع کردن یک اسکواد تیم و درک و تعریف مسئله و سپس حل اون مشکل ارائه می‌کنه.زیبایی این روش، چگونگی مدیریت قدم‌ها و متد‌های جمع‌آوری داده‌ها و ایده‌ها و ... را بصورت یک پک و جعبه در طول ۱ تا ۵ روزه، در ساده‌ترین رویکرد، ان‌را عملی کنیم هست.مراحل اصلی اسپرینت طراحی گوگل ( Google Design Sprint ) به شرح زیر است :برنامه‌ریزیدرک و فهمیدنتعریفطرح خلاصه و اولیهتصمیم‌گیرینمونه اولیهاعتبارسنجیچه زمانی از اسپرینت طراحی گوگل ( Google Design Sprint ) استفاده کنیم ؟خود گوگل میگه که به دلایل زیر از این فرایند در طراحی خود استفاده کنید:تیم طراحی‌مان برای وجود مشکلی مبهم مسدود شده است.یک نیازمندی جدید کشف شده و نیاز به اقدام سریع است.زمانی که نیازه سریعتر تصمیم‌گیری انجام شود.یک چشم انداز مشترک در تیم یا سازمان ایجاد کنیم.یک خلاقیت یا ابتکار جدید برای تعریف محصول خود شروع کنیم.با کمک این متد می‌توان زمان بحرانی را کاهش دهیم و یک شخص نیاز است که همیشه ارتباطات را حفظ کند.لینک زیر میتواند به شماه کمک شایانی کند https://www.invisionapp.com/inside-design/hacking-design-sprints/ ۳- فرایند طراحی : دابل دایموند (Double Diamond)این فرایند توسط مجمع شورای طراحی ترسیم شده است و شامل ۴ مرحله زیر میباشد:کشفتعریفتوسعهارائههمانطوری که در تصویر بالا مشاهده می‌کنید در هر الماس برای هر ایده یک تصویر و ذهنیت واگرا شروع می‌شود و سپس از طریق تفکر همگرا اصلاح می‌شود.چه زمانی از این متد استفاده کنیم ؟این متد هنگامی که فرایند طولانی در حال اجرا و یا تحقیق در مورد گستردگی ایده میخوایم دیتا بدست بیاریم، مورد استفاده قرار می‌گیرد. در این متد باید در هر انتهای هر الماس شما مجموعه ایی از خروجی‌ها را داشته باشید و سپس وارد الماس بعدی شوید.لینک مفید برای این متدلوژی‌: https://www.thoughtworks.com/insights/blog/double-diamond در این نوشته بیشتر سعی کردم که سه فرایند مهم طراحی محصول رو معرفی کنم که اکثر سازمان ها شرکت‌ها از این مدل فرایند‌ها استفاده می‌کنند و در اینده سعیم بر اینه که هر کدوم رو صورت نوشته جدا توضیح بدم و بیشتر باهاشون اشنا بشیم. Sepehran Babaei Sepehran Babaei Mon, 15 Apr 2024 12:52:49 +0330 https://virgool.io/@sepehranbabaeii/%D9%85%D8%AA%D8%B1%DB%8C%DA%A9-nps-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A7%D9%86-%D8%B1%D8%A7-%D9%85%D8%AD%D8%A7%D8%B3%D8%A8%D9%87-%DA%A9%D9%86%DB%8C%D9%85-nt2vdx9dknbb متریک NPS برای محاسبه میزان رضایت مشتری و وفاداری کاربران نسبت به محصول یا سرویس ماست.نظرسنجی nps شامل ۱ سوال می‌باشد که هر کاربر به اون سوال امتیازی بین ۰ تا ۱۰ می‌دهد و بعد از نظر سنجی کاربران بر اساس امتیازی که داده‌اند به سه دسته زیر تقسیم می‌شوند:توصیه کنندگان : مشتریانی که امتیاز ۹ تا ۱۰ می‌دهند و از جمله کاربران وفاداری محصول یا سرویس محسوب می‌شوند که اکثرا خرید خود را انجام می‌دهند و محصول را به سایر دوستان و وابستگان معرفی می‌کنند.منفعل : مشتریانی که امتیاز ۷ تا ۸ می‌دهند و از مشتریانی هستند که رضایت خوبی از محصول دارند ولی انرا به سایرین معرفی نمی‌کنند. این دسته از مشتریان وفادار ما هستند ولی اشتیاقی به توصیه محصول به سایرین نیستند.مخالفان : مشتریانی که امتیاز ۰ تا ۶ می‌دهند و از جمله مشتریانی هستند که از محصول یا سرویس ناراضی هستند و ممکن است دیگران را هم برای استفاده منصرف کنند.برای محاسبه nps باید به روش زیر عمل کنید :تعداد توصیه کنندگان منهای تعداد مخالفان تقسیم بر کل پاسخ‌دهندگان ضربدر ۱۰۰ محاسبه nps به ابزاری برای شرکت‌ها است که می‌توانند میزان رضایت مشتریان خود را محاسبه کنند. برخی از مزایای این ابزار را در ادامه اشاره می‌کنم:۱- استفاده ساده و آسان :کلا شامل یک سوال است که کاربران باید به آن پاسخ دهند و تجریه و تحلیل داده‌های حاصله برای شرکت به سادگی قابل انجام است که این سادگی امکان این را برای شرکت فراهم می‌کند که تصمیمات و سرعت عمل بالا و سریعی برای بهبود رضایت مشتری انجام دهد.۲- قدرت پیش‌بینی:وجود متریک nps باعث میشه که شرکت بتواند رفتار مشتریان را کشف و پیش‌بینی کند مانند اقدامات لازمه برای افزایش احتمالی بازگشت مشتریان برای استفاده از محصول را با اولویت بهتری در نقشه راه محصول ایجاد کنیم.۳- معیارسازی :به شرکت ها این امکان را می‌دهند که در برابر استاندارهای صنعت و رقبا محک بزنند و اقدامات لازم را پیش بینی و در اولویت قرار دهند.۴- بهبود مستمر:وجود متریک nps باعث میشه در طول زمان میزان رضایت مشتریان خود را پیگیری و ارزیابی کنند.۵- ایجاد همسویی در کل سازمان یا شرکت :وجود معیار nps در سازمان و اندازه گیری مستمر این متریک باعث میشه یک زبان مشترک بر اساس میزان رضایت مشتری ایجاد شود و هر اقدامی با هدف بهبود رضایت مشتری و وفاداری کاربران انجام شود.۶- طراحی بر محوریت داده :وجود متریک nps باعث میشه که تصویر واضح از وفاداری و میزان رضایت مشتری ایجاد شود پس با وجود این داده می‌توانیم حوزه‌های جدید بیابیم و این تصویر واضح باعث میشه که سازمان و خدمات جدید را بر اساس رضایت مشتری فراهم کند. Sepehran Babaei Sepehran Babaei Sat, 13 Apr 2024 10:31:42 +0330 https://virgool.io/@sepehranbabaeii/%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D9%84%D8%B9%D9%85%D9%84-%D9%87%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86-%DA%A9%D9%88%D8%B1%D8%B1%D9%86%DA%AF-p8ng6fhdudjp کوررنگی چیست ؟زمانی که افراد نتوانند تفاوت رنگ ها را تشخصی دهند ، به آن کوررنگی گفته می‌شود.آمار کوررنگی در افراد :طبق آمار تخمین زده می‌شود که حدود ۳۰۰ میلیون نفر در جهان درگیر کوررنگی هستند که :در مرد‌ها از هر ۱۲ مرد ۱ نفر دچار کوررنگی است یعنی چیزی حدود ۸٪در زن ها از هر ۲۰۰ زن ۱ نفر دچار کوررنگی است یعنی چیزی حدود ۰.۵٪انواع کوررنگی :سه نوع کوررنگی تاکنون کشف شده است :۱- کوررنگی قرمز-سبزشایع ترین کوررنگی رایج در جهان است که در این افراد تفاوت دو رنگ قرمز و سبز دشوار است.این افراد به ۴ دسته تقسیم می‌شوند : گروه Deuteranomaly : این افراد رنگ سبز را قرمز میبینند.گروه Protanomaly : این افراد قرمز را سبز روشن میبینند.گروه Protanopia و Deuteranopia : این گروه هیچ جوری نمی‌توانند تفاوت رنگ قرمز و سبز را تشخصی دهند.۲- کوررنگی آبی-زرد کمترین گروه افراد کوررنگی را شامل می‌شود که تفاوت رنگ‌های ابی، زرد و سبز و قرمز دشوار است.این افراد به ۲ دسته تقسیم می‌شوند : گروه Tritanomaly : این افراد در تشخیص رنگ‌های ابی، سبز و رزرد وقرمز دشواری دارند.گروه Tritanopia : این افراد تفاوت رنگ های ابی و سبز و تفاوت ابی و سبز و تفاوت رنگ‌های بنفش و قرمز و تفاوت رنگ‌های زرد و صورتی را تش۳-کوررنگی کامل (تک رنگ) :مندس از نادر‌ترین کوررنگی‌های موجود بین افراد است و وقتی اتفاق می‌افتد که فرد تنها در تشخصی یک رنگ اختلال دارد.چگونه دسترسی‌های رنگ‌ها را بهتر کنیم ؟برخی از مواردی که با رعایت ان‌ها میتوانید دسترسی پذیری رنگ‌ها را بهتر کنیم :۱- از برجسب‌ها برای رنگ‌ها استفاده کنید:همیشه از برچسب‌های مناسب برای دسترسی پذیری رنگ‌ها استفاده کنید۲- هم از رنگ‌ همراه با نماد‌ها استفاده کنیداز نماد یا ایکون‌های مرتبط به همراه تغییر رنگ‌ها استفاده کنید ۳- برای لینک‌ها از خط زیر متن استفاده کنیدهمیشه برای لینک‌ها علاوه بر تغییر رنگ ابی از خط زیر متن استفاده کنید۴- از حداقل رنگ‌ها استفاده کنید و از ترکیب رنگ‌های نامرتبط خودداری کنید.برای جلوگیریز از سردرگمی کاربرانتان از حداقل رنگ‌ها در طراحی خود استفاده کنید. و از ترکیب رنگ‌های ریز خودداری کنید.۵- دسترسی پذیری رنگ‌ها در استفاده از نمودار‌ها دقت کنید.در هنگام استفاده از نمودار‌ها چون ممکن است از ترکیب رنگ‌های متعدد استفاده گردد و باعث سردرگمی کاربر می‌شود.برای مثال در نمودار‌ها از بورد‌های هم رنگ بک گراند استفاده کنید.۶- دسترسی دکمه‌های کال توی اکشن خود را تقویت کنید.دکمه‌ها CTA یا کال تو اکشن دکمه‌های مهمی هستند که باید دسترسی بالایی نسبت به سایر دکمه‌ها داشته باشند.برخی از گزینه‌هایی مانند : سایز دکمه، حاشیه دکمه، کنتراست بالا، فونت‌های وزنی و ... می‌توان دسترسی راب برای کاربران کوررنگ و غیر کوررنگ یکسان کنید.۷- از نشانه‌های خاص برای فیلد‌های اجباری و اختیاری استفاده کنیدفقط از رنگ‌ها برای ایجاد تمایز بین فیلد‌های اجباری و اختیاری به تنهایی استفاده نکنید و از نشانه‌های خاص مانند "*" استفاده کنید.ابزارهای تست دسترسی پذیری رنگ‌هادر ادامه برخی ار ابزارهای مهم برای تست دسترسی پذیری رنگ ها اشاره شده است :khromacolorboxwhocanusecolorsafegetstarkhappyhuesنتیجه‌گیری :امیدوارم نکته‌های بالا کمک کنه که دنیای یکسان و فرصت‌های برابری برای همه افراد ایجاد کنیم در ادامه به مرور نکته‌های بالا بصورت کوتاه اشاره می‌کنیم:۱- برای ایجاد تمایز فقط به رنگ‌ها اکتفا نکنید و از نماد و ایکون ها هم برای دسترسی استفاده کنید.۲- برای لینک‌ها علاوه بر تغییر رنگ از خط زیر متن نیز استفاده کنید۳- رنگ‌ها را محدود کنید و از ترکیب رنگ‌هایی که باهم ترکیب بد و نامناسبی می‌شوند، خودداری کنید۴- از نماد‌های خاص از فیلد‌های فرم‌ها برای اجباری و اختیاری بودن، استفاده کنیداگر روش ‌های بیشتر برا افزایش دسترسی پذیری رنگ‌ها مطلع هستید ان را در بخش کامنت به شاتراک بگذارید. Sepehran Babaei Sepehran Babaei Fri, 05 Apr 2024 02:28:41 +0330 https://virgool.io/@sepehranbabaeii/%D8%A7%D8%B5%D9%88%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A7%D8%AA%D9%85%DB%8C-atomic-design-principle-ji0j1jbt4p1b برای سال‌ها سال دستورالعمل ها و سبک‌ها و استایل‌های متعددی با کمک ابزارهای متنوعی پیاده سازی شده اند که بتوان طرح‌های پیاده سازی شده، آسان‌تر و قابل فهم‌تر شوند. برای همین ابزار‌ها و کتابخانه‌های متعدد توسعه مانند bootstrap, semantic-ui, foundation و ... منتشر شده‌اند که کار توسعه و برنامه نویسی را آسان‌تر کنند.حال با وجود این ابزار‌ها باید راهی یافت که ارتباط میان طراحان و برنامه نویسان آسان‌تر شود و کار‌ها تیم طراحی و تیم توسعه را روان‌تر و آسان‌تر کنیم.دقیقا اینجاست که مفمومی به نام اتمیک دیزاین مطرح می‌شود که نتیحه این دیزاین، خلق سیستم یکپارچه با عناوین دیزاین سیستم یا uikit می‌باشد.طراحی اتمی:فرایندی، شامل ۵ مرحله مجزاست که هدفشان ایجاد سیستمی یکپارچه، متفکرانه با سلسله مراتب مرتب می‌باشد.لالایه‌های طراحی اتمی شامل :اتم - Atomsمولکول - Moleculesارگان - Organismsقالب با تمپلیت - Templatesصفحه - Pagesاین سلسله مراتب مرتب دقیقا از مفاهیم شیمی استخراج شده است که برای ساخت همچین سیستم یکپارچه‌ایی کمک می‌رساند.حالا به معرفی هر بخش می‌پردازیم:۱- اتم‌ها - Atomsدر شیمی میدونیم که اتم به کوچکترین واحد سلول اشاره می‌کنه یا به عبارت دیگه اتم کوچکترین واحد ماده تشکیل دهنده یک عنصر شیمیایی است.در طراحی نیز اتم‌ها اساسی و پایه ترین اجزا این سیستم یکپارچه‌ هستند و معمولا شامل دکمه‌ها، لیبل‌ها و خطوط و نماد‌ها و فیلد‌ها و ... می‌باشند.۲- مولکول‌ها - Moleculesمولکول‌ها گروهی از اتم‌ها هستند و به یکدیگر متصل می‌شوند تا واحد منسجمی را ایجاد کنند.۳. ارگان - Organismsبا ترکیب مولکول‌ها با یکدیگر ارگان‌ها ساخته می‌شوند و طبیعتا اجزا و عناصر زنده‌ی بزرگتری را ایجاد می کنند مانند فرم ورود و ثبت نام در کنار‌هم.۴- قالب با تمپلیت - Templatesقالب‌ها یا تمپلیت بخش‌هایی هستند که ارگان‌ها را به هم وصل می‌کنند و یک طرح کامل را ایجاد می‌کند. برای مثال به ترکیب ارگان فرم جستجو در سکشن ابتدای سایت به همراه ارگان هدر یا منوی اصلی، یک قالب یا تمپلیت در رابط کاربری ایجاد می‌شود .۵- صفحه - pagesصفحات، بالاترین سطح میزان وفاداری را دارند و قابل لمس ترین بخش سیستم یکپارچه را فراهم می‌کنند.در این قسمت است که محقق کارایی سیستم پکپارچه طراحی شده را مورد بررسی و آزمایش قرار می‌دهد.استفاده از سیستم طراحی اتمی :استفاده از طراحی اتمی در عین سادگی، دشواری های خود را نیز دارد . بصورت کلی این شاید داخل ذهنتان باشد که اجزا را به ترتیب باهم ترکیب می‌کنید و اون سلسله مراتب را برای طراحی صفحات اجرا می‌کنید ولی دشواری این سیستم، دریافت و استخراج نیازمندی‌هایی است که در مراحل اولیه ( اتم و مولکول) به انها در محصول/محصولات شما وجود دارد، میباشد که با طی کردن این سلسله مراتب ( از اتم به صفحه) تمامی نیازمندی‌های محصولی برای ساخت اون سیستم یکپارچه استخراج یا پیش بینی گردد.مهمترین نکته در این سیستم، پیمودن این سلسله مراتب از اتم به صفحه است یعنی زمانی که در قسمت صفحه نیازمندی جدید کشف شد باید از ابتدای کار اتم ها را اپدیت کنید و سپس مولکول ها و تا ... انتها پیش روید.چرا از طراحی اتمی استفاده کنیم ؟در اصل به مزایای طراحی اتمی و ایجاد سیستم یکپارچه می‌پردازیم :۱- یکبار طراحی کنید و همیشه از آن استفاده کنید :با استخراج اتم و ترکیب انها باهم میتوانید یکبار کامپوننت‌های اساسی خود را طراحی کنید و هر جایی در طراحی خود به راحتی استفاده کنید.۲- طراحی یک سیستم راهنمای طراحی - style guide: وجود سیستم یکپارچه توسط سلسله مراتب طراحی اتمی، باعث میشه که شما اصول طراحی و استاندار‌های خود را قبل از پیاده سازی استخراج و تعیین کنید و بعد از طراحی صفحات از سلایق شخصی دوری کنید و طبق استاندارهای تعریف شده در سیستم پیش روید.۳- قابلیت درک پذیری توسط تیم توسعه:یعنی تیم توسعه دهنده شما استوری طراحی صفحات یا تمپلیت‌های شمارا درک می‌کند و با چیدمان این سلسله مراتب می‌تواند چیدمان وب سایت شما را به آسانی هر چه تمام‌تر انجام دهد.۴- به روزرسانی ساده :یعنی با اپدیت یک اتم می‌توان ان را در کل سیستم تغییر داد و دیگر نیازی به تغییر در هر جایی از طراحی را کنترل می‌کند.۵- نمونه سازی اولیه طراحی‌:با وجود این سیستم شما لیستی از اتم‌ها و مولکول‌ها را در اختیار دارید و به سادگی می‌توانید نتیجه طراحی را در ذهن خود تصویر سازی کنید.از اینکه نوشته من را خواندید ممنونم و امیدوارم دانش طراحی ارزشمندی کسب کرده باشید.منابع :https://atomicdesign.bradfrost.com/chapter-2/ Sepehran Babaei Sepehran Babaei Wed, 03 Apr 2024 23:57:49 +0330 https://virgool.io/codenevis/%D9%87%D9%85%D9%87-%DB%8C-%D9%82%D9%88%D8%A7%D9%86%DB%8C%D9%86-ux-%D8%B1%D8%A7-%DB%8C%DA%A9-%D8%AC%D8%A7-%D8%AF%D8%A7%D8%B4%D8%AA%D9%87-%D8%A8%D8%A7%D8%B4%DB%8C%D9%85-qehjudxy0hsw قوانین ux چیست ؟استاندارهایی که با کلی تست و تحقیق توسط گذشتان حوزه ux تست و معرفی شده اند و ما حال به این استاندارهای، قوانین ux میگوییم، که نتیجه تکرار موفقیت آمیز تست‌های ux می‌باشند. هرچقدر در طراحی خود از این قوانین استفاده کنیم طراحی‌ای، استاندار و قابل پذیرش‌تری برای کاربران فراهم خواهیم کرد.رابطه مستقیمی بین موفقیت محصول با این قوانین وجود دارد. یعنی هر چقدر بتوانید این قوانین را در طراحی خود استفاده کنید طراحی شما قابل استفاده بیشتری و آسان تری برای کاربرانتان فراهم می‌کنید.۱. اثر فون ریستورف یا افکت ایزوله - FromRestorff Effectاگر در طراحی خود یک کامپوننت یا عنصر متفاوتی نسبت به سایر عناصر در رابط کاربری خود داشته باشید، کاربران در ابتدا ان‌ را مشاهده می کنند.در مثال بالا کاربر در ابتدا اون دکمه سبز‌های بالا صفحه را مشاهده می‌کند. اما ناگهان روی دکمه آبی که ایکون فلش رو به پایین دارد را می‌بیند و استفاده می‌کند. به عبارتی با کمک رنگ متفاوت، کاربر را تحریک به استفاده از اون دکمه می‌کنه و نمونه مشابهی در تصویر نیست که از رنگ ابی استفاده کرده باشد.یا در مثال بالا کارت وسط با بخش هدر آبی که به آن اضافه شده متمایز تر شده است و توجه کاربر به نسبت به سایر کارت‌‌ها جلب می‌شود.۲. قانون هیک - Hick's Lawکاربر اگر قصد انجام کاری را داشته باشد علاقه به کمترین تعداد تصمیم برای انجام اون دارد.بهترین مثال ابن بخش می‌شود به صفحه اول گوگل اشاره کرد که با کمترین تصمیم گیری اون چیزی که لازم دارین رو فقط وارد کنید و نتیجه را جستجو کنید.۳. اثر زیگارنیک - Zeigarnik Effectکاربران معمولا کارهای تکمیل نشده خود را بیشتر به خاطر می‌اورند یا احساس می‌کنند که باید کار ناقص خود را تکمیل نمایند.در مثال بالا با نمایش میزان پیشرفت کاربر در مطالعه مقاله با نشانگر پایین سمت راست، کاربر را دیدین این مورد متوجه می‌شود که چقدر در مطالعه مقاله پیشرفت داشته و چقدر به تکمیل مقاله مانده است.۴. اثر موقعیت سریال - Serial Position Effectاگر لیستی در طراحی دارید کاربران در ابتدا قسمت اول سپس قسمت انتها و در نهایت قسمت‌های میانی را بررسی می‌کنند.یعنی کاربر اول و آخر هر چیزی را چک می کند، سپس به وسط نگاه می کند.بنابراین در طراحی‌های خود آیتم‌های مهم را در ابتدای لیست قرار دهید و سپس در انتهای لیست یک ایده کلی به کاربرانتان بدهید.در مثال بالا بخش‌های جستجو و signup آورده شده است. در نهایت در تصویر دوم سایر بخش‌ها قرار گرفته است.۵. قانون منطقه مشترک - Law of Common Regionزمانی که موس روی عنصری از رابط کاربری می‌برید ان عنصر سایه میگیرد یا تغییری در ان رخ می‌دهد یا زمانی که روی منوی اصلی وب سایتی هاور می‌کنید منوی کشویی زیر آن باز می‌شود. به این تغییر رفتار رابط کاربری در پاسخ به عملی از کاربر رخ می‌دهد قانون منطقه مشترک می‌گویند.در طراحی بالا زمانی که روی گزینه اوی هاور می‌کنید منوی کشویی زیرین نمایش داده می‌شود و سپس روی گزینه ۳ هاور می‌کنید بک گزاند ان تغییر می‌کند این‌ها همگی مثال‌هایی از قانون منطقه مشترک هستند.۶. قانون جیکوب - Jacob’s Lawکاربر یک‌سری الگو، استاندارد یا تم‌هایی از استفاده‌های قدیم تر از سایر نرم‌افزار‌ها دارد و اگر وب سایت شما نیز از ان الگو‌ها و ... استفاده کنند، احساس خوش‌ایندی خواهد گرفت.برای مثال از ایکون‌هایی که از قبل اشنا است استفاده شود مث ایکون سبد خرید و همچین جایگاه مشابه خود دکمه افزودن به سبد خرید۷. اثر زیبایی و قابل‌استفاده - Aesthetic-Usability Effectقانون انتزاعی است که می‌گه که هر چقدر طرح شما زیباتر برای کاربر باشد،آنها بیشتر در وب سایت شما وقت صرف می‌کند.۸. قانون Doherty Thresholdکاربر باید نتیجه هر اکشنی را حداکثر ۴۰۰ میلی ثانیه بعد ببیند یعنی بعد این مدت باید نتیجه اجرا به کاربر اطلاع داده‌ شود. ۹. قانون میلر - Miller’s lawکاربران معمولا بصورت نرمال ۷ باکت (+-۲) را در ذهن خود به خاطر می‌سپارد یا روی ان تمرکز می‌کند و اگر این مقدار بیشتر شود ممکن است کاربر توجه خود را به جای دیگری تغییر دهد. ۱۰. اثر گرادیان هدف - Goal-gradient effectمیگه که اگر به کاربر نشان دهیم در کجای مسیر برای رسیدن به هدف اش قرار داد، انگیزه بیشتری به او برای تکمیل هدف‌اش می‌دهیم. یعنی هر چه کاربر به هدف اش نزدیکتر شود تمایل بیشتری برای انجام اون کار داره.۱۱. قانون مجاورت - Law of Proximityبراساس این قانون عناصر مرتبط به هم گروه بندی می‌شوند.برای مثال در تصویر بالا بخش های مربوط به فروش در یک ستون قرار دارند و بخش های مربوط به پشتیبانی در یک ستون مجزا و .... اینگونه عناصر مرتبط به هم در بخش فوتر وب سایت گروه‌بندی می‌شوند.۱۲. قانون اتصال یکنواخت - Law of Uniform Connectednessاگر بین عناصر شما شباهتی وجود نداشت می‌توانید انها را با رنگ، شکل، استایل، چیز‌های مشترک و تکراری و مشابه بهم ربط دهید.در مثال بالا بخش سوالات متداول که گاهی مربوط به هم نمی‌شوند را با استایل خاص و با یک خط بین‌شان، ارتباط داده شده است.۱۳. قانون اختصار - Law of Concisenessکاربر می‌خواهد دسترسی ساده به اطلاعات پیچیده و دشوار با کمترین تلاش دست یابد.در مثال بالا کاربر در ابتدا با نوشتن logo به لیستی از اطلاعات مرتبط وصل می‌شود و راحت‌تر به ان اطلاعات دشوار دسترسی پیدا کند۱۴. قانون تشابه - Law of Similarityیعنی کاربران با دیدین عناصری که طراحی مشابهی دارند راحت‌تر هستد.برای مثال در تصویر پایین اندازه تایپوگرافی عناوین و متون یکسان است و هر متن زیر عنوان دو خطی با فونت یکسان هستند. ۱۵. قانون Occam’s Razorکاربران در ابتدا منو‌هایی که تعداد گزینه‌های کمتری یا سطح پیچیدگی کمتر دارند را مشاهده می‌کنند.برای مثال در تصویر پایین در ابتدا کاربران گزینه‌های زیر منوی get to us know و سپس گزینه‌های زیر منوی home را مشاهده می‌کند.۱۶. اصل پارتو - pareto principleاین اصل بیان می‌کند که ۸۰ درصد نتایج از ۲۰ درصد تلاش حاصل می‌شود.برای مثال در تصویر پایین پیجینیشن مربوط به صفحه اول گوگل است که در هر صفحه تنها اندکی را نمایش می‌دهد. و اکثر کاربران با همان گزینه‌های صفحه اول به نتایج میرسند.۱۷. قانون پارکیسنشون - parkinson's Lawاگر زمان کاربران کمتر باشد، انها تنها از گزینه‌هایی که برایشان مهم است بازید می‌کنند و طبیعتا هر چه این زمان بیشتر گردد کاربران وارد بخش‌های اضافی وب سایت شما می‌روند یا به بیان دیگر اقدامات کاربران بر اساس زمان متفاوت است.برای مثال در تصویر زیر که مربوط به صفحه اول گوگل می‌باشد که به ساده ترین حالت امکان جستجو متنی وجود دارد و گزینه جستجو صوتی برای افرادی که زمان بیشتر در این صفحه هستند قرار داده شده است.۱۸. قاعده اوج پایان - Peak-End Roleکاربران محصول شما را بر اساس پاسخی که محصول یا سرویس شما در اوج کاری خود دریافت می‌کنند قضاوت می‌کنند.برای مثال هر چقدر وب سایت شما زییا و جذاب باشد ولی پاسخ نامرتب در اوج کار به کاربران دهند، احساس ناخوشایندی در کاربرانتان بوجود می‌اورد.۱۹. قانون پوستل - Postel's Lawدر محصول یا سرویس هرچقدر بتوان اطلاعات کمتر و ساده‌تر از کاربر دریافت کنید بهتر است. یعنی باید احساس کاربران در هنگام دریافت اطلاعات را در نظر بگیریم.برای مثال در تصویر زیر برای عضویت می‌توانند با اکانت‌های فیسبوک و گوگل و ... به جای فرم ثبت نام گاهی طولانی استفاده کنند.۲۰. قانون تسلر - Tesler's Lawهر سیستمی پیچیدگی و دشواری‌های خاص خود را دارد و هر طراحی ux باید بتواند این پیچیدگی‌ها و دشواری را تا حد امکان برای کاربران ساده کند.۲۱. اثر اجماع کاذب - False-Consensus Effectطراحی نباید بر اساس درک و فهم خود طراحی را انجام دهد و همیشه باید در طراحی بخش‌های مختلف، کاربران را در حرفه‌های مختلف در نظر بگیرد و برای طراحی باید کاربر نهایی و عامی را در نظر گرفت.برای مثال در تصویر زیر از انتخاب رنگ و سلسله مراتب محتوا و جلوه های بصری و ایلاستریتو‌ها و ... برای کاربران پیاده‌سازی شوند.۲۲. قانون فیتس - Fitts’s Lawقانون فیتس رابطه‌ایی بین مسافتی است که کاربر برای رسیدن به هدف باید طی کند و این هدف چقدر برای کاربر در دسترس است (از نظر بزرگی و کوچکی و نزدیکی و دوری ).اندازه هدف باید به گونه‌ایی باشد که به راحتی برای کاربر قابل مشاهده باشد.انتخاب هدف باید آسان باشد.برای مثال در تصویر زیر صفحه لاگین کاربر را مشاهده می‌کنیم و در نظر گرفته است که موس کاربر در وسط اسکرین قرار دارد و دکمه آبی و به نسبت بزرگ‌تر در نزدیکتری قرار گرفته است و به نسبت همان دکمه سبز ساخت اکانت هم دورتر و هم کوچکتر نمایش داده شده است. Sepehran Babaei Sepehran Babaei Tue, 02 Apr 2024 13:26:28 +0330 https://virgool.io/@sepehranbabaeii/%DB%B1%DB%B6-%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D9%84%D8%B9%D9%85%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-%DA%A9%D9%88%DA%86%DA%A9-%D8%A8%D8%A7-%D8%AA%D8%A7%D8%AB%DB%8C%D8%B1%D8%A7%D8%AA-%D8%B2%DB%8C%D8%A7%D8%AF-eapucwqyqlcf طراحی رابط کاربری کاری دشواری است چون گاهی اوقات بین گزینه‌های زیادی قرار می‌گیریم که بین انها باید در مورد نحوه چیدمان، فاصله‌ها، تایپوگرافیکی، ترتیب و ترکیب رنگ‌ها انتخاب کنیم حالا به این انتخابات، اصول دسترسی پذیری و روانشناسی و قوم شناسی هم اضافه کنید و اینحا دقیقا جای ایی که طراحی رابط کاربری را دشوارتر می‌کند.بیشتر تصمیمات برای طراحی بصری و تعاملی توسط سیستمی منطقی انتخاب میشه و شاید استعداد هنری یا شهودی در ابتدای کارطراحی کمک شایانی را به ما ده. ولی این قوانین ساده که در پایین‌تر اشاره کرده ام است، که بسیار کمک کننده می‌باشد. داشتن سیستمی از قوانین منطقی به شما می‌کنه که تصمیمات آگاهانه و موثر بگیرید و بدانیم که بدون استفاده از این دستورالعمل و قوانین طراحی به سمت، تنها جابه‌جایی المان‌های رابط کاربری حرکت می‌کند.حالا در این مقاله سعی کردم یه سری نکته‌هایی که بصورت عمومی و کلی اشاره کنم که شما هم میتونین بعنوان یه دستورالعمل مفید از انها استفاده کنید.سریعترین راه یادگیری انجام داده است، پش شروع کنیم و بدانیم که تجریه کردن مطمئن ترین راه یادگیری است.۱. از فضا‌ها برای گروه‌بندی‌المان (عناصر رابط کاربری) استفاده کنیدنقسیم اطلاعات مرتبط به گروه‌‌های کوچکتر به مرتبط شدن طرح و سازماندهی رابط کاربری کمک شایانی می‌کند و باعث درک سریعتر و اسان‌تر برای کاربران می‌شود تا این اطلاعات را راحت‌تر به خاطر بسپارند.برای گروه بندی از قاعده‌های زیر استفاده کنید:عناصر مرتبط را با فاصله کمتر نسبت به سایر عناصر، کنار قرار دهید.عناصر مرتبط را در یک باکس مشترک قرار دهید.عناصر مرتبط را بصورت پیوسته هم تراز کنید.عناصر مرتبط را هم شکل ( شکل مشابه) طراحی کنید.با دقت به شکل زیر متوجه می‌شوید که برای گروه بندی از فاصله‌ها برای استفاده شده است تا دسته بندی بین سکشن‌های محتوا ایجاد گردد.۲. ثابت قدم باشید و یکپارچکی را در طراحی حفط کنید یعنی عناصر مشابه را به روشی مشابه که بصورت مشابه، کار می‌کنند را در کنارهم گروه بندی کنید. این اقدام باعث می‌شود که طرح شما قابل پیش بینی تر باشد و طبیعتا ریسک اشتباهات کاربر را کم می‌کند.برای مثال از ایکون‌های با ساختار یکسان استفاده کنید. اگر از ایکون پر استفاده می‌کنید حتمن در همه ایکون‌ها و در کل محصول از این الگو استفاده کنید و یا گوشه‌های خمیده ثابت ( سعی کنید ضریبی از 2pt باشد) یکسانی برای ایکون‌ها، برای یکپارچکی استفاده کنید.از متن و تگ‌هامتنی برای ایکون‌ها استفاده کنید تا مطمئن شوید کاربران منظور شما را کامل متوجه شده اند.۴. سلسله مراتب بصری ایجاد کنید.همه اطلاعات و محتوا موجود یک رابط کاربری از اهمیت یکسانی برخودار نیستند. با کمک جلوه‌های بصری انها را برجسته‌تر از سایر محتوا کنید. وجود این ترتیب سلسله مراتب محتوایی باعث می‌شود که کاربران راحتتر صفحه را اسکن کنند و روی مناطق مورد نظر تمرکز کنند و حس نظم به کاربران انتقال می‌دهد.با کمک کانتراست(تضاد رنگ‌ها)، اندازه، رنگ، فاصله‌ها، جایگاه عناصر و عمق عناص می‌توانید سلسله مراتب بصری واضح و شفاف ایجاد کنید.در نمونه‌ی پایین بنری در قسمت اول وب سایت(hiro section) مشاهده می‌کنید که وجود سلسله مراتب بصری حس نظم و ترتیب را به کاربر انتقال می‌دهد.یکی از روش ‌های تست سلسله مراتب بصری استفاده از تست Squint است. در این روش صفحه را تار کنید، بعد بررسی کنید که ایا مهمترین عناصر قابل تشخیص هست هنوز ؟ و ایا با همین وضعیت موضوع محصول را متوجه می‌شوید؟در نمونه پایین تست squint را مشاهده می کنید که عناصر متعددی وجود دارد که قابل درک هستند و باعث جلب توجه می‌شوند در حالی که اکشن اصلی در پایین صفحه برجسته نیست.در نتیجه: در طرح بالا اکشن اصلی ( پایین سمت چپ) را با کمک کانتراست رنگ‌ها متمایزتر می‌کنیم.مجدد برای طرح بالا تست squint رو اجرا می‌کنیم.همانطور در طرح بالا مشاهده می‌کنید کمی بهتر و واضح‌تر شد ولی نقاط ابهامی مانند سکشن مربوط به هدر وجود دارد.۵. از استایل‌های غیرضروری اجتناب کنید.استایل‌ها و جلوه‌های بصری می‌تواند باعث حواس پرتی برای کاربران شوند و بار شناختی (میزان توانایی ذهن برای فهم طرح) را افزایش دهد. از استفاده غیرضروری از خطوط، پترن‌ها، رنگ‌ها و انیمیشن‌ها اجتناب کنید و رابط کاربری را در ساده ترین و متمرکزترین حالت نگه دارین.در تصویر پایین استایل‌های حاشیه اطراف تصویر غیرضروری است و برای گروه‌بندی و انتقال اطلاعات هم سودمند و مفید نیست پس با خیال راحت این حاشیه حذف می‌گردد.۶. از رنگ‌ها، هدفمند استفاده کنید.هر رنگ باید در ابتدا با هدف مشخص و سپس به اندازه مورد نیاز استفاده شود و فقط برای جلوه‌های بصری مورد استفاده قرار نگیرد چون رنگ‌ها باعث جلب توجه کاربر می شود و ممکن است عاملی برای حواس پرتی و سردرگمی‌ آن‌هاشوند.در ابتدای طراحی از رنگ‌های سیاه یا سفید با خاکستری استفاده کنید. هر جایی برای انتقال مفمومی لازم به رنگ‌ها داشتین از انها‌ برای انتقال مفاهیم استفاده کنید و ان رنگ را به پاساژ رنگی خود اضافه کنید.نکته مهم در این بخش این است که رنگ های اصلی و برند خود را در عناصر تعاملی استفاده کنید. این‌کار به کاربران یاد می‌دهد که چه چیزی تعاملی است و چه چیزی نیست! و از استفاده بی مورد از رنگ برند در عناصر غیرتعاملی خودداری کنید.به مثال پایین دقت کنید.کارت ها به خودی خود احساس تعامل با کاربر را دارند. در مثال بالا عناصر غیر تعاملی در کارت اقامتگاه حذف گردیده است و هر انچه که مورد نیاز به تعاملات با کاربر است از رنگ اصلی و برند استفاده شده است.۷. از کانتراست عناصر رابط کاربر مطمئن شوید.کانتراست نسبت اختلاف رنگ روشن و تاریک عناصر نسبت به هم هستند و این نسبت از ۱:۱ تا ۲۱:۱ تعریف می‌شود برای مثال متن مشکی روی پس زمینه مشکی کمترین کانتراست و مقدار نسبت ۱:۱ را دارد و متن مشکی روی پس زمینه سفید بیشترین کانتراست و مقدار نسبت ۲۱:۱ را داراست.برای اطمینان از دسترسی پذیری رابط کاربری باید استاندارد WCGA کانتراست 2.1 با نشانه AA را داشته باشند در نتیجه عناصر رابط کاربری مانند فرم‌فیلد‌ها و دکمه ها باید حداقل کانتراست ۳:۱ را داشته باشند.در مثال پایین کانتراست ایکون برگشت، خیلی کم است و با افزودن سایه روی تصویر و زیر ایکون، ان را اصلاح می‌کنیم.۸. از کانتراست متون خود مطمین شوید.نسبت کانتراست متنون باید 4.5:1 باشد تا رابط کاربری شما دسترسی پذیری مناسبی برای افرادی که اختلال بینایی دارند، باشد یا نمره AA از استاندار WCGA دریافت کند.متن کوچک( کمتر از ۱۸پیکسل) به حداقل کانتراست 4.5:1 نیازمند است و متون بزرگ ( بزرگتر از ۱۸ پیکسل) به حداقل کانتراست ۳:۱ نیازمند هستند.در مثال پایین نماد نمایشگر اسلاید برای تصویر و متن متا(meta) در زیر عنوان از کانتراست متن مناسبی برخودارد نیست .۹. دسترسی پذیری در رنگ ‌ها را دقت کنید و رنگ‌ها را فقط به‌عنوان یک شاخص تکیه نکنید.یکی از المان دسترسی پذیری، در نظر گرفتن کوررنگی کاربرانتان است که عمدتا مردان درگیر این موضوع می‌باشند و معمولا برای افراد که دارای کوررنگی هستند تشخیص رنگ های قرمز و سبز کمی دشواری دارند. در رابطه با این موضوع رنگ‌ها نمی‌توانند انتقال معنا را برا این دسته افراد فراهم کنند.برای حل این مورد باید از المان‌های بصری اضافی برای متمایز کردن عناصر رابط کاربری استفاده کنید.برای مقال در تصویر پایین، برای اشاره به بازخودرها که یک المان تعاملی است علاوه بر رنگ یک نشانه لینک طور به ان اختصاص داده ایم (در این شرایط، استفاده از ایکون‌ها نیز پیشنهاد می‌شود).۱۰. از یک تایپ‌فیس برای متون‌استقاده کنید( ترجیجا بصورت sans serif باشد) تایپ فیس مجموعه‌ایی از وزن و اندازه‌ فونت‌های مرتبط با سبک طراحی محصول شماست. برای تعیین فونت فیس چون حروف sans serfi خوانایی ساده تر و عامه پسندتری دارند بهتر است مورد استفاده قرار گیرد.در مثال تصویر پایین فونت فیس را تغییر داده ایم که بر اساس شخصیت برند نیز مطابقت دارد.در تعیین تایپ فیس باید ساختار و ارتفاع حروف چینی فونت‌ها را مسلط باشید.۱۱. تا حدامکان استفاده از حروف بزرگ را محدود کنید.از نظر من استفاده ار حروف بزرگ یعنی تون صداتون رو بلند کرده اید و تاکید زیادتری به اون موضوع دارین به مثال پایین دقت کنید:از طرفی خوانایی حروف بزرگ کمی دشوارتر است چون کاربران هر حرف را، یک کلمه می‌بینند چون هر حرف یه شکل مستطیلی داره و این موضوع کاربران را مجبور می‌کند که حرف به حرف محتوا را مطالعه کنند.۱۳. از وزن فونت‌های معمولی و پررنگ استفاده کنید.وقتی که فایل فونتی را میخریم تمامی وزن‌ها آن فونت را مشاهده می‌کنید ولی نیاز به استفاده از همه فونت‌ها نیست. استفاده ار فونت‌های با وزن مختلف، متن شما را نویز دار می‌کند در نتیجه باعث بهم‌ریختگی طراحی شما می‌گردد.یک سری نکات سریع برای برای وزن فونت ها :برای سرتیتر‌ها از وزن پررنگ برای انتقال تاکید استفاده کنید.بیشتر از فونت‌های regulate برای متون خود استفاده کنید.برای وزن‌های نازک و کوچیک حتما باید میزان خوانایی انرا بررسی کنید ودر نوشته‌های بزرگ از ان استفاده کنید.در مثال پایین وزن فونت را کمی بیشتر کردیم تا خوانایی متون بیشتر شود.۱۴. از متون سیاه خالص استفاده نکنید.چون کانتراست زیاد بین رنگ سفید و مشکی بالاست و باعث خستگی چشم کار هنگام خواندن محتوا می‌شود.۱۵. سطر‌های متون را هم‌تراز کنید.در انگلیسی کاربران متون را از چپ به راست میخوانند و برای انها اسکن محتوا بصورت F انجام می‌شود و هم‌ترازی متون باید از سمت چپ باشد ولی در فارسی دقیقا برعکس این عمل کنید و سطر‌های متون خود را از راست تراز کنید.تراط وسط‌چین معمولا برای عناوین و سرفصل‌ها و متون کوتاه مورد استفاده قرار می‌گیرد چون در متون کوتاه قدرت خوانایی بالاتری دارد ولی در متون بلند کاربر باید در هر سطر به دنبال ابتدای سطر باشن امکان خستگی کاربر در خواندن متون، وجود دارد.۱۶. حداقل ارتفاع سطر‌ها یک پاراگراف در متن اصلی را بهینه کنید.ارتفاع خط‌فاصله عمودی بین دو خط مرکزی سطر است. وجود فاصله مناسب باعث افزایش خوانایی و احساس راحتی در کاربر می‌شود. برای این کار مطمئن شوید حداقل فاصله بین خطوط از هم ۱.۵ یا ۱۵۰٪ از هم باشد( این عدد باید بین ۱ تا ۲ باشد ).حالا مقایسه طرح اولیه با طرح نهایی : با رعایت و مرور ۱۶ دستورالعمل تفاوت را در رابط کاربری مشاهده می‌کنید که در نهایت باعث افزایش چشم‌گیری در دسترسی پذیری اپلیکیشن می‌شود. Sepehran Babaei Sepehran Babaei Sat, 30 Mar 2024 14:54:22 +0330 https://virgool.io/@sepehranbabaeii/%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-smpabl1v5sgd تعریف : تجربه کاربری به احساساتی که کاربر در هنگام استفاده از محصولی ، سرویس یا سیستم تجریه می کنند اشاره میکنه و یه مفموم و اصطلاح بزرگیه که میتونه هر چیزی توی اون محصول، سرویس یا سیستم رو شامل بشه. مثل اینکه کاربر چقدر میتونه با سیستم ارتباط برقرار کنه و اونو به سادگی مورد استفاده قرار بده یا مثلا اون محتوایی که به کاربر نمایش داده میشه در راستای اون سادگی استفاده یا قابل هدایت شدنه هست، که در نهایت، کاربر بتونه به راحتی به هدفش برسه (مثلا فرانید خرید که تقریبا شامل ← مطالعه محصول و ویژگی هاش بعد مقایسه محصولات بعد افزودن به سبد خرید و فاکتور و اطلاعات پرداخت و…) و کلی چیزای دیگه...حالا تعریف چیزی که خودم بلدم : تجریه کاربر یا ux (مخفف user exprience) مسیری که کاربر در محصول ( یعنی هنگام استفاده از محصول) داره طی میکنه که شامل مانیتور ( رصد) همه تعاملاتی که کاربر با محصول داره و نحوه انطباق کاربر با روند کلی تکمیل فرانید هست ... یکمی ساده تر بگم هر نقطه تماس بین کاربر با محصول/شرکت رو دربر میگیره و نتیجه، این بررسی ها و رصد‌ها، در کل فرانیدهای تجربه کاربر گنجانده می شه.توی تجربه کاربری قبل و بعد از استفاده کاربر از محصول بررسی میشه که نحوه تعامل با محصول یا تغییر این نحوه تعامل ( که بهش رفتار کاربر در مصحول هست میگیم ) در نظر گرفته میشه.ززاصول طراحی (principle) در تجربه کاربر : بصورت کلی ux روی لذت بخش‌تر و ساده تر کردن مسیری های مختلف در محصول، سرویس یا سیستم هست. حالا ux به ما کمک میکنه که بهترین اون راه حل هارو انتخاب کنیم که قابلیت ها و ویژگی های و پتانسیل‌های محصول رو برای کاربر بصورت صحیح ارایه بدیم.حالا برای تحقق هدف بالا ux یک سری ابزار و متد‌هایی داره که بتونیم برخی داده‌ها رو کشف کنیم و اون‌هارو بر اساس نیازها طراحی استفاده کنیم. این ابزارهای از یافتن کلمات و تصاویر مرتبط شروع می شود تا ... تعیین محدودیت های فیزیکی و جسمی افراد برای تحقیق هدف بالا ( یعنی همون لذت بخش‌تر و ساده تر کردن مسیری های مختلف در محصول، سرویس یا سیستم ).در مرحله بعد ux کمک میکنه که چطوری کاربران رو تحریک به استفاده از محصول کنیم که مستلزم شروع ساده و قابل درک برای کاربران است .از اینجا به بعد ux کمک میکنه که نقاط درد (pain point) و نقاط اصطلاک کاربران رو کشف کنیم و مسیر های تعیین شده در محصول رو به حداقل برسونیم.در مراحل بعدی که محصول به نقطه بلوغ رسید ux میتونه فراتر از مرزهای محصول بره و حتی رو ارزش های پیشنهادی بر اساس داده های کشف شده از کاربر تاثیر گذار باشه.همه این اهداف بالا تاکتیک‌های مختلفی برای درک نیازهای کاربران واقعی در دنیای واقعی داره. این تاکتیک ها کمک میکنه که یک طراح ux فرضیات که برای طراحی محصول داره رو در نزدیک ترین حالت به انچه که مشتریان در تلاش هستند انجام بدهند نزدیک کنه تا در نهایت کاربران در مسیری های که تیم طراحی یا ux تعیین کرده قدم بزنن.حالا یک طراح ux چیکار میکنه ؟طراحی ux یک سری ابزارهایی داره که شامل تحقیق و تست و ازمایش محصول و کاربران هست که بتونه کارهایی از قبیل طراحی های گرافیکی، لایه‌های و قالب اصلی محصول، جمله‌سازی و زبان محصول رو طراخی و پیش ببره.یک طراحی ux برای کشف نیارهای کاربران با اونها جلسات مصاحبه تنظیم میکنه تا تصویر بهتری از نیازهای کاربران بالقوه و نحوه تعاملاتشون با محصول داشته باشه.یک طراحی ux محصول، سرویس یا سیتسمی که طراحی شده رو بعد از طراحی باید تست کنه که ببینه فرضیاتی که برای طراحی استفاده کرده است دقیقا نیازهای کاربران رو حل میکنه یا خیر... برای این کار میتونه اسکریپت‌هایی برای تجزیه و تحلیل در محصول قرار بده یا طرح پیشنهادی رو با سری مشتریان بالقوه تست کنه و در نهایت این نتایج بدست امده از تست ها رو تحلیل کنه تا در سفر مشتری عمیق تر بشه تا روایت ها ومسیرهای موفق رو کشف کنه و ان مسیرهایی که ناموفق بوده، نقاط اصطلاک و درد کاربر رو کشف و سپس حل کند.یک طراحی ux گرامر بصری (visual grammar) محصول رو مشخص می‌کنه یعنی تمامی المان های بصری و استاندارهای اون. مثل ایکون ها و تصاویر و تایپوگرافیاین گرامر باید از نشانه های مرتبط با برند باشد و طراحی ux با بصورت متمرکز این سازگاری ور در کل مسیر طراحی خود حفظ کند. Sepehran Babaei Sepehran Babaei Sun, 24 Mar 2024 12:59:07 +0330