https://virgool.io/feed/@Elham.Tofighi طراح تجربه کاربری و رابط کاربری fa 2026-04-15 06:48:32 https://files.virgool.io/upload/users/67967/avatar/BIhFdq.png?height=120&width=120 https://virgool.io/@Elham.Tofighi https://virgool.io/ux-unicorn/%D9%87%D8%B4%D8%AA-%D9%82%D8%A7%D9%86%D9%88%D9%86-%D8%B7%D9%84%D8%A7%DB%8C%DB%8C-%D8%B4%DB%8C%D9%86%D8%AF%D8%B1%D9%85%D9%86-%D8%AF%D8%B1-%D9%85%D9%88%D8%B1%D8%AF-%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-hnugmkaznhau این قوانین از متن طراحی رابط کاربر توسط بن شیندرمن گرفته شده است . شیندرمن این مجموعه از اصول را مطرح کرده است که به لحاظ اکتشا فی حاصل تجربه و قابل اعمال در بیشتر سیستم های تعاملی بعد از پالایش، گسترش و تعبیر و تفسیر شدن هستند.برای بهبود قابلیت استفاده ی یک کاربرد مهم است که یک رابط با طراحی خوب داشته باشیم. 8 قانون طلایی شیندرمن در مورد طراحی رابط به عنوان راهنما یی برای یک طراحی تعاملی مناسب است.تلاش برای ثبات (Strive for consistency)دنباله های متناوب اعمال بهتر است که در موقعیت های مشابه یکسان باشند؛ اقدامات و الگوهای طراحی یکسان برای شرایط مشابه باید در منوها و برگه های راهنما استفاده شود و دستورات ثابت نیز باید در سراسر متن به کار برود. به خاطر داشته باشید که یک رابط کاربری منسجم به کاربرانتان اجازه می دهد اقدامات و اهداف خود را به آسان ترین شیوه ممکن انجام  دهند.الگوهای طراحی یکپارچهکاربران دائمی را به استفاده از میانبرها توانا سازید (Enable frequent users to use shortcuts)با افزایش فراوانی استفاده، میل کاربران نیز به کاهش تعداد تعاملات و افز ایش سرعت تعامل افزایش مییابد . اختصارات ، کلیدهای عمل ، دستورات مخفی و امکانات زیاد برای یک کاربر متخص خیلی مناسب هستند.نمایش shortcuts برای افزایش سرعت و عملکرد کاربربازخوردهایی با اطلاعات مفید ارائه دهید(Offer informative feedback)برای هر کار اپراتور (کاربر)، باید بازخورد وجود داشته باشد. برای فعالیت های کوچک و مکرر، پاسخ باید نسبتا کم و نامحسوس باشد، در حالی که برای فعالیتهای بزرگ و غیرتکراری، این پاسخ باید خیلی بزرگتر و مشخص باشد.شما باید در هر مرحله از فرایندی که کاربر در آن قرار دارد به او در مورد اتفاقی که در حال روی دادن است آگاهی دهید. این بازخوردها باید با معنی، مرتبط، واضح و متناسب باشند.بازخوردهای مفید ارائه دهید.مکالمه طراحی کنید(Design dialog to yield closure)توالی فعالیت ها باید به گروه هایی سازماندهی شوند که دارای شروع ادامه و پایان باشند. بازخورد آموزنده در مرحله ی پایان مجموعه ای از فعالیتها به کاربرها احساس رضایت از انجام کار، احساس آسودگی، نشانه ای برای کنار گذاشتن طرح های تصادفی و گزینه هایی از ذهن آنها را ارائه می دهند و نیز نشانه ای برای این است که راهی مشخص برای آمادگی برای گروه بعدی فعالیت ها وجود دارد. سعی کنید کاربرانتان را شگفت‌زده  نکنید.فرآیندها را طوری طراحی کنید که ابتدا وسط و پایان آن ها مشخص باشد روش هایی ساده برای کنترل خطا ارائه دهید(Offer simple error handling)تا حد ممکن، سیستم را به نحوه ی طراحی کنید که کاربر نتواند مرتکب خطا ی جدی شود. اگر خطایی پیش آمد، سیستم باید قادر باشد تا خطا را شناسایی کند و مکانیسمی ساده، قابل درک برای کنترل آن خطا ارائه دهد .پیام خطاهای ساده و واضحبرگشت ساده ی فعالیت ها را ممکن سازید(Permit easy reversal of actions)این ویژگی باعث از بین رفتن نگرانی می شود، چون کاربر می داند که خطاها امکان برگشت دارند؛ در نتیجه کشف فعالیت (های ناشناخته را امکان پذیر می کند. واحدهای برگشت پذیری ممکن است به عنوان یک فعالیت واحد ، یک مدخل داده یا گروه کاملی از فعالیت ها باشند.امکان بازگشت به مرحله قبلاز منبع داخلی کنترل حمایت کنید(Support internal locus of control)به کاربران این قدرت را بدهید که انتخاب کنند که آیا برنامه را ادامه دهند یا از آن خارج شوند. کاربران مجرب به شدت تمایل دارند این احساس را داشته باشند که مسئول سیستم هستند و سیستم به فعالیت های آنها پاسخ میدهد. سیستم را به گونه ای طراحی کنید که کاربران را به عنوان سازندگان اقدامات تشویق کنید نه پاسخ دهندگان.از بار حافظه ی کوتاه مدت بکاهید(Reduce short- term memory load)بخاطر محدودیت پردازش اطلاعات بشر در حافظه ی کوتاه مدت نیازمند است که نمایشها ساده باشند، صفات نمایش چندگانه درهم ادغام شوند، فراوانی حرکت کاهش یابد و زمان مناسب و کافی برای کدها، نمایه ها و توالی فعالیت ها در نظر گرفته شود. به طور مثال چون انسان در یک زمان تنها قادر به نگهداری 5 مورد در حافظه کوتاه مدت خود است، اپل با در نظر گرفتن این حقیقت در طراحی منو اصلی گوشی های خود تنها 4 آیکون قرار داده است.و نکته‌ی نهایی اینکه همه‌ی این موارد مجموعه ای از قوانین ساده و کارآمد هستند که به ما در تصمیم‌گیری و قضاوت کمک  می‌کنند. به آنها می‌توان به عنوان مجموعه ای از قوانین کلی به عنوان بهترین تمرینات رابط کاربری نگاه کرد.منبع: https://www.interaction-design.org/literature/article/shneiderman-s-eight-golden-rules-will-help-you-design-better-interfaces الهام توفیقی الهام توفیقی Thu, 07 Jan 2021 13:53:48 +0330 https://virgool.io/ux-unicorn/10-%D9%81%D8%A7%DA%A9%D8%AA%D9%88%D8%B1-%D8%A7%D8%B5%D9%84%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%D9%BE%D8%B0%DB%8C%D8%B1%DB%8C-%D8%B1%D8%A7%D8%A8%D8%B7-%D9%87%D8%A7%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-t32mwtbdu1sb ژاکوب نیلسون و رولف مونیخ در سال 2017 به معرفی 10 فاکتور اصلی کاربردپذیری رابط های کاربری پرداخته اند که در این مقاله به بیان و تشریح این قوانین می پردازیم:قابلیت رویت وضعیت سیستم (Visibility of system status)کاربران همواره باید نسبت به عملیات های سیستم به آسانی مطلع باشند و همچنین موقعیت خود در سامانه بدانند تا گزارش های مربوط به وضعیت موجود در زمان منطقی را درک کنند. هماهنگی سیستم با دنیای واقعی (Match between system and the real world)طراحان باید تلاش کنند تا نوع زبان، عبارت شناسی و مفاهیمی را منعکس کنند که کاربران در دنیای واقعی پیدا می کنند)در مقابل صحبت های فنی(. ارائه ی اطلاعات در ترتیب منطقی و به دوش کشیدن انتظارات، ممکن است طی تعاملات دنیای واقعی ایجاد شود و از موانع شناختی بکاهد و استفاده از سیستم را آسانتر کند.هماهنگی های شناختی ذهن کاربر و سیستمهماهنگی های دیداری سیستم با دنیای واقعی آزادی و کنترل کاربر (User control and freedom)به عنوان پیشنهاد به کاربران یک فضای دیجیتالی بگویید که در آنجا مراحل بازگشتی نیز امکان پذیر هستند، این موارد عبارتند از تکرار یا از بین بردن اقدامات پیشین .ایجاد امکان ادامه دادن و یا بازگشت ثبات و استانداردها (Consistency and standards)طراحان رابط کاربری باید این اطمینان را ایجاد کنند که ثبات در رنگهای مورد استفاده، ثبات در قلم‌ها ، اندازه فونت‌ها، ثبات در اندازه عناصر و ثبات در فاصله اصطلاحات یا کلمات خاص در سراسر صفحه های مشابه حفظ می شوند. همچنین نباید هیچ گونه ابهام در واژه ها وجود داشته باشد. برای مثال کاربران از اعمال ، کلمات و موقعیت هایی خاص برای نمایش یک چیز مشترک استفاده می کنند. https://material.io/یک مثال خوب برای یک سیستم با ثبات در طراحی رابط های کاربری ، Apple‘s Human Interface Guidelines و Google‘s Material Design Guidelines است.توجه! لینک زیر ابزاری بسیار جذاب است که می توانید با آن ساختار دیداری محصول خود را تعریف کنید. https://frontify.com/styleguide تشخیص به جای یادآوری (Recognition rather than recall)اطلاعات مرتبط با فعالیت را زمانی که کاربران در حال انجام فعالیت ها هستند را درون صفحه نمایش حفظ کنید تا بار شناختی کاهش یابد . به دلیل محدود یت‌ها‌ی حافظه‌ی کوتاه مدت، طراحان باید به کاربران این اطمینان را بدهند که مجبور نیستند اطلاعات را در طول بخش های فعالیت به خاطر بسپارند. حفظ این اطلاعات به صورت اشکار یا ارائه‌ی ابزارهای آسان مرتبط با بازیابی این اطلاعات ضرورت دارد.ارائه‌ی آیتم ها در صفحه برای راحت‌تر کردن انتخاب کاربر پیشگیری از خطا (Error prevention)جلوگیری از خطا، در صورت امکان سیستم ها را به گونه ای طراحی کنید که تعداد خطاها ی ممکن آنها در حداقل نگه داشته شود. با این کار کاربران مجبور نمی شوند مشکلات را اصلاح کنند که ممکن است گاهی فراتر از سطح تخص آنان باشد . حذف فعالیت هایی که ممکن است به خطاها یی بیانجامد ، راه حلی برای ممانعت از خطای کاربر هستند.نمایش خطای کاربر در حین انجام آن انعطاف پذیری و کارایی استفاده (Flexibility and efficiency of use)با استفاده ی افزایشی، تقاضا برای تعاملات کم ایجاد می شود که موجب رشد سریع می شود. این مسئله را می توان به واسطه ی استفاده از اختصارات ، کلید های عمل، دستورات مخفی یا امکانات زیاد بدست آورد. کاربران باید قادر باشند تا رابط را شخصی سازی کرده یا تغییر دهند تا متناسب با نیازها یی باشد که فعالیت های مداوم آنها از طریق این ابزارهای مناسب حاصل شود .امکان وارد کردن شماره موبایل یا نام کاربری که نمایش خوبی از انعطاف پذیری سیستم است. زیبایی شناسی و طراحی ساده (Aesthetic and minimalist design)آشوب و در هم ریختگی را در فضای رابط کاربری به حداقل برسانید. همه ی منابع توجه کاربربین عملکرد اصلی و اطلاعات غیرضروری در رقابت است که موجب دشواری بازیابی اطلاعات مرتبط می شود. بنابراین،المان های صفحه نمایش باید تنها به اجزای مورد نیاز برای وظایف فعلی کاهش یابد، ضمن اینکه برای هدایت کاربر به سوی اطلاعات خاص، فعالیت ها و اعمال یا محتوای دیگراز ابزارهایی شفاف و محسوس استفاده شود .سادگی در خدمت عملکردبه کاربران کمک کنید تا خطاها را تشخیص داده و جبران کنند (Help users recognize, diagnose, and recover from errors)طراحان باید فرض کنند که کاربر نسبت به اصطلاحات فنی اطلاعاتی ندارد ، بنابراین پیام های خطا باید به زبان ساده ارائه گردد تا توجه کاربران را به مشکلات معطوف کند و راه حل ها باید به گونه ای بیان شوند که هیچ چیزی در ترجمه از زبان فنی به زبان بصری از قلم نیفتند. همچنین تا حد ممکن کاربر ر ا غافلگیر نکنید. یکی از مهم ترین اصول طراحی یک رابط کاربری خوب ، اجتناب از غافلگیر کردن کاربر است منظور از غافلگیر کردن کنش یا واکنشی از طرف نرم افزار است که برخلاف انتظار کاربر باشد. شرط موفقیت در اجتناب از غافلگیری کاربر داشتن درک درستی از انتظارات و پیش زمینه های ذهنی کاربر است.پیام خطای کامل کمک و مستندسازی (Help and documentation)اگرچه مسئله ی ایده آل برای کاربران این است که بدون رفت و آمد مکرر به سیستم بتوانند به اهداف و عملکرد مورد نظر هدایت شوند، ممکن است گاهی استفاده از مراحل بیشتر برای رسیدن به هدف نیز نیاز باشد. در چنین مواقعی ، از موقعیت و دسترسی های کاربر اطمینان حاصل نمایید و همچنین اطمینان یابید که فعالیت و عملکرد در نظر گرفته شده در تخصص کاربر مورد نظر می باشدو­­ آنها را به سو ی مراحل ضرور ی هدایت میکند.نمایش همه ی مراحل یک فعالیت که به عملکرد بهتر کاربر کمک می‌کند.و نکته‌ی نهایی اینکه همه‌ی این موارد مجموعه ای از قوانین ساده و کارآمد هستند که به ما در تصمیم‌گیری و قضاوت کمک  می‌کنند. به آنها می‌توان به عنوان مجموعه ای از قوانین کلی به عنوان بهترین تمرینات رابط کاربری نگاه کرد.منبع: https://medium.muz.li/10-tips-on-how-to-conduct-a-perfect-heuristic-evaluation-ae5f8f4b3257 الهام توفیقی الهام توفیقی Thu, 07 Jan 2021 13:40:30 +0330 https://virgool.io/ux-unicorn/%D8%A8%D8%A7%DB%8C%D8%AF%D9%87%D8%A7-%D9%88-%D9%86%D8%A8%D8%A7%DB%8C%D8%AF%D9%87%D8%A7%DB%8C-date-picker-by7vyhqo0hrj انتخابگر تاریخ( Date Picker) یک کادر ورود اطلاعات است که به شما امکان انتخاب تاریخ از طریق ورود متنی و یا تعامل با یک صفحه تقویم را می‌دهد. با وجود اینکه یک جزء نسبتاً ساده است، اما یکی از عناصر متداول در طراحی‌هاست. وقتی کادر تاریخ تولد را پر می‌کنیم و یا قرار ملاقات آنلاین با پزشک یا رزرو مرخصی ترتیب می‌دهیم، با انتخاب کنندگان تاریخ تعامل می‌کنیم. طراحی خوب انتخابگر تاریخ موجب می‌شود؛ کاربران تاریخ را با چند کلیک ساده انتخاب کنند.اما چگونه می‌توان یک انتخابگر تاریخ طراحی کرد که قابلیت استفاده خوبی داشته باشد؟ در این مقاله، می‌خواهیم روی دو عنصر مهم انتخابگر تاریخ یعنی، قسمت ورودی عددی و صفحه تقویم تمرکز کنیم.قسمت ورودی عددیاز جداکننده‌های مکان (placeholders) برای نشان دادن قالب ورودی استفاده کنید. در خیلی از موارد، بهتر است قسمت ورودی را خالی نگذارید و با جداکننده های مکان قسمت های مربوط به هر بخش را مشخص کنید. شکل زیر نمونه ای از ورودی صحیح را نشان می‌دهد.نمایش محل ورود اطلاعات به ترتیب روز، ماه و سالحفظ ساختار پیشنهادی، زمانی که کاربر قسمت ورودی را فعال کرده است.از آنجا که در برخی از پیاده سازی‌ها ، هنگامی که کاربر در کادر مورد نظر کلیک می‌کند، جداکننده‌ها ناپدید می‌شود؛ در این زمان برخی از کاربران ساختار مورد نظر را -خارج از دید، خارج از ذهن - فراموش می‌کنند. به همین دلیل وقتی کاربر قسمت ورودی را فعال می کند، ساختار پیشنهادی تاریخ مورد انتظار، باید قابل مشاهده باشد.جداکننده‌های تاریخ را در زمان وارد کردن تاریخ توسط کاربر در حالت نمایش نگه دارید و اگر امکان پذیر نیست، برای ادامه نمایش قالب از یک برچسب شناور استفاده کنید.جداکننده را مخفی نکنید.در زمان ورود اطلاعات وقتی جداکننده را پنهان می‌کنید، برخی از کاربران سعی می‌کنند آن را به صورت دستی اضافه کنند. به احتمال زیاد، کاربران از علامت جداکننده مانند (-) یا (/) استفاده می‌کنند و این می تواند هنگام اعتبارسنجی تاریخ خطا ایجاد کند. به همین دلیل بهتر است که جدا کننده ها هنگام وارد کردن دستی تاریخ نمایش داده شود.طراحی با قابلیت حرکت یکپارچه بین روز _ ماه _ سالبا شروع کار تایپ توسط کاربر، انتقال بین روز، ماه و سال باید بطور خودکار و بدون هیچ گونه تلاشی از طرف کاربر انجام شود. تمام کاری که کاربر باید انجام دهد این است که تایپ کردن روی صفحه کلید عددی را ادامه دهد.آیا باید ورودی‌ها به صورت پیش فرض از قبل پر شده باشند؟پاسخ این سوال را باید در همان فرمی که از کاربر اطلاعات میگیریم جستجو نماییم. در مجموع اگر ورودی‌ها با اطلاعات صحیح از قبل پرشده باشند برای کاربر رضایت بخش است اما باید از مقداردهی تصادفی در کادرهای ورودی پرهیز کنید؛ مقداردهی تصادفی کاربر را مجبور میکند که کادر را پاک کرده و مقدار صحیح را وارد نماید و این عمل میزان کار اضافه تری از کاربر میخواهد که طبیعتا خوشایند نیست.آیا ورودی کادر‌ها -زمانی که کاربر تاریخ ها را انتخاب کرده اما صفحه را مجددا بارگیری می کند- باید پایدار باشد؟بله. اگر کاربر به طور تصادفی صفحه را مجدد بارگیری کند ، از اینکه مجبور به تایپ مجدد اطلاعات باشد خوشحال نخواهد شد.صفحه تقویمآیا در همه کادرهای ورودی تاریخ، باید صفحه تقویم را قرار دهیم؟خیر ، ورودی تاریخ لزوماً به تقویم نیاز ندارد. به عنوان مثال ، اگر تاریخ به گذشته یا آینده بسیار دور مربوط باشد (مثلا تاریخ تولد) ، یک ورودی عددی منظم راه حل مناسب‌تری است.تاریخ فعلی را مشخص کنید.فراموش نکنید که روز فعلی را نشان دهید، بنابراین کاربران دیگر نیازی به بررسی تقویم سیستم عامل ندارند تا ببینند امروز چه روزی است.مشخص کردن تاریخ امروزجداسازی بصری تاریخ امروز و تاریخ انتخاب شدهبرای درک بهتر موضوع نگاهی می اندازیم به مقاله‌ نمایش وضعیت سیستم در رابط کاربری که این دید کلی را ایجاد می کند که یک سیستم همواره باید کاربر را مطلع کند که در حال حاضر چه چیزی در جریان است و کاربر کجاست. نمایش وضعیت فعلی یک اصل مهم در طراحی سیستم‌های تعاملی است و به معنی داشتن یک ارتباط شفاف و مناسب با کاربر است که باعث می‌شود احساس کند بر سیستم کنترل دارد و این احساس کنترل باعث شکل‌گیری حس اعتماد در او خواهد شد.فقط تاریخ‌هایی را نمایش دهید که قابل انتخاب هستند.این موضوع برای فرم های سفارش خدمات بسیار مهم است. به عنوان مثال ، اگر از صفحه تقویم در فرم رزرو یک آپارتمان استفاده می کنید و می دانید که آپارتمان در بعضی از تاریخ ها در این ماه موجود نیست؛ بهتر است تاریخ های غیر قابل انتخاب را در حالت غیر فعال نمایش دهید. با انجام این کار شما به کاربران کمک خواهید کرد از انتخاب تاریخ های غیرقابل استفاده خودداری کنند و در نتیجه با پیام خطا یا ناموجود بودن آپارتمان هم مواجه نشوند.از نمایش تاریخ های غیرقابل دسترسی خودداری کنید.با ارائه اطلاعات مفید فرآیند تصمیم گیری را ساده کنیداین امر به ویژه برای مواردی که کاربران می خواهند گزینه های موجود را بررسی کنند ، بسیار مفید است. به عنوان مثال ، وقتی یک کاربر طی چند هفته آینده به دنبال مسافرت در تعطیلات است، اما تاریخ دقیقی در ذهن ندارند شما می توانید با نمایش قیمت و روزهای تعطیل و همینطور روزهای در دسترس به آنها کمک کنید.برای مثال نمایش گزینه قیمت و مناسبت در هر روز، فرایند تصمیم گیری کاربر را ساده می کند. موضوع قابل تامل در این مقاله، قرینه سازی پترن تقویم های دیجیتال زبان فارسی با الگوی راست چین زبان فارسی است.در مقاله ای با عنوان چه پترن‌هایی در زبان فارسی قرینه می‌شوند؟ به نکات جالبی در این زمینه اشاره شده است از جمله اینکه علارغم تمامی نظریه‌های قرینه ساز‌ی فعلی همچنان از نظر تمامی کاربران حرکت رو به جلو به سمت راست و حرکت رو به عقب به سمت چپ است. این بررسی ها کمک شایانی در طراحی و تعیین جهت رو به جلو و یا عقب و تطبیق آن با مدل ذهنی کاربر ایرانی دارد. آیا باید روزهای هفته را در تقویم نشان دهیم؟باز هم بستگی به ماهیت فرم شما دارد. نمایش روز واقعی هفته برای رزرو فرم های قرار ملاقات مهم است. اما می توانید برای فرمهایی که اطلاعات شخصی را درخواست می کنند (مانند تاریخ تولد) بی ارتباط باشد.آیا تقویم به صورت خودکار باز می شود؟آیا وقتی کاربر روی ورودی تاریخ کلیک کرده، باید صفحه تقویم را به طور خودکار نشان دهیم؟ هیچ پاسخ کلی برای این سوال وجود ندارد. اما ما باید نهایتا یک سفر کاربر یکپارچه طراحی کنیم. اگر صفحه تقویم خودکار به کاربران در صرفه جویی در وقت کمک می کند ، ما باید آن را لحاظ کنیم.نکات اشاره شده در این مقاله می توانید در هدایت کاربر و رساندن آن به لحظه اعتماد( moment of truth) به سرویس و نهایتا ارتقا کسب و کار بسیار کمک کننده باشد.اگه شما هم در طراحی صفحات تعاملی Date Picker تجربیاتی دارید، یا در مورد این مقاله نظری دارید، خوشحال میشم مطرح کنید تا بتونیم به رشد هم کمک کنیم.منبع:https://uxplanet.org/date-picker-design-best-practices-41bd522f10a5 الهام توفیقی الهام توفیقی Thu, 07 May 2020 13:23:15 +0430