توسعه رابط. طراحی رابط کاربری گرافیکی

فهرست مطالب:

توسعه رابط. طراحی رابط کاربری گرافیکی
توسعه رابط. طراحی رابط کاربری گرافیکی
Anonim

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

از کجا طراحی شروع می شود

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

توسعه رابط مدیریت شده
توسعه رابط مدیریت شده

هرم نیازهای محصول

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

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

رابط کاربری گرافیکی
رابط کاربری گرافیکی

داستان ها و سناریوهای کاربر

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

توسعه رابط برنامه نویسی
توسعه رابط برنامه نویسی

توسعه یک رابط مدیریت شده

امکان تغییر مستقل رابط به نیازهای کاربر در محصولات شرکت "1C" وجود دارد. به عنوان مثال، در سیستم 1C: Enterprise 8.2، با استفاده از ابزارهای توسعه داخلی، مدیر می‌تواند فرم‌ها را برنامه‌ریزی کند، تعامل بین بخش‌های کلاینت و سرور را بهینه کند و پلتفرم را اصلاح کند. در صورت استفاده از کانال های ارتباطی کم سرعت، راه حل های کاربردی نه تنها در شبکه محلی، بلکه از طریق اینترنت نیز در دسترس هستند.

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

روان فیزیولوژی ادراک رابط ها

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

توسعه رابط کاربری
توسعه رابط کاربری

اعداد جادویی 7±2 و 4±1

در دهه 1920، روانشناس جورج میلر آزمایشی را در آزمایشگاه بل انجام داد که در آن گروه هایی از مردم با استفاده از تعداد متفاوتی از اشیا، مسائل خاصی را حل می کردند. در نتیجه، مشخص شد که هر چه از اشیاء کمتری استفاده شود، کار به طور مؤثرتری حل می شود. پس از بررسی نتایج مطالعه، میلراو این قانون را استنباط کرد که 7 ± 2 شی حداکثر عددی است که حافظه کوتاه مدت فرد می تواند در خود جای دهد. مغز شروع به اجتناب از اعداد زیاد برای صرفه جویی در منابع می کند. چندی پیش، یک مطالعه جدید ظاهر شد، که می گوید نباید 7±2، بلکه 4±1 جسم وجود داشته باشد.

تفاوت در نحوه پردازش اجسام توسط مغز

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

توسعه رابط 1s
توسعه رابط 1s

اهمیت اعمال قانون 1±4

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

توسعه‌دهنده نیاز داردوظایفی را برای او تعیین کنید که برای حل آنها کافی است با تعداد کمی از اشیاء کار کنید و پس از آن می توانید ادامه دهید. وقتی کاربر به صفحه نگاه می کند، تقریباً 5 شی را انتخاب می کند که متعاقباً با آنها تعامل دارد. از بین این موارد، او یکی را انتخاب می کند که به سرعت او را به هدف برساند. با کار با شی، مشکل را حل می کند و ادامه می دهد. در نتیجه انرژی آن صرفه جویی می شود، مشکل حل می شود و کاربر با دریافت تجربه ای خوشایند از تعامل با محصول راضی می شود. بنابراین، اعمال قانون 1±4 رابط را بهتر می کند.

توسعه رابط کاربری گرافیکی
توسعه رابط کاربری گرافیکی

استفاده از درک رنگ و اندازه

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

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

تصویر و متن

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

رابط های توسعه برنامه
رابط های توسعه برنامه

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

خوانایی متن

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

پس از توسعه مفهوم، طراحی و نمونه سازی، مرحله نهایی طراحی رابط در حال آزمایش است. پس از گذراندن موفقیت آمیز تست ها، پروژه راه اندازی می شود.

توصیه شده: