سادگی چیست؟ سادگی کیفیت طبیعی، ساده و قابل فهم بودن است. جای تعجب نیست که سادگی اغلب در طراحی رابط کاربری رونق می گیرد. اکثر مردم به طور طبیعی از پیچیدگی در دستگاه ها و نرم افزارها خوششان نمی آید. بله، برخی از مردم از فهمیدن اینکه چگونه یک چیزی کار می‌کند خوشحال می‌شوند، اما برای بسیاری از ما، ناتوانی در کار با دستگاه منجر به اتلاف وقت و ناامیدی می‌شود، و این چیز خوبی نیست.
اگر می‌توانید یک دستگاه پیچیده یا یک نرم‌افزار را بردارید و به نحوی رابط را مرتب کنید، سازماندهی مجدد و طراحی مجدد کنید تا استفاده و درک آن آسان باشد، در این صورت در راه ارائه یک تجربه کاربری بهتر هستید. .
در این مقاله قصد دارم در مورد 7 تکنیک عملی صحبت کنم که می‌توانید در طراحی وب از آنها برای ساده‌تر کردن وب‌سایت‌ها یا برنامه‌های کاربردی وب خود استفاده کنید.
1. پنجره های مدال
مطمئنم که می توانید روزهای قبل از معرفی مسدود کننده های پاپ آپ در مرورگرهای وب را به خاطر بیاورید، زمانی که مجبور بودید با انبوهی از پنجره های کوچک که ظاهراً اغلب تصمیم می گرفتند در بالای پنجره مرورگر شما ظاهر شوند مبارزه می کردید. تنها با این هدف که شما را اذیت کند. هیچ کس آن پنجره های پاپ آپ را دوست نداشت و فناوری های مسدود کننده برای متوقف کردن آنها معرفی شدند. اما امروز، نسل جدیدی از پنجره‌های پاپ‌آپ را در وب می‌بینیم که بسیار تمیزتر هستند و در هدف مورد نظرشان بسیار بهتر عمل می‌کنند. اینها پنجره های مدال هستند.
پنجره‌های مدال مانند پنجره‌های پاپ‌آپ هستند، اما به جای اینکه در یک پنجره مرورگر جداگانه ظاهر شوند، دقیقاً در پنجره فعلی، بالای محتوا ظاهر می‌شوند. پنجره‌های مودال برای ادامه به تعامل نیاز دارند، بنابراین محتوای زیر معمولاً تیره می‌شود برای نشان دادن این موضوع، و همچنین برای مسدود کردن صدای مزاحم محتوا و تغییر تمرکز بصری بر روی پنجره بالا قوی.
پس چرا از ویندوزهای مدال استفاده می کنید و چگونه رابط کاربری شما را ساده می کنند؟ خوب، اگر به جایگزین نگاه کنید، هدف آنها بسیار واضح تر می شود. جایگزینی برای استفاده از چیزی مانند پنجره مدال معمولاً بارگذاری یک صفحه جدید است. به عنوان مثال، برخی از سایت ها صفحه تنظیمات برای حساب شما دارند. وقتی روی پیوند تنظیمات کلیک می کنید، به صفحه جدیدی هدایت می شوید. اما اگر فقط چند گزینه تنظیمات وجود داشته باشد چه می شود – آیا واقعا ارزش هدایت کاربر به صفحه جدید را دارد؟
در بسیاری از موارد، مواردی مانند تنظیمات، کادرهای ویرایش و فرم‌های ورود به سیستم می‌توانند در یک پنجره مودال روی محتوا نمایش داده شوند. این کار کاربر را در یک سفر برگشت به صفحه دیگری ذخیره می‌کند. همچنین بار روی وب سرور را کاهش می دهد زیرا باید با درخواست های کمتری مقابله کند.
ActionMethod، یک برنامه مدیریت پروژه، پنجره‌های مدال را در سراسر برنامه نمایش می‌دهد. این فرم قدردانی است.
2. کنترل‌های ماوس را نگه دارید.
قرار دادن چیزهای کمتر در بشقاب نیز قورت دادن ظرف را آسان‌تر می‌کند. اگر برنامه شما کنترل های زیادی دارد، کاربران شما باید اکثر آنها را اسکن کنند تا آنچه را که به دنبال آن هستند بیابند. به احتمال زیاد، برخی از کنترل ها اهمیت کمتری نسبت به سایرین دارند، و برخی از کنترل ها بسیار کمتر از سایرین استفاده می شوند. ساده ترین کاری که می توانید انجام دهید این است که این کنترل ها را از نمای پیش فرض پنهان کنید.
یک راه هوشمندانه برای انجام این کار این است که کنترل ها را پنهان کنید، اما زمانی که کاربر روی مناطق خاصی شناور می شود، آنها را نشان دهید. اینها کنترل های شناور هستند. به عنوان مثال، توییتر، یک برنامه میکروبلاگینگ محبوب، فیدهایی را نشان می دهد که همه افراد در لیست دنبال کننده شما اخیراً گفته اند. هر پیام در جعبه کوچک خود کپسوله شده است. دو عمل وجود دارد که می توانید روی هر پیام انجام دهید: آن را به موارد دلخواه خود اضافه کنید یا به آن پاسخ دهید.
نمایش دکمه‌های مورد علاقه و پاسخ در همه پیام‌ها منجر به درهم ریختگی می‌شود. به احتمال زیاد نمی خواهید به هر پیامی در فید پاسخ دهید، و حتی کمتر بخواهید همه آنها را به موارد دلخواه خود اضافه کنید. بنابراین توییتر فقط کنترل‌ها را در زمینه مناسب نمایش می‌دهد – زمانی که ماوس را روی پیام نگه دارید. این منجر به رابط ساده‌تر و بدون از دست دادن عملکرد می‌شود.
این خطر وجود دارد که کاربران جدید وقتی این کنترل‌ها پنهان هستند، متوجه آنها نشوند. با این حال، بسیاری از مردم تمایل دارند که روی چیزهایی که به آنها نگاه می‌کنند حرکت کنند، بنابراین با توجه به اینکه مناطق شناور به اندازه کافی بزرگ هستند، احتمالاً این کنترل‌ها به سرعت کشف می‌شوند.
تویتر افزودن به موارد دلخواه و را نشان می‌دهد دکمه‌های reply برای هر پیام در حالی که ماوس را روی آن می‌برید.
3. کنترل‌های درخواستی
یک راه دیگر برای پنهان کردن چیزها استفاده از جاوا اسکریپت و نمایش مجموعه ای از کنترل ها هنگامی که کاربر در جایی کلیک می کند. به عنوان مثال، ممکن است یک کادر جستجو در سایت خود داشته باشید که امکان برخی فیلترهای سفارشی یا جستجوهای پیشرفته را فراهم می کند. به جای اینکه این گزینه‌ها را به‌طور پیش‌فرض نشان دهید، می‌توانید آنها را پنهان کرده و از طریق دکمه‌ای در انتهای نوار جستجو به آنها دسترسی داشته باشید.
با کلیک بر روی این دکمه می توان مجموعه ای از گزینه ها یا فیلترها را نشان داد. این بدان معناست که شما عملکرد پیشرفته را برای آن دسته از کاربرانی که به آن نیاز دارند حفظ می کنید و در عین حال رابط کاربری را برای افرادی که فقط نیاز به استفاده از جستجوی ساده دارند، ساده می کنید.
همه از برخی از کنترل‌های پیشرفته یا تخصصی‌تر در سایت شما استفاده نمی‌کنند. با پنهان کردن آنها، رابط را تمیزتر و درک آن آسان تر می کنید زیرا کاربران جدید عناصر کمتری برای پردازش و کشف دارند. انتخاب اینکه چه چیزی پنهان شود و چه چیزی نگه دارید کار آسانی نیست، و این وظیفه شما به عنوان طراح است که تعادل مناسب را پیدا کنید.
Kontain، یک برنامه وبلاگ نویسی، فیلترهای جستجوی پیشرفته ای را برای جستجوی خود فراهم می کند که در یک پنهان شده است. منوی کشویی در انتهای نوار جستجو.
4. در حال گسترش فرم ها
مطمئنم شما با فیلد آپلود فایل که اغلب در فرم های وب می بینیم آشنا هستید. معمولاً یک نوار کوچک با دکمه مرور فایل در کنار آن است. موقعیتی را تصور کنید که کاربر احتمالاً چندین فایل را همزمان آپلود کند. شما می‌توانید چندین فیلد آپلود فایل را نمایش دهید، اما این ایده‌آل نیست زیرا رابط کاربری را به هم می‌ریزد و هیچ راهی برای تشخیص تعداد فیلدهای مورد نیاز کاربر وجود ندارد. یک راه حل عالی در این مورد استفاده از فرم در حال گسترش است.
هنگامی که کاربر یک فایل را آپلود کرد، فیلد آپلود فایل دیگری در زیر ظاهر می شود که آماده پذیرش بیشتر است. شما می توانید همین تکنیک را برای هر فیلد ورودی دیگری پیاده سازی کنید. به عنوان مثال، ممکن است این فرم به تعدادی آدرس ایمیل برای افرادی که می خواهید به یک تیم یا هدف دیگری دعوت کنید نیاز داشته باشد. به جای داشتن تعداد زیادی فیلد نوشتاری، می‌توانید فقط یک یا چند فیلد داشته باشید، و سپس هنگامی که کاربر آنها را پر می‌کند، فیلدهای جدید زیر آن ایجاد می‌شود. گسترش فرم به این روش یک راه عالی برای صرفه جویی در فضا و ساده کردن رابط کاربری شما است.
Gmail هنگام نوشتن یک پیام جدید فقط یک فیلد پیوست را نمایش می دهد. می‌توانید روی پیوند «پیوست یک فایل دیگر» کلیک کنید تا در صورت نیاز موارد بیشتری باز شود.
5. برچسب‌های داخل فرم‌های ورودی
فرم‌ها می‌توانند به سرعت پیچیده شوند. شما فیلدهای متنی، برچسب‌ها، نواحی متنی، کشویی، چک باکس و غیره و غیره دارید. علاوه بر این، پر کردن فرم‌ها معمولاً خیلی سرگرم‌کننده نیست، بنابراین سرعت بخشیدن به فرآیند و ساده‌تر کردن فرم‌ها باعث می‌شود که آنها کمتر دلهره‌آور و آسان‌تر استفاده شوند. یکی از تکنیک‌هایی که می‌توانید برای ساده‌تر جلوه دادن فرم‌ها استفاده کنید، حرکت دادن برچسب‌ها از خارج از نواحی ورودی به داخل است. بنابراین، به‌جای نشان دادن برچسب در کنار آن فیلد نوشتاری، آن را به‌عنوان یک مقدار از پیش پر شده در داخل فیلد نوشتاری نشان دهید.
این به طور قابل توجهی فضا را کاهش می دهد و اندازه کلی فرم را کوچک می کند. چیزهای کوچکتر ساده‌تر به نظر می‌رسند، بنابراین پر کردن فرم باید آسان‌تر به نظر برسد. ممکن است این کار برای فرم‌های پیچیده‌تر که در آن انواع ورودی‌ها (چک باکس‌ها، دکمه‌های رادیویی، دراپ) وجود دارد، امکان‌پذیر نباشد. downs)، اما اگر چند فیلد متنی دارید، ارزش در نظر گرفتن را دارد، به عنوان مثال. یک فرم ورود به سیستم.
اکنون، این روش یک نقطه ضعف دارد که خوشبختانه می توان با اجرای دقیق تر آن را برطرف کرد. وقتی کاربر برای اولین بار صفحه را بارگیری می کند، فیلدها را می بیند و می تواند برچسب ها را بخواند. هنگامی که آنها بر روی یک فیلد کلیک می کنند، اکثر فرم هایی مانند این برچسب را به طور کامل پنهان می کنند و به کاربر اجازه می دهند ورودی خود را تایپ کند. اما اگر کاربر پیش از موعد بر روی یک فیلد کلیک کند، و سپس فراموش کند که قرار است چه چیزی را تایپ کند، چه؟ آنها ممکن است نیاز داشته باشند روی فرم کلیک کنند تا برچسب دوباره ظاهر شود (امیدواریم).
برای رفع این مشکل، به‌جای پنهان کردن کامل برچسب، می‌توانید هنگامی که کاربر روی آن کلیک می‌کند، آن را کم‌نور کنید و زمانی که کاربر شروع به تایپ کرد، آن را کاملاً پنهان کنید.
MobileMe برچسب‌ها را در فیلدهای ورودی در صفحه ورود به سیستم خود نشان می‌دهد و سپس زمانی که آنها را کمتر می‌کند شما یک فیلد را انتخاب می کنید.
6. نمادها به جای متن
برای دستیابی به سادگی در طراحی رابط، باید همه قطعات غیر ضروری یا به ندرت مورد استفاده را کاهش داده و حذف کنید. اینها نه تنها شامل کنترل ها می شوند، بلکه می توانند چیزهایی مانند برچسب های متنی نیز باشند. اگر رابط شما دارای برچسب های زیادی است، به آن نگاه کنید و از خود بپرسید – آیا همه این برچسب ها ضروری هستند؟ آیا اکثر آنها به سادگی چیزهای بدیهی را بیان می کنند؟ اگر برچسبی به چیزی اشاره می‌کند که با توجه به زمینه آن مورد واضح است، پس شما به آن برچسب نیاز ندارید – منسوخ شده است.
برای مثالی از این موضوع، به پست‌های یک وبلاگ فکر کنید. در زیر عنوان هر پست ممکن است مواردی مانند تاریخ و نویسنده داشته باشید. ممکن است نیازی به الصاق برچسب‌هایی مانند «نویسنده:» و «تاریخ:» قبل از هر کدام نباشد. وقتی کسی نام و تاریخی را زیر عنوان یک مقاله می‌بیند، احتمالاً متوجه می‌شود که این نویسنده است و آن تاریخ است. زمینه، و همچنین قالبی که از خواندن وبلاگ های دیگر به آن عادت کرده اند، به کاربران شما همه سرنخ هایی را می دهد که برای درک فوری معنای پشت داده ها نیاز دارند. برداشتن آن برچسب‌ها رابط تمیزتری به شما می‌دهد.
در برخی موارد که کنار گذاشتن برچسب کار نمی کند، می توانید برچسب را با یک نماد جایگزین کنید. یک نماد نسبت به برچسب متنی مزایایی دارد. فضای کمتری می گیرد. تمرکز روی آن آسان تر است زیرا رنگ و شکل متمایز آن راحت تر از متن چشم را جذب می کند. در برخی موارد می توان معنا را به اندازه متن به طور مؤثر منتقل کرد. به عنوان مثال، اگر برچسبی به نام “برچسب ها:” دارید و به دنبال آن لیستی از پیوندهای برچسب قرار دارد، می توانید برچسب را با یک تصویر کوچک از یک برچسب جایگزین کنید. به شرطی که مخاطبان باهوش فناوری داشته باشید، معنی در این مورد باید به همان اندازه روشن بماند.
البته برای همه موارد کار نمی کند، و اگر خطر مبهم بودن وجود دارد، باید آن را ایمن بازی کنید و از برچسب متنی استفاده کنید. با این اوصاف، دلیلی وجود ندارد که به طور انحصاری یکی یا دیگری را انتخاب کنید — شما می توانید با استفاده از آنها در کنار هم از ویژگی های چشم نواز جذاب آیکون ها همراه با وضوح متن بهره مند شوید. اگر چه در این صورت شما در حال معامله کردن با فضا هستید.
Highrise، یک برنامه CRM، از نماد برچسب به جای برچسب متنی قبل از فهرستی از برچسب ها.
7. کنترل های مبتنی بر زمینه
چند رویکرد وجود دارد که می توانید در طراحی رابط استفاده کنید که به زمینه و سازگاری مربوط می شود. یکی حکم می‌کند که باید کنترل‌ها را در برنامه‌ها یا وب‌سایت‌های خود ثابت نگه دارید تا مطمئن شوید که مردم می‌دانند همه چیز کجاست و گیج نمی‌شوند. روش دیگر تغییر کنترل ها یا ناوبری بر اساس زمینه هر صفحه یا پنجره است. رویکرد مبتنی بر زمینه روشی است که در آن فقط مواردی را که کاربر برای تکمیل کاری که روی آن کار می‌کند در آن زمینه خاص به آن نیاز دارد، نمایش می‌دهید.
تصویر خوبی از این دو رویکرد را می توان در طراحی مجدد رابط Microsoft Office مشاهده کرد. آفیس 2003، و همچنین خواهر و برادرهای بزرگترش، از اصل طراحی برای ثابت نگه داشتن چیزها پیروی کردند. شما همیشه تعداد زیادی نوار ابزار روی صفحه نمایش داده می‌شد، و اینها چه با جداول، گرافیک، متن یا عکس‌ها کار می‌کردید، تغییری نمی‌کردند. مایکروسافت این رابط را برای آفیس 2007 با استفاده از یک رویکرد مبتنی بر زمینه طراحی مجدد کرد. در بالا اکنون یک روبان – یا مجموعه ای از زبانه ها را می بینید. در صورت انتخاب، eهر برگه مجموعه‌ای از کنترل‌های مربوط به هر کار مشخصی را نشان می‌دهد، خواه تصحیح، کار با گرافیک، یا صرفاً نوشتن.
رویکرد مبتنی بر زمینه به شما امکان می‌دهد کنترل‌های کمتری را در هر زمان معین نشان دهید، اما در عین حال، کنترل‌های بیشتری را که به کار در دست مرتبط هستند. من استفاده از یک رویکرد متناوب را برای طراحی کلی وب توصیه نمی‌کنم، زیرا برای اکثر وب‌سایت‌ها، مردم انتظار دارند ناوبری ثابت در سراسر سایت را ببینند. این به این دلیل است که هر وب‌سایتی متفاوت است، و اگر همه صفحات جداگانه در یک سایت خاص نیز متفاوت باشند، تجربه مرور را بسیار سخت‌تر می‌کند.
با گفتن این، می توان از آن برای برنامه های کاربردی وب استفاده کرد زیرا آنها فقط وب سایت های ساده نیستند – آنها نرم افزارهایی هستند که در فضای ابری زندگی می کنند. افراد احتمالاً زمان زیادی را در یک برنامه وب صرف می‌کنند و فرصت بیشتری برای یادگیری نحوه عملکرد آن خواهند داشت. پ
یچیدگی برخی از برنامه‌های وب به این معنی است که شما واقعاً باید از رویکرد مبتنی بر زمینه استفاده کنید، زیرا اگر این کار را نکنید، در هر زمان مشخصی روی صفحه نمایش وجود خواهد داشت که هر کسی بتواند آن را پردازش کند. با نمایش تنها چند کنترل مرتبط برای یک کار معین، کاربران شما می‌توانند بفهمند در زمان بسیار کمتری چه کاری انجام دهند.
Freckle، یک برنامه ردیابی زمان، دارای یک سوئیچر در بالای نوار ابزار اصلی خود است. . بین کنترل‌های ورودی زمان و کنترل‌های گزارش جابه‌جا می‌شود و تنها یک مجموعه را در هر زمان نشان می‌دهد. این منطقی است زیرا شما یا در حال وارد کردن زمان هستید یا یک گزارش تهیه می کنید – نه دو چیز همزمان.
برای نتیجه گیری…
“ساده ترین راه برای دستیابی به سادگی از طریق کاهش متفکرانه است” – جان مائدا، قوانین سادگی.
کوچکتر کردن رابط کاربری خود، پنهان کردن عملکردهای پیشرفته و حذف چیزهای بدیهی، مسیری است که به یک رابط ساده تر می رسد. در این مسیر با موانع زیادی روبرو خواهید شد. به ازای هر ویژگی که پنهان می‌کنید یا حذف می‌کنید، افرادی هستند که شکایت می‌کنند و از شما می‌خواهند که آن را بازگردانید. اما هر یک از کاربران شما نیازهای متفاوتی دارند و از برنامه وب یا وب سایت شما به روشی متفاوت استفاده می کنند.
اگر به تمام درخواست‌ها و نیازهای ویژگی‌ها گوش دهید و تا آنجا که همه آنها را بررسی و اجرا کنید، بعید است که به اوج طراحی نرم‌افزار برسید. به احتمال زیاد، به یک گودال نفخ عمیق برخورد خواهید کرد که خروج از آن تقریباً غیرممکن است.
هنگامی که یک ویژگی را اضافه می کنید، حذف آن بسیار سخت است زیرا افراد شروع به استفاده از آن می کنند و برخی به آن وابسته خواهند بود. به همین دلیل، مطمئن شوید که هر ویژگی و هر عنصر رابطی که اضافه می‌کنید منطقی است و به محصول شما ارزش واقعی می‌افزاید. ویژگی های بیشتر به معنای کنترل ها و محتوای بیشتر است. کنترل‌ها و محتویات بیشتر، ساده کردن رابط و بدون درهم‌تنگی را سخت‌تر می‌کند.
سادگی به معنای کاهش و سازماندهی مجدد مجموعه به کوچک و قابل مدیریت است. در هر صورت، باید به جای اضافه کردن، حذف را هدف بگیرید. محصولی با دکمه های کمتر لزوماً قدرت کمتری ندارد — احتمالاً بهتر طراحی شده است.
آیا از هر یک از این تکنیک ها در طراحی های خود استفاده می کنید؟ آیا فکر می کنید آنها به تجربه کاربری کمک می کنند؟ لطفا تجربیات خود را با ما به اشتراک بگذارید.
بدون دیدگاه