آموزش طراحی صفحه تماس‌باما Contact us

آموزش طراحی صفحه تماس‌باما Contact us

فهرست مطالب

آموزش طراحی صفحه تماس‌باما Contact us

Designing a better contact page

طراحی موثر صفحه تماس با ما

اهمیت صفحه تماس با ما و فواید آن

 

دلایل اهمیت صفحه تماس با ما:

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

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

فواید صفحه تماس با ما:

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

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

محل قرارگیری لینک صفحه تماس در وب‌سایت

 

اهمیت محل تعریف لینک تماس با ما:

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

بطور کلی، اطلاعات تماس بهتر است در دو محل قرار گرفته باشند:

  • منوی اصلی (Primary Navigation):  محلی مناسب برای گذاشتن لینک صفحه تماس با ما می باشد. معمولا بازدیدکنندگان در سمت راست یک صفحه وب (در نسخه انگلیسی) و در سمت چپ یک وب سایت فارسی بدنبال لینک تماس با ما می گردند. زیرا فرض اولیه بر اینست که اطلاعات جانبی در این بخش ها قرار گرفته باشد. به همین دلیل، بهتر است در سایت های ربان فارسی، لینک مربوط به صفحه تماس با ما در سمت چپ منوی اصلی قرار بگیرد. توجه داشته باشید که لینک تماس با ما را می توانید در منوی فرعی بالای سایت درنظر بگیرید. اما تا جایی که امکان دارد لینک صفحه تماس را در زیرمنوی کشویی (drop-down menu) قرار ندهید. زیرا احتمالا از دید کاربران وب سایت دور می ماند و نادیده گرفته می شود.
  • فوتر (Footer): محل دیگری که برای قرارگیری اطلاعات تماس مرسوم و موثر است در بخش فوتر یک وب سایت است. همچنین می توانید لینک تماس با ما را نیز در فوتر تعریف کنید.

محل قرارگیری صفحه تماس

همچنین می توانید اطلاعات مهم تماس (مانند شماره تماس و آدرس شرکت) را مستقیما در فوتر قرار دهید. مانند تصویر زیر:

اطلاعات مهم تماس (مانند شماره تماس و آدرس شرکت)

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

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

در مقاله قبل، دلایل اهمیت صفحه تماس با ما را بیان کردیم و نیز محل قرارگیری صفحه تماس با ما (contact us page) را موردبررسی قرار دادیم. در این مقاله، المان ها و ویژگی های لازم برای یک صفحه تماس با ما را معرفی می کنیم.

 

ملزومات یک صفحه تماس با ما (Contact Page Essentials):

اکنون که اطمینان حاصل کردیم که کاربران لینک صفحه تماس را مشاهده می کنند، وقت آنست که محتوای صفحه تماس با ما را بررسی کنیم. در ابتدا بیایید در مورد المان ها و محتویات پایه ای و ضروری صفحه تماس صحبت کنیم.

آدرس ایمیل / فرم تماس با ما:

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

آدرس (Address):

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

تلفن (Telephone):

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

شبکه های اجتماعی (Social Media):

بسیاری از وب سایت ها در صفحه تماس خود، لینک شبکه های اجتماعی کسب و کار خود را قرار داده اند. اگرچه ممکن است وجود لینک شبکه های اجتماعی در برخی از وب سایت ها موثر و مفید نباشد اما می تواند بعنوان یک امتیاز مثبت برای صفحات تماس با ما درنظر گرفته شود. در این روزها استفاده از شبکه های اجتماعی تلگرام و اینستاگرام در ایران بسیار مرسوم می باشد و بسیاری از مدیران وب سایت ها نیز از همین طریق می خواهند به مشتریان خود پشتیبانی ۲۴ ساعته و ۷ روز هفته ارائه دهند (۷/۲۴)

شبکه های اجتماعی (Social Media)

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

اطلاعات مفید (Useful Information):

ارائه اطلاعات تماس بصورت کدهای HTML و نه تصویر:

درج اطلاعات مفید در صفحه تماس می تواند از ناامیدی کاربران سایت جلوگیری کند. اطلاعات تماس را در قالب کدهای HTML تعریف کنید و نه تصویر (image). شاید فکر کنید که چه کسی ممکن است اطلاعات تماس شرکت خود را بصورت عکس در صفحه تماس نمایش دهد؟! اما وب سایت هایی وجود دارند که بدین گونه رفتار می کنند! نمایش اطلاعات تماس بصورت HTML مزیت های زیادی دارد: توسط موتورهای جستجو قابل ایندکس شدن می باشد، توسط کاربران قابل کپی و ذخیره می باشند.

نمایش لینک ایمیل:

برای لینک آدرس ایمیل، باید از لینک mailto استفاده نمائید. با اینکار کاربران قادر خواهند بود تا بدون اینکه نیاز باشد آدرس ایمیل را کپی کنند، با کلیک روی لینک ایمیل، یک پنجره ارسال ایمیل باز می شود که قسمت to ایمیل برابر آدرس ایمیل آن وب سایت می باشد. مشکلی که لینک های mailto ممکن است داشته باشند اینست که اسپم های زیادی از این طریق ایجاد شوند. شما می توانید برای جلوگیری از این مشکل، از وب سایت mailtoencoder استفاده نمائید.

ارائه شماره تماس:

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

نمایش آدرس شرکت:

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

نمایش نقشه گوگل (Google Map):

برای کسب اطلاعات بیشتر در زمینه درج نقشه گوگل (Google-Map) به صفحه تماس، به مستندات گوگل مراجعه فرمائید. همچنین می توانید به منظور دریافت کد مربوط به نقشه گوگل، به وب سایت embedgooglemap رجوع کنید.

درج نقشه گوگل (Google-Map) به صفحه تماس

شما می توانید نقشه های گوگل را سفارشی سازی کنید: رنگ آنرا تغییر دهید، علامت های نشانه گذاری (marker) دلخواه را بر روی نقشه قرار دهید، برای این مناطق caption درنظر بگیرید و …

وب سایت دیگری که امکان ایجاد و درج نقشه را به شما می دهد وب سایت Mapbox می باشد.

امکان ایجاد و درج نقشه

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

 

موتورهای جستجو را فراموش نکنید

 

شناساندن مشخصات کسب و کار خود به موتورهای جستجو:

شما بعنوان بازدیدکننده وب سایت، می توانید آدرس مربوط به کسب و کار آن وب سایت را با مراجعه به صفحه تماس با ما مشاهده کنید. اما موتورهای جستجو برای کسب اطلاعات مربوط به آدرس (مانند خیابان و کوچه و پلاک و…) نیاز به کمک دارند. ما می توانیم با استفاده از داده های ساختارمند (Structured Data) اطلاعات موردنظرمان را راحت تر و سریع تر به موتورهای جستجو بشناسانیم. اینگونه داده ها از تگ های خاص HTML تشکیل شده اند که بیانگر اطلاعات خاصی می باشند.

استفاده از داده‌های ساختارمند:

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

فرض کنید ما یک آژانس طراحی وب داریم بنام Fine Design که در بزرگراه ۳۱۰۲ قرار دارد در ساحل مکزیک (Mexico Beach) و در FL. کدهای ساختارمند تعریف آدرس برای موتورهای جستجو بصورت زیر است:

<div itemscope itemtype="http://schema.org/LocalBusiness">

  <h2><span itemprop="name">Fine Design</span></h2>

  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">

    <span itemprop="streetAddress">3102 Highway 98</span>

    <span itemprop="addressLocality">Mexico Beach</span>,

    <span itemprop="addressRegion">FL</span>

  </div>

</div>

تعریف المان آدرس (Address Element):

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

بنابراین بدین صورت می توان آدرس موردنظر را به صورت ساختارمند (Structured) و بهینه برای موتورهای جستجو تعریف کرد.

تعریف المان شماره تماس و ایمیل:

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

Tel: <span itemprop=”telephone”>850-648-4200</span>

Email: <a href=”mailto:info@finedesign.com” itemprop=”email”>info@finedesign.com</a>

به لطف داده های ساختارمند (Structured Data) توانستیم به موتورهای جستجو بفهمانیم که آدرس، شماره تماس و ایمیل شرکت Fine Design چه می باشد. اینگونه اطلاعات، ضمنی (Implicit) می باشد بدین معنی که توسط کاربران قابل مشاهده نمی باشند وتنها بدرد موتورهای جستجو می خورند.

فرم های تماس (Contact Forms):

اکثر وب سایت ها در صفحه تماس با ما، یک فرم تماس دارند. اگرچه برخی از آنها بی دلیل فرم پیچیده ای دارند و کاربر ناپسند (user unfriendly) می باشند. فرم های تماس در ظاهر ساده بنظر می رسند اما اینگونه فرم ها می توانند شامل کامپوننت هایی باشند که ترکیب و استفاده بهتر از این اجزا می تواند باعث بهبود تجربه کاربری (UX) شود.

Inputs Fields:

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

بهبود تجربه کاربری فرم‌های سایت:

وب سایت hubspot پس از بررسی بیش از ۴۰,۰۰۰ فرم، به این نتیجه رسید که تعداد فیلدهای موجود در فرم ها در حال افزایش است. پس تا جایی که می توانید از تعداد input های فرم های وب سایت تان کم کنید و از استفاده از چک باکس ها و دکمه های رادیویی پیچیده اجتناب کنید. با انجام اینکارها، UX بهتری خواهید داشت.

تعریف اعتبارسنجی (Validation):

