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

هنگامی که می خواهید عملکرد یک سایت را کنترل کنید. در گزارش ها مدام از روند حرکت مشتری در سایت خود باخبر می شوید.

این اطلاعات برای شما است که بتوانید دکمه های سایت خود را ویرایش کنید تا بتوانید تعداد بیشتری مخاطب را به صفحه دلخواه خود بکشانید.

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

مثال: یک دکمه زردرنگ که کاربر را به خرید دعوت می کند ممکن است ۴۰ درصد مخاطبان سایت را به صفحه خرید از سایت بکشاند.

حالا اگر همان دکمه را به رنگ سبز در بیاورید ممکن است تعداد مخاطبینی که به صفحه خرید مراجعه کرده اند ۶۰% شود.

شما تازمانیکه این تغییر را امتحان نکرده اید نمیدانیدکه چه میزان تغییر را مشاهده خواهید کرد.

اما این حرف به این معنی هم نیست که طراحی ui (طراحی رابط کاربری) یک امر صد درصد سلیقه ای بوده و هیچ اصول و چهارچوبی ندارد.

طراحی ui (طراحی رابط کاربری) از یک چهارچوب مشخص پیروی میکند ولی چهارچوب های گرافیکی با چهارچوب های برنامه نویسی قابل قیاس نیستند.

نقش طراحی رابط کاربری و نحوه طراحی دکمه ها

دکمه ها عناصر مهمی برای ارتباط با کاربر میباشند. امروزه با توجه به گسترده شدن استفاده از اینترنت کاربران با عناصر گرافیکی متنوع تری در وب و موبایل روبرو میشوند.

نقش دکمه ها در طراحی سایت چیست

یک دکمه یک عنصر ارتباطی میان سایت و صفحه شما و کاربر است. دکمه ها یکی از مهمترین عناصر دریافت بازخورد مشتریان میباشند.

شاید همه مشتریان شما وقت کافی برای نوشتن نظر و انتقاد نداشته باشند ولی براحتی میتوان با رصد تعداد کلیک روی یک دکمه میزان استقبال از یک بخش از سایت را دریافت.

دکمه ها در طراحی های مدرن میتوانند خود چندین دکمه را در بر داشته باشند و کاربر را به بخش های مختلفی از سایت هدایت کنند.

بله دقیقاً شبیه کاری که منوی سایت انجام میدهد. اما با دکمه ها تفاوت کار در خاص بودن دکمه نسبت به منوی سایت یا نرم افزار است.

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

همین موضوع احتمال کلیک شدن دکمه را از لینک های منو بالاتر میبرد.

انواع دکمه در طراحی سایت و بررسی تاثیر هر کدام

دکمه ها انواع مختلفی دارند و از هر کدام در بخشی از سایت استفاده خواهیم کرد.

دکمه های CTA در طراحی سایت

Call to action یا CTA مهمترین دکمه ها در طراحی سایت هستند. دکمه های Call to action یا دکمه های فراخوان، دکمه هایی هستندکه از کاربر میخواهند عملی را انجام دهد.

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

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

یکی از اهدافی که سایت ها دارند بدست آورد لیست بزرگتری از ایمیل مخاطبانشان است. این لیست به آنها کمک میکند که در بازاریابی های ایمیلی قویتر و موفقتر عمل کنند.

دکمه های متنی در رابط کاربری

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

 دکمه های بازشونده در رابط کاربری

منوها نمونه بارزی از دکمه های باز شونده میباشند. اما امروزه شما دکمه های بازشونده را در بخش های مختلف سایت مشاهده می کنید.

هنگامیکه اطلاعات زیادی را میخواهید به نمایش بگذارید ولی میخواهید این اطلاعات تنها برای کاربران علاقه مند به نمایش در بیاید میتوانید از دکمه های باز شونده استفاده کنید.

دکمه های بازشونده: هنگامیکه روی این دکمه ها کلیک می کنید. یک لیست از لینک ها و یا دکمه ها برای شما باز خواهد شد. کاربر از این لیست گزینه دلخواه خود را انتخاب می کند.

دکمه منوی موبایلی

منوی دکمه موبایلی یا Hamburger button در رابط کاربری نقش بسیار مهمی دارد. با توجه به اینکه کاربران عادت دارند که در حالت موبایل دکمه های موبایلی برای منو را مشاهده کنند این دکمه ها را نمیتوان از گرافیک سایت و یا اپ حذف کرد.

ظاهر این دکمه ها معمولاً به صورت سه خط صاف افقی در بالای همدیگر است.

دکمه افزودن یا +

به یک فروشگاه کلاسیک نگاه کنید. فروشنده چند راهکار برای فروش بالاتر دارد. اول سعی میکند دو کالا به شما معرفی کند که یکی کمی بالاتر از قیمت مد نظر شما برای خرید است. در این حالت اگر شما کالای گرانتر را بخرید سود بیشتری به فروشنده رسانده اید.

در حالت دوم بعد از خرید فروشنده به شما پیشنهاد کالایی مکمل رامیدهد. مثلاً هنگام خرید پیراهن به شما پیشنهاد خرید شلوار را میدهد.

در حالت بعدی هم فروشنده به شما میگوید که در صورت خرید تعداد بالاتر شما تخفیف بیشتری خواهید گرفت.

در یک سایت نیز باید دقیقاً همین اتفاق بی افتد. یعنی آنکه شما باید سایت را طوری طراحی کنید که در صفحه خرید محصول اول مشتری بتواند به تعداد دلخواه کالا به سبد اضافه کند.

