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

برای تبدیل شدن به یک طراح رابط کاربری موفق به چه چیزی نیاز داریم؟

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

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

اینکه عنصری چقد بزرگ  است یا چقدر کوچک ،  به سایز عناصر بر روی صفحه نمایش بستگی دارد و به ویژه وقتی که یک عنصر طراحی در صفحه خیلی بزرگتر از موارد مشابه اطراف آن در صفحه است.  در واقع سایز، المانی از طراحی است که کاربران با توجه به آن، عناصر  را اعم از ( دکمه ها ، متون و…) را در صفحه دنبال می‌کنند و عاملی موثر در انتقال سلسله مراتب اطلاعات است. بنابراین وقتی یک متنی bold است نسبت به حالت regular آن نشان دهنده اهمیت بیشتر آن است و موجب سرعت در جلب توجه کاربر می‌شود. اصول انتخاب رنگ در رابط کاربری  با توجه به اینکه اکثر مردم به راحتی از رنگ‌ها صحبت میکنند طراحان هنگام بررسی رنگ‌ها برای یک رابط کاربری باید بسیار دقت کنند و برای انتخاب یک پالت رنگی  مناسب باید ابتدا به  اهداف ، نام تجاری و محتوای آنان دقت کنند .  بنابراین بسیار سودمند خواهد بود اگر به مفاهیمی همچون ارزش رنگها و میزان روشنایی و … آنان در طراحی فکر کنند. اینکه یک عنصر چقدر روشن یا چقد تیره است در درجه اول به پس زمینه آن مربوط بوده و به آن بستگی دارد. برای مثال در یک بک گراند تیره، متن تیره مناسب نخواهد بود. ولی در یک بک گراند روشن استفاده از رنگ تیره برای یک متن کاملا مناسب است.  اگر یک تصویری بیش از حد روشن یا بیش از حد تیره باشد نمی‌توانید جزئیات داخلی آن را به خوبی درک کنید. کاربران نیز به سرعت این مقادیر را تشخیص داده و درک می‌کنند.

بنابراین مقادیر و درجه بندی رنگ ها میتواند یک ابزار مناسب برای جلب توجه کاربران باشد تا بهتر عناصر را درک کنند. اینکه عنصری زرد ، قرمز یا نارنجی باشد تفاوت های زیادی را ایجاد میکند. رنگ میتواند به سرعت توجه مارا جلب کند اما کاربران اغلب پیوندهای چند لایه با رنگ ها دارند . در برخی از حرفه ها رنگ ها معانی خاصی دارند.  مثلا در غرب  رنگ قرمز برای یک حساب دار یعنی منفی و رنگ سیاه یعنی مثبت یا یک فروشنده اوراق بهادار رنگ آبی را به عنوان خرید و قرمز را به عنوان فروش میبیند.  در چراغ های راهنمایی و رانندگی قرمز معنی توقف و گاهی معنی خطر دارد. بنابراین برخلاف اندازه یا ارزش ، رنگ به طور ذاتی در فرهنگ های مختلف دارای ویژگی های متفاوت و معانی خاصی است . این ویژگی بسیار  سودمند خواهد و با استفاده از آن می‌توانید اطلاعات را هدایت کنید. و برای انجام این کار نیز می‌توانید از اشکال مختلف، بردارها و سایزهای کوچک و بزرگ بهره مند شوید. (بالا، پایین، چپ، راست، جلو، عقب و …). برای مثال اگر میخواهید نشان دهید که بازار سهام در یک گراف یکنواخت قرار دارد بهتر از یک فلش رو به پایین قرمز رنگ استفاده کنید.  توجه کنید و این سوال را از خود تان بپرسید که عناصر خشن هستند یا نرم و صاف؟ یا هموار هستند یا ناهموار و نامنظم؟ البته عناصر و المان‌ها در صفحه بافت واقعی را ندارد اما می‌توانند ظاهری از آن را داشته باشند.   در مقاله بعد به ادامه این بحث می‌پردازیم!

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

اهمیت متن‌ها و تایپوگرافی در رابط و تجربه کاربری

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

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

 

طراح گرافیک و وب‌سایت، متخصص تولید محتوای حرفه‌ای در زمینه دیجیتال مارکتینگ، طراحی سایت، سئو

Leave a comment

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *