Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX
Webdesign

تصميم صفحة إتصال أفضل

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by Rachid Sakara (you can also view the original English article)

صفحة إتصال جيدة هي أمر مهم للحفاظ على العلاقات مع زوارك . سواء تعلق الأمر بالتجارة الإلكترونية ، مجلات ، مواقع ويب شخصية ، خذمات عبر الأنترنيت ، سيسعون إلى أن تكون صفحة الإتصال أول وسائلهم للتواصل معك . مما يدعو إلى الغرابة أن العديد من مصممي المواقع الإلكترونية يهملون صفحة الاتصال المتواضعة، حتى أنهم يعتبروها أحد الجوانب الأقل أهمية في موقع الويب. دعونا نصحح الأمر.


أهمية صفحة إتصال جيدة

غالبا ما يتم تجاهل صفحة الإتصال. كم مرة قمت بزيارة موقع على شبكة الانترنت، ورغبتك في الحصول على إتصال للشكوى عن منتج أو خدمة، أو طرح سؤال ؟ وكم عدد المرات التي كنت فيها  تكافح مع جهة الإتصال (contact form) ؟

يمكن أن تكون صفحة الإتصال الجيدة مهمة لأي نوع من أنواع الأنشطة التجارية. بإمكانها تحسين رضا العملاء من خلال مساعدتهم مع مشاكلهم . كما يمكنها أيضا  أن تساعد الأعمال التجارية في تحسين منتجاتها وخدماتها من خلال توفير وسيلة لردود الفعل القيمة.

بإمكان القنوات الأخرى أن تكون محدودة عندما يتعلق الأمر بتعليقات المستخدمين . التلفزيون والإذاعة والمجلات والصحف ... كلها تعد أشكال تواصل ذات إتجاه واحد. لذلك ينبغي أن يكون الاتصال عبر الإنترنت طريقا ذو اتجاهين؛ حوار بين نشاط تجاري وزائر. ويمكن للطرفين الاستفادة من ذلك، وهذا هو المغزى من تواجد صفحة إتصال جيدة.


توضيع

الخطوة الأولى المهمة : ألا و هي مكان تواجد معلومات الاتصال الخاصة بك. تواجود صفحة إتصال أفضل في مكن عشوائي ليس شيئا جيدا خصوصا إذا كان الزوار لا يمكنهم العثور عليها . الإحتفاظ ببعض التصميم المقنعة يمكن أن يسعف الزائرين في إيجاد الحل.

بوجه عام ، لا يمكن لمعلومات الإتصال التواجد في مكانين:

تعد قائمة التصفح الرئيسية (Primary Navigation) المكان المثالي لرابط صفحة الإتصال. عادة ما يبحث الزائرون عن معلومات الاتصال على الجانب الأيمن من الصفحة لأنه يعتبر عنصرا ذا أهمية ثانوية. لهذا السبب سترى عادة رابط صفحة الإتصال كواحد من أخر العناصر في قائمة تصفح الموقع .

قد ترى أيضا تصف فرعي (sub-navigation) صغير في الركن العلوي الأيمن من الشاشة. كما أنه أيضا مكان قيم لصفحة إتصال. وبقول ذلك، قد يكون من الأفضل تجنب وضع رابط  صفحة الإتصال في قائمة منسدلة (drop-down menu) لأنه يمكن بسهولة تجاهلها.

الهامش (The Footer) هو أيضا موقع شائع لمعلومات الاتصال. فا بإمكانه أن يكون مكانا يحمل رابط (hold a link) إلى صفحة الإتصال:

apple contact us in footer
قامت Apple بوضع روابطها لصفحة الإتصال على الهامش (The Footer) .

أو أكثر معلومات الإتصال أهمية نفسها 

hubspot contact footer
قامت Hubspot بعرض عناوينها و رقم الهاتف على الهامش .

يعد توقع تدفق الزائرين إلى صفحة الإتصال أمرا صعبا، لذا فإن وضع رابط في موقعين على الأقل كما هو مذكور يغطيك بشكل جيد.


أساسيات صفحة الإتصال

بما أننا أصبحنا متيقنين من أن الزوار بإمكانهم لإيجاد الطريق إلى صفحة الإتصال ، حان الوقت إلى التفكير في المحتوى الفعلي . دعنا نبدأ بالأسسيات من خلال إلقاء نظرة على المعلومات الواجب تقديمها .

البريد الإلكتروني \ نموذج الاتصال (Contact Form)

عنوان البريد الإلكتروني هو أسهل طريقة للاتصال بنشاط تجاري عبر الإنترنت. وبدلا من ذلك، يمكنك استخدام نموذج إتصال يرسل رسالة إلكترونية. عبر نموذج الإتصال (Contact Form) لديك المزيد من السيطرة على المحتوى (الحقول المطلوبة) كما يمكنة منع البريد المزعج (Spam). للمزيد من المعلومات حول نماذج الإتصال ستجدها لاحقا في هذه المقالة.

contact-form-lea
تعرض Lea Verou عنوان بريدها الإلكتروني في نص عادي، ولكنها تستخدم طريقة مكررة لمنع الرسائل المزعجة (spambots) من التقاطها.

العنوان

يجب على الشركات مع متجر أن لا ننسى ذكر عنوانها . إذا كان لديك عدة متاجر، فمن الأفضل إنشاء صفحة منفصلة لكل موقع. إملأ هذه الصفحة بمعلومات الاتصال الخاصة بالمتجر، وساعات العمل، واتجاهات القيادة، وما إلى ذلك. وهذا ليس مفيدا فقط للزائرين، ولكن يمكنه أيضا مساعدة موقعك في طلبات البحث المحلية

الهاتف

عرض رقم الهاتف ينقل شعورا بالثقة. وكثيرا ما ينظر إليه على أنه علامة على أن هذه هي شركة حقيقية، والتي يمكن أن تكون مفيدة حقا لمتاجر الانترنت .

وسائل التواصل الإجتماعي

بدأت الكثير من المواقع الإلكترونية إضافة أزرار وسائل التواصل الإجتماعي إلى صفحة الإتصال الخاصة بها. على الرغم من أن هذا ربما لن يفيد كل موقع،لكن لبعض الزوار يمكن أن يكون قيمة مضافة حقيقية. خاصة وأن المزيد والمزيد من الشركات بدأت تقدم دعم للعملاء عبر تويتر (أحيانا حتى 24/7).

contact-envato_support
Envato لديها قناة دعم تويتر قوية جدا @envato_support

إضافات

ليس هناك حل "يناسب حجم واحد" للحصول على صفحة إتصال جيدة. يتطلب كل موقع ويب أو نشاط تجاري بعض العناصر التي قد تكون زائدة عن الحاجة مقرانة مع مواقع أخرى.

هناك الكثير من المعلومات الإضافية أو الميزات التي يمكن أن تكون مفيدة لصفحة الإتصال. بالنسبة لمتاجر brick-and-mortar يمكن أن تكون فكرة جيدة على سبيل المثال أن يتم ذكر ساعات العمل . قد ترغب الشركات الكبرى بإضافة ميزة التحادت المباشرة إليها ، كما يمكن لمواقع التجارة الإلكترونية أن تلازم ثقة المستخدمين من خلال عرض رقم ضريبة القيمة المضافة (VAT).


معلومات قابلة للاستخدام

جعل المعلومات على صفحة الإتصال الخاصة بك قابلة للاستخدام يمكن أن يمنع الكثيرا من الإحباط  للزوار.

تضمين معلومات الاتصال الخاصة بك كنص بدلا من صور. قد يبدو هذا بمثابة عدم التفكير، ولكن هناك الكثير من المواقع التي تستخدم تقنيات أخرى. يمكن نسخ نص HTML ولصقه، مما يسهل على الزائر حفظ بيانات الإتصال (contact data).

يجب أن يتم إستخدام عنوان البريد الإلكتروني في رابط mailto . وهذا الأمر يسمح للزوار الذين ينقرون عليه بإرسال بريد إلكتروني دون الحاجة أولا إلى نسخ عنوان البريد الإلكتروني الخاص بالوجهة وفتح برنامج البريد الإلكتروني. يمكن لقضية واحدة  أن تنشأ لقضية مع هذه التقنية ومع ذلك، في شكل الروبوتات المزعجة لإلتقاط عناوين البريد الإلكتروني المرتبطة  برابط mailto: . لذلك، قد تحتاج إلى التفكير أولا في تعطيل عناوين البريد الإلكتروني باستخدام خدمة مثل mailtoencoder.com.

في ملاحظة ذات صلة: يجب أيضا على أرقام الهاتف أن تكون تفاعلية. في العام الماضي، نشرنا نصيحة سريعة حول كيفية جعل رقم الهاتف قابل للنقر عليه. بفضل جزء صغير من التعليمات البرمجية، يمكن للهواتف الذكية التعرف على أرقام الهواتف، مما يجعلها قابلة للاستدعاء. هذا الأمر مفيد حقا لمستخدمي الهواتف النقالة.

الشركات التي تعتمد بشكل كبير على brick-and-mortar يمكن أن تستفيد كثيرا من الخريطة التفاعلية، مما يسمح للمستخدمين العثور بسرعة على طريقهم إلى نقطة البيع. يعد عرض عنوان المتجر أمرا رائعا، ولكن إضافة خريطة تفاعلية سيكون أفضل.

شكرا لخرائط غوغل، لأنه لم يكن من السهل تضمين هذه الميزة المفيدة . ما عليك سوى إدخال عنوانك في خرائط غوغل والنقر على رمز الرابط في الشريط الجانبي. هناك ستجد رمز التضمين (embed code).

how to embed google maps

هل تعلم أنك يمكن تخصيص الخريطة الخاصة بك؟ يمكنك تنميط ألوان الخريطة، إضافة علامات مخصصة للخريطة وإنشاء أسطورة. ستجد المزيد من المعلومات على developers.google.com. قد تضع أيضا في عين الإعتبار خدمات بديلة مثل Mapbox اللذيذة نوعا ما.

contact-mapbox

لا تنس محركات البحث

كزائر، عليك على الفور التعرف على عنوان على صفحة الإتصال. ومع ذلك ، تحتاج محركات البحث إلى مزيد من المساعدة للتعرف على العناصر المختلفة .

يمكننا حل هذه المشكلة باستخدام البيانات المنظمة. البيانات المنظمة هي عبارة على شكل من أشكال الترميز التي تعطي محركات البحث المزيد من المعلومات حول المعنى الأساسي للمحتوى.

كيف يعمل؟ لنفترض أن لدينا وكالة تصميم مواقع الإنترنت تسمى 'Fine Design' الذي يقع في 3102 الطريق السريع 98، خليج المكسيك، فلوريدا. تسمح Microdata لمحركات البحث بفهم هذا العنوان بشكل أفضل. ستظهر HTML code بالشكل التالي:

قد ترغب في الانتقال خطوة أخرى إلى الأمام وملاء هذه المجموعة (block) في عنصر <address>. يجب أن يكون إستخدام عنصر العنوان فقط في العناوين ذات الصلة بسياق الموقع، وليس فقط أي عنوان قديم قد يكون لديك ضمن المحتوى الخاص بك.  سبب استخدام هذا العنصر للمطور صداع لسنوات، لذا إذا كنت غير متأكد فلا تقلق كثيرا عن ذلك!

هذا هو عنوان الشركة. مع ذلك، يمكننا أيضا استخدام microdata لرقم الهاتف وعنوان البريد الإلكتروني:

وبفضل هذه محركات البحث للترميز (markup search engines) تعرف أن هذا هو عنوان ورقم الهاتف وعنوان البريد الإلكتروني من شركة "Fine Design". إنها معلومات ضمنية، وهذا يعني أن الزوار لا يمكنهم رؤيتها، ولكنها محركات بحث مفيدة جدا.

يمكنك أيضا استخدام hCard microformat الذي يسمح لك بسهولة حفظ بيانات الإتصال على منصات مختلفة. للمزيد من المعلومات حول microformats توجه إلى html5doctor.com.


نماذج الإتصال (Contact Forms)

معظم مواقع الويب تستخدم  نماذج الإتصال في صفحة الإتصال الخاصة بهم. ومع ذلك، بعض أشكال الاتصال معقدة بشكل لا داعي له وغير ودية مع المستخدم.

قد تبدو بسيطة مثل نموذج إتصال (contact form) ، لكن في الواقع مي عبارة عن مزيج من عدة مكونات حاسمة.  كل عنصر من هذه المكونات يجب أن يعملوا معا لتوفير أفضل انطباع للمستخدم.

حقول الإدخال (Input fields)

حقول الإدخال ، مثل حقول النص، وأزرار الاختيار، وخانات الاختيار، وما إلى ذلك، تسمح للمستخدم بملاء المعلومات اللازمة.

زائري المواقع هم أكثر عرضة لملاء استمارات أقصر لأنها تتطلب جهدا أقل. عدد حقول الإدخال هو عمل موازنة بين تجربة المستخدم واحتياجات العمل. قامت Hubspot بتحليل أكثر من 40،000 نموذج ونظرة في تأثير الزيادة في عدد حقول الإدخال. الوجبات الجاهزة (The takeaway) من دراستهم هي أنه يجب عليك استخدام أقل عدد ممكن  من حقول الإستمارات (form fields) وأن تكون حذرا بشكل خاص مع مناطق النص أكثر تطورا(ophisticated text) وصناديق الإنتقاء (select boxes).

ساعد زوارك في ملاء هذه الحقول من خلال الإشارة إلى التنسيق الصحيح(proper format) . أرقام الهاتف والتواريخ يمكن أن تكون صعبة، وخاصة بالنسبة للزوار الدوليين. ستساعدك خاصية placeholder  الخاصة ب HTML5 ستساعدك في تجاوز الأمر.

contact-username

بعد ذلك، تأكد من إبراز الحقول المطلوبة (اتفاقية شائعة هي استخدام علامة النجمة *). تشير صراحة إلى أن حقل الإدخال مطلوب أو أن الحقل اختياري هو وسيلة آمنة للذهاب.

وأخيرا، قد يكون من المفيد إبراز الحقل النشط (highlight the active field) . هذا الأمر يمكن أن يكون خفي أولافتا للنظر.

وفيما يلي مثال على نموذج الإتصال من البرنامج التعليمي لي Jim Nielsen. ويستخدم علامة النجمة الحمراء الحقول المطلوبة، ويعطي بعض النصائح التنسيق ويسلط الضوء على المجال النشط.

invalid

نماذج التحقق (Form Validation)

كما يمكن أن يؤدي التحقق من صحة النموذج المباشرة (inline form validation) إلى منع حدوث بعض الصداع في إستمارت الإتصال(contact form). من المحبط جدا الاضطرار إلى إعادة إرسال نموذج مرارا وتكرارا لأنك أدخلت بيانات أو بيانات خاطئة بتنسيق خاطئ. وكما ذكرنا من قبل، من الأفضل مساعدة الزائرين من خلال عرض التنسيق المطلوب (مثل التواريخ ورقم الهاتف ...).

form validation pop up

أزرار

لا يمكنك الحصول على نموذج إتصال بدون زر إرسال (submit button). يجب أن يكون هذا الزر في الجزء السفلي من النموذج. استخدم "إرسال رسالة" كنص زر بدلا من "إرسال" لتذكير العملاء بما يقومون به....

معيار مشترك من العام الماضى هو إدراج زر "إعادة تعيين(reset)" أو "نموذج واضح (clear form)". لاتفعل ذلك.لأن الناس سوف ينقرون عليه عن طريق الخطأ. لا يوجد شيء أسوأ من كتابة رسالة تفصيلية وفقدانها بسبب زر 'إعادة تعيين(reset)'.

ردود الفعل - Feedback

قام الزائر  بملأت في معلومات الإتصال الخاصة به، وكتب رسالة وضغط على زر 'إرسال'. ماذا الآن؟ هل تمكنت الرسالة من العبور أم لا؟

