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

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

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

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

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

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

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

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

اما این حرف به این معنی هم نیست که طراحی 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

طراحی مجدد سایت و تاثیر آن بر افزایش درآمدهای آنلاین

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

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

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

به چه دلیل باید برای طراحی مجدد سایت اقدام کرد

·        اگر سایت شما قدیمی و از مد خارج شده است.

·        اگر دیزاین سایت خود را دوست ندارید.

·        اگر سایت شما برخی فرایند ها را به درستی اجرا نمی کند.

·         اگر فروش شما در سایت پایین است.

در طراحی مجدد سایت به چه مواردی باید توجه داشت

·        سایت جدید شما باید از نظر زیبایی جذاب و مخاطب پسند باشد.

·        سایت شما باید بیشترین دایره مخاطبان را تحت تاثیر قرار دهد.

·        آنلاین مارکتینگ سایت امکان اتصال به نرم افزارهای آماری را داشته باشد.

اهمیت طراحی مجدد سایت برای کسب و کار شما در چیست

۱-    وب سایت نقطه شروع دیده شدن کسب کار شما در دنیای آنلاین است.

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

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

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

۲-    سازگاری مخاطب با سلایق شما

شما همواره براساس سلیقه و نظر خود اقدام به تولید و تهیه کالا و خدمات برای عرضه به سایت خواهید کرد.

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

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

۳-    ایجاد اعتماد در بین مخاطبان

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

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

۴-    دریافت نظر کاربران در رابطه با خدمات اختصاصی شما

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

راز موفقیت برای دانش آموختگان برنامه نویسی

آیا بدون آنکه بدانید یک آدم تنبل و غر زن هستید؟

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

توجه به این مسئله که همه ما ممکن است در زمان هایی، تبدیل به یک آدم تنبل و غر زن بشویم و خودمان هم متوجه نباشیم. و باید بدانیم که  این تقصیر ما نیست.

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

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

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

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

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

آیا شما تبدیل به یک آدم غر زن شده اید؟

• آیا دائماً در باره روزتان غر میزنید.
• آیا دائما در باره آب و هوا غر میزنید.
• آیا دائما در باره زندگی خود غر میزنید.
• آیا دائماً راجع به سختی ها غر میزنید.
• آیا دائما درباره کسانی که میشناسید غر میزنید.
• آیا دائماً درباره شغل خود غر میزنید

اگر اینطور است شما به یک آدم غر زن تبدیل شده اید.

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

غر زدن مانع موفقیت شما است. برای موفق شدن باید غر زدن را متوقف کرد.

جایگزین افعال مثبت در زندگی خود

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