به کاربران وب سایت تان کمک کنید تا با یک فرمت خاصی، فیلدهای فرم را پر کنند. مانند اینکه برای فیلد کد ملی می توانید توسط کدهای جاوااسکریپت، کاربر را محدود کنید تا فقط عدد وارد کند. توسط اتریبیوت placeholder می توانید برای هریک از input ها یک راهنما برای کاربران نمایش دهید. بعنوان مثال برای فیلد کد ملی می توانید بنویسید لطفا یک عدد ۱۰ رقمی وارد کنید:

Inputs Fields

اعتبارسنجی فیلدهای اجباری:

برای فیلدهایی که پر کردن آنها توسط کاربر اجباری می باشد می توانید یک جمله کوتاه مبنی بر اجباری بودن آن فیلد بنویسید و یا از علامت ستاره (قرمزرنگ) در کنار آن input استفاده کنید. می توانید فیلدهای فعال (active و یا focused) را highlight کنید. در تصویر زیر فیلد Name به حالت invalid می باشد:

فیلدهایی که پر کردن آنها توسط کاربر اجباری می باشد

و در تصویر زیر مشاهده می کنیم که فیلد Name بدرستی توسط کاربر پر شده است و به حالت valid (سبزرنگ) در آمده است:

معتبر بودن ورودی تکست باکس

در بخش بعد، درباره اعتبارسنجی (validation) فرم های تماس با ما صحبت خواهیم کرد و در نهایت، نمونه هایی از صفحات تماس با ما را مشاهده خواهیم کرد.

 

اعتبارسنجی فرم (Form Validation)

فواید اعتبارسنجی سمت کاربر (Client-Side Validation):

اعتبارسنجی سمت کاربر (client-side validation) باعث می شود که کاربر بارها و بارها فرم را submit نکند و بتواند قبل از ارسال فرم، خطاهای احتمالی را مشاهده و برطرف کند. بهترین روش اینست که فرمت صحیح را به کاربر از طریق tooltip و یا placeholder نمایش دهیم. مانند فرمت صحیح تاریخ، شماره تلفن و ایمیل و آدرس وب سایت و…

 

امکان ندارد شما یک فرم تماس داشته باشید و یک دکمه ارسال (submit button) نداشته باشد. دکمه ثبت فرم باید در انتهای فرم قرار گرفته  باشد. عنوان دکمه را “ارسال پیام” در نظر بگیرید و “ارسال” نمی تواند به تنهایی کافی باشد. در سال های قبل، مرسوم بود که یک دکمه پاک کردن فرم و یا Reset در کنار دکمه ارسال تعریف می شد. هرگز اینکار را انجام ندهید. زیرا ممکن است کاربران به اشتباه روی آن دکمه کلیک کنند و تمام اطلاعات پرشده آنها ازبین برود.

نمایش بازخورد (Feedback) پس از ارسال فرم تماس:

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

طراحی صفحه تماس (Contact Page Design):

در طراحی صفحه تماس نکات زیادی وجود دارد که باید مد نظر قرار گیرند. اگر می خواهید فرم تماس با ما طراحی کنید، سعی کنید تا جای ممکن فیلدهای input را بزرگ درنظر بگیرید. فاصله (padding-margin) بین المان ها را زیاد در نظر بگیرید. اینگونه طراحی ها بیشتر کاربرپسند (user friendly) می باشند.

طراحی عمودی المان های فرم:

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

هماهنگی طراحی فرم تماس با سایر صفحات سایت:

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

نمونه هایی از فرم تماس (Contact Form Examples):

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

نمونه اول از فرم های تماس

نمونه دوم از فرم های تماس

نمونه سوم از فرم های تماس

نمونه چهارم از فرم های تماس

نتیجه گیری (Conclusion):

در دسترس بودن لینک تماس با ما:

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

نمایش اطلاعات تماس:

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

بهبود تجربه کاربری (UX):

قابلیت تعامل اطلاعات ارائه شده در صفحه تماس می تواند باعث بهبود UX شود. مانند اینکه برای آدرس ایمیل، لینک mailto تعریف شود و یا برای شماره تماس از اتریبیوت tel استفاده گردد.

باید برای فیلدهای input فرم تماس، اعتبارسنجی (validation) در نظر گرفته شود. در نهایت مطمئن شوید که کاربر پس از ارسال فرم، یک پیام مناسب مبنی بر موفقیت آمیز بودن و یا نبودن ارسال پیامش مشاهده خواهد کرد.

منبع: https://webdesign.tutsplus.com/articles/designing-a-better-contact-page–webdesign-11770

0/5 ( 0 نظر )
.ez-toc-title-container { text-align: right; display: inline; color: green; font-weight: bolder; direction: ltr; }

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email

پاسخی بگذارید

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

گوگل ادز

راهنمای جامع سرویس گوگل ادز

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

دانلود رایگان کتاب الکترونیکی

آموزش تصویری سرویس گوگل آنالیتیکس

کتاب آموزش گوگل آنالیتیکس
آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"