طمأن الزوار بأن الرسالة قد تم إرسالها بنجاح عن طريق عرض رسالة تأكيد. إن رسالة تأكيد إلكترونية تعد هي الأخرة خيار أيضا.

نفس النصائح تنطبق على الأخطاء. عرض خطأ عند فشل إرسال الرسالة أمر لا بد منه - يمكن أن يمنع الكثير من المناقشات المستقبلية.كما يجب على  رسالة الخطأ  أن تكون سهلة الاستعمال، لذلك تجنب عرض رموز خطأ بشكل مهول.


تصميم صفحة الإتصال

هناك الكثير من المتطلبات الفنية لتصميم صفحة اتصال أفضل، ولكن دعونا لا ننسى واحدة من أهم الجوانب: التصميم المرئي (visual styling).

إذا كنت تستخدم نموذج إتصال، اجعل حقولك تظهر بشكل كبير ودي ومغري للملأ. يمكن أن تقطع الفراغ الأبيض (White Space) وحشوة-Padding شوطا طويلا.

غالبا ما يتبع زوار مواقع الويب نمطا على شكل حرف F عندما يتصفحون صفحة ويب لذا ضع ذلك في عين الاعتبار عند تصميم التخطيط (Layout). بالنسبة لإستمارت الإتصال، من الأفضل الإبقاء على جميع الحقول رأسيا (vertical)  بدلا من وضعها جنبا إلى جنب. وهذا يقلل من عدد حركات العين التي يحتاجها الزوار من أجل ملء الإستمارة.

يجب أن تتلأم صفحة الإتصال مع الهوية البصرية لبقية الموقع . نظرة ثابتة هي المفتاح. نلقي نظرة على صفحة الإتصال هذه  من ‘Let’s Travel Somewhere’ على سبيل المثال، مصممة في شكل بطاقة بريدية.

وكما هو الحال مع معظم المهام المتعلقة بتصميم الويب؛ الإبداع يدفع. قام Neil Patel بتصميم صفحة الإتصال الخاصة به في شكل رسم بياني، فاحصل على ثلاثة أضعاف طلبات الإتصال.


أمثلة نماذج الإتصال - Contact Form Examples

بالحديث عن إستمارات إاتصال جيدة، دعونا نلقي نظرة على بعض الأمثلة للإلهام (انقر على كل صورة لزيارة الموقع الإلكتروني المعني):

contact page of the GLG group
Goslingo contact page
heartbreaker fashion contact
iq agency
mostly serious reach out

إستنتاج

قبل تصميم صفحة الإتصال الخاصة بك، تأكد من أن الزائرين يمكنهم العثور عليها. يمكنك وضع رابطها في التصفح الرئيسي  أو في الهامش. تذكر أن معظم الأشخاص يبحثون عن معلومات الإتصال على الجانب الأيمن من الشاشة.

فكر في المعلومات التي يجب تضمينها. القدرة على إرسال رسالة، إما عن طريق عنوان البريد الإلكتروني أو نموذج الإتصال، أمر ضروري. يمكن أن يكون العنوان ورقم الهاتف مفيدا أيضا. قد تكون المعلومات الإضافية مثل ربط حسابتك إلى الشبكات التواصل الاجتماعي وساعات العمل مفيدة لبعض الأنشطة التجارية.

التفاعل مهم أيضا. استخدم خاصية mailto لعناوين البريد الإلكتروني (هو طريقة مشوشة قليلا) وخاصية tel: لأرقام الهاتف (مفيدة جدا لزوار الجوال). بإيمكانك أيضا تضمين خريطة تفاعلية مثل خرائط غوغل، ولكن يجب مراعاة نتائج الأداء المترتبة على ذلك.

إستعمال استمارة إتصال يمكن أن ينشئ أو يطيح بصفحة إتصال. إبدأ  بطلب الحصول على المعلومات الأكثر أهمية فقط. عرض التنسيق الصحيح لحقول الإدخال واستخدام التحقق الضمني للتأكد من صحة المعلومات يمكن أن يمنع الكثير من الصداع. لا تنسى عرض رسالة النجاح عند إرسال النموذج.


قراءة متعمقة - Further Reading

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.