دوم کالاهای مرتبط را ببیند و بتواند براحتی آنها را نیز به سبد خرید بیافزاید.

سوم بتواند کالایی با قیمتی اندکی بالاتر را به مشتری سفارش دهد. باور کنید یا نه هنوز سایتی ساخته نشده است که این بخش را بدرستی اجرا کند.

دکمه های افزایشی

امروزه با توجه به افزایش قیمت لپتاپ ها و کاهش قیمت موبایل ها، اکثر کاربران سایت ها را از طریق موبایل مشاهده می کنند.

با توجه به کوچک بودن صفحه موبایل شما اگر بتوانید اطلاعات بیشتری را در فضای کمتری به نمایش بگذارید. شانس موفقیت شما بیشتر است.

دکمه های افزایشی در واقع بخش از فناوری طراحی ui (طراحی رابط کاربری) اپ های موبایل است. که بیشتر طراحان سایت نیز از آن بهره میبرند.

دکمه های اشتراک گذاری

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

دکمه های شفاف و نامرئی

ترنسپرنت بودن دکمه کمک می کند که شما بتوانید همچنان بک گراند و پس زمینه سایت را از زیر دکمه مشاهده کنید. امروزه طراحی های مبتنی بر عناصر شفاف گسترده تر گشته است.(طراحی رابط کاربری)

دکمه های FAB یا دکمه های لغزان

دکمه های یکه به کاربر کمک می کنند در صفحه نمایش به سراغ اطلاعات دلخواه خود برود.

Floating Action Button (FAB)

In Material Design, floating action button (FAB in short) is the button that presents the primary action on the app screen. Typically, it’s a round icon button elevated above other page content. This button usually gives instant access to essential or popular actions users do with the app. Depending on the design and information architecture of the mobile application, FAB can:

perform a typical core action (open the screen of new email, open the screen of adding the photo or video content, search the needed content in the gallery, etc.)

show additional actions

transform into other UI elements.

The position of FAB on the screen is usually determined by the factor of high visibility and may vary according to the general design concept of the app screens. Rule of thumb is to use only one FAB per screen, not more, to avoid loss in concentration.

android material design

Here’s a flow of interactions for travelers diary applying bottom app bar, overlapping FAB, and woven image list.

Factors of Effective Button Design

Size. Size is one of the core ways to inform users about the importance of a layout element and build the hierarchy of components. An attractive and efficient call-to-action button needs to be big enough to be quickly found but not too big so that the layout structure wasn’t spoiled. Market leaders often provide recommendations on the proper sizes of buttons in their guidelines. For example, Apple says that CTAs in mobile UI should be at least 44Х۴۴ pixels, while Microsoft recommends 34Х۲۶ pixels. If you design for mobile, the requirements to different types of buttons may be quite strict so study the guidelines thoroughly to minimize the risks of app rejection due to poor UI design.

Color. To make some buttons easily noticeable and some secondary, it’s vital to choose a proper color. The thing is that human mood and behavior highly relate to the visual surroundings, and color is one of the most powerful tools in this aspect. It is vital to keep in mind while choosing colors for CTA: buttons and background colors have to contrast well in order to make the button quickly stand out from the other UI components.

Shape. As for CTA buttons, they often look like horizontal rectangles. The reason is that you want to make it clear this button is clickable and interactive, and people are used to perceiving this shape as a button. In addition, it is recommended to design CTAs with rounded corners because they are thought as they point inside of the button drawing attention to the copy. Sure, this decision is made in case the shape harmonically combines with general stylistic concept chose for a webpage or mobile app screen.

Placement. The placement of buttons is crucial to building up the solid visual hierarchy and clear navigation. If they are located in the areas where users’ eyes can’t catch them, other visual aspects such as color and size might not work efficiently. Designers have to learn the most scannable areas and place buttons of the core functionality within the user’s path.

Copy. The powerful button microcopy is usually short but consistent so that it could quickly catch users’ attention. It’s often performed in capital letters to make the copy even more attractive in the layout. Still, that’s not necessary, the decision is made according to the general design concept, typography, and mood of the text message.

Video Player

Media error: Format(s) not supported or source(s) not found

mejs.download-file: https://tubikstudio.com/wp-content/uploads/2018/09/landing_page_kindergarten_webdesign_tubik.mp4?_=3

۰۰:۰۰

۰۰:۰۰

Use Up/Down Arrow keys to increase or decrease volume.

Here’s the landing page design for a kindergarten. Let’s review all the buttons used on the page:

the core CTA button inviting visitors to join is instantly noticeable: the designer used a rounded rectangular filled button of the color that contrasts to the background but sets the visual connection to the animated hero image, the most prominent visual element on the page. The CTA text is given in simple readable font featuring all capital letters

the header features 4 text buttons that connect users to the important content sections on the website.

the left part of the header features the secondary CTA button that is quickly scanned and allows already registered users to enter in their accounts.

the share buttons are placed into round shapes but aren’t given too much color contrast so that to be easily found but not to distract users from the main CTA.

Obviously, there are more types of buttons to discuss and check in UI design examples. So, we will continue the review in our next posts, don’t miss the updates.

Useful Articles

Best Practices for Website Header Design

UI/UX Design Glossary: Navigation Elements

Call for Attention. Powerful CTA Button Design

۷ Tips to Enhance Mobile Interactions

Take It Easy: Tips for Effort-Saving User Interfaces

Visual Hierarchy: Effective UI Content Organization

Gestalt Theory for UX Design: Principle of Proximity

Gestalt Theory for Efficient UX: Principle of Similarity

UX Design: How to Make Web Interface Scannable