<?xml version="1.0"?>
<rss version="2.0"><channel><title>&#x627;&#x644;&#x62A;&#x635;&#x645;&#x64A;&#x645;: &#x62A;&#x635;&#x645;&#x64A;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645; UX</title><link>https://academy.hsoub.com/design/user-experience/?d=3</link><description>&#x627;&#x644;&#x62A;&#x635;&#x645;&#x64A;&#x645;: &#x62A;&#x635;&#x645;&#x64A;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645; UX</description><language>ar</language><item><title>&#x643;&#x64A;&#x641; &#x64A;&#x62A;&#x639;&#x627;&#x645;&#x644; &#x645;&#x635;&#x645;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645; &#x645;&#x639; &#x635;&#x627;&#x62D;&#x628; &#x627;&#x644;&#x645;&#x635;&#x644;&#x62D;&#x629; &#x635;&#x639;&#x628; &#x627;&#x644;&#x645;&#x631;&#x627;&#x633;</title><link>https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81-%D9%8A%D8%AA%D8%B9%D8%A7%D9%85%D9%84-%D9%85%D8%B5%D9%85%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%85%D8%B9-%D8%B5%D8%A7%D8%AD%D8%A8-%D8%A7%D9%84%D9%85%D8%B5%D9%84%D8%AD%D8%A9-%D8%B5%D8%B9%D8%A8-%D8%A7%D9%84%D9%85%D8%B1%D8%A7%D8%B3-r875/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2025_04/2.----------.png.d7f94dd99d67bd9ebe4c8a485f381b83.png" /></p>
<p>
	لا يملك مصممو تجربة المستخدم الإرادة الكاملة في اتخاذ القرارات ضمن عملهم، فهم مضطرون للخضوع إلى الإدارة التقليدية لأصحاب المصلحة، وهو ما قد يشكِّل خيبة أمل كبيرة للمصمم عندما لا يتمكن من فرض تصاميمه والحصول على موافقة فورية من أصحاب المصلحة الكبار.
</p>

<p>
	عند العمل في مجال تصميم تجربة المستخدم، يصبح التعاون مع أصحاب المصلحة أهم من أي وقتٍ مضى، وتزداد أهمية ذلك كلما حصلت ترقية في المنصب. في هذه المراحل، يصبح ابتكار تصاميم مدروسة وإجراء أبحاث دقيقة هو الجانب الأسهل من العمل؛ أما إقناع أصحاب المصلحة بالتصاميم وجعلهم يتبنّون نتائج الأبحاث ويتبعون منهجية تصميم متمحورة حول المستخدم فهو الجانب الأصعب.
</p>

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

<h2 id="1">
	1. التركيز على أصحاب المصلحة الرئيسيين
</h2>

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

<p>
	تُعَدّ مصفوفة السلطة والاهتمام الموضَّحة في الصورة أدناه وسيلةً رائعة لتحديد أصحاب المصلحة الرئيسيين ومعرفة كيفية التعامل مع جميع أصناف أصحاب المصلحة بالطريقة المناسبة، بمن فيهم أصحاب المصلحة صعبو المراس.
</p>

<p>
	لإعداد مصفوفة السلطة والاهتمام، سنحتاج أولًا إلى تصنيف أصحاب المصلحة حسب درجة اهتمامهم بعملنا من جهة، وسلطتهم أو تأثيرهم علينا من جهة أخرى.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpg" data-fileid="169894" href="https://academy.hsoub.com/uploads/monthly_2025_03/02---.jpg.246a3430f29b757e0372f18814484f64.jpg" rel=""><img alt="02-مصفوفة-السلطة-الاهتمام.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="169894" data-ratio="75.09" data-unique="zbhm7hrs0" style="width: 650px; height: auto;" width="799" src="https://academy.hsoub.com/uploads/monthly_2025_03/02---.thumb.jpg.269d80af7203ded357557c4efd3c52f1.jpg"></a>
</p>

<p>
	يمكن استخدام مصفوفة السلطة والاهتمام لتحديد أصحاب المصلحة الرئيسيين. وبهذه الطريقة يمكننا تحديد أسلوب التعامل مع كل فئة من أصحاب المصلحة كما يلي:
</p>

<h3 id="">
	الحرص على تلبية توقعاتهم
</h3>

<p>
	أصحاب المصلحة الذين يتعين علينا الحرص على تلبية توقعاتهم هم الفئة التي تملك سلطةً كبيرةً على عملنا واهتمامًا مباشرًا به، وهذه هي الفئة التي يجب أن نبذل مجهودنا في التعامل معها، خصوصًا ممن يتصفون منهم بصعوبة التعامل.
</p>

<h3 id="-1">
	التحقق من رضاهم
</h3>

<p>
	أصحاب المصلحة ذوو السلطة العالية والاهتمام المحدود بعملنا هم الفئة الأصعب تعاملًا في معظم الأحيان، ذلك أن فرصة التعاون والتفاعل معهم ضئيلة، لذا فمن الضروري التفكير في كيفية إبقائهم راضين لكي لا يؤثروا علينا سلبيًا.
</p>

<h3 id="-2">
	إطلاعهم على التحديثات باستمرار
</h3>

<p>
	بالنسبة لأصحاب المصلحة الذين يهتمون بعملنا لكن لا يملكون سلطةًً أو تأثيرًا علينا، سيكفينا إبقاؤهم على اطلاع بما يهتمون به، ولا داعيَ لبذل الكثير من الجهد إذا كان بعضهم صعب التعامل. لكن من المهم الأخذ بالحسبان احتمال أن يترقّى بعضهم مع الزمن وتزداد سلطته علينا.
</p>

<h3 id="-3">
	الحفاظ على علاقة جيدة معهم
</h3>

<p>
	صحيح أنه يجب أن نكون على دراية بأصحاب المصلحة الذين لديهم سلطة محدودة واهتمام ضئيل بعملنا، لكن لا داعي لبذل الكثير من الجهد في هذه الفئة أيضًا. من الجيد عمومًا تحسين العلاقات مع جميع أصحاب المصلحة ولو كان التعامل معهم صعبًا، لكن لا ينبغي أن تكون هذه الفئة ضمن أولوياتا.
</p>

<h2 id="2ux">
	2. الاستفادة من المهارات المكتسبة من تصميم تجربة المستخدم UX
</h2>

<p>
	مصممو تجربة المستخدم هم الأشخاص الأكثر قدرةً على فهم الآخرين، فهذا جزء أساسي من عملهم. لا بد من تذكر أن أصحاب المصلحة هم أشخاص مثل المستخدمين، لذا يمكنك تطبيق مهاراتنا عليهم، تمامًا كما نفعل مع المستخدمين في عملنا.
</p>

<p>
	يمكن إجراء مقابلات مع أصحاب المصلحة صعبي التعامل على غرار مقابلات المستخدمين، والتحرّي عن أهدافهم والتحديات التي تواجههم، وصولًا إلى تفهّمهم والتعاطف معهم. يمكن أيضًا إنشاء شخصيات لأصحاب المصلحة بما يوازي <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%AF%D8%AE%D9%84-%D9%86%D8%AD%D9%88-%D8%B4%D8%AE%D8%B5%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-personas-r688/" rel="">شخصيات المستخدمين</a> في حال كان ذلك مفيدًا.
</p>

<p>
	في النهاية، لا يبدي أصحاب المصلحة صعوبةً التعامل لمجرد الرغبة بالتسلط، لذا من المهم البحث وفهم أسبابهم ولماذا يعارضون أو لا يشاركون أو لا يُبدون دعمهم، لكي نصل إلى حلّ في التعامل معهم.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="169895" href="https://academy.hsoub.com/uploads/monthly_2025_03/03------.png.5d1353e129813b1824004c7dbffbe87e.png" rel=""><img alt="03 القوى الخارقة في تصميم تجربة المستخدم" class="ipsImage ipsImage_thumbnailed" data-fileid="169895" data-ratio="56.33" data-unique="lkeiiyoyn" style="width: 600px; height: auto;" width="600" src="https://academy.hsoub.com/uploads/monthly_2025_03/03------.png.5d1353e129813b1824004c7dbffbe87e.png"> </a>
</p>

<h2 id="3">
	3. البحث عن الأهداف المشتركة
</h2>

<p>
	قد يبدو أصحاب المصلحة أحيانًا صعاب أو متسلطين لأنّ لديهم أهدافًا مختلفة عن أهداف مصمم تجربة المستخدم، أو هذا ما يبدو عليه الأمر عند النظر بسطحية؛ وكما هو الحال في لعبة شد الحبل، فإن كل طرف يسحب في اتجاه معاكس للآخر. على سبيل المثال، ربما يسعى المصمم إلى تحسين تجربة المستخدم، بينما يقول أحد أصحاب المصلحة أنه لا يعطي أولوية لتجربة المستخدم بل يركّز على المبيعات.
</p>

<p>
	من خلال إيجاد الأهداف المشتركة، يدرك كلا الطرفين بأنهما يسيران بالاتجاه نفسه، فعلى سبيل المثال، يمكن توضيح كيف ينعكس تحسين تجربة المستخدم إيجابيًا على المبيعات، كما يمكن استخدام طريقة <a href="https://academy.hsoub.com/entrepreneurship/general/%D8%A7%D9%84%D9%84%D9%85%D8%A7%D8%B0%D8%A7%D8%AA-%D8%A7%D9%84%D8%AE%D9%85%D8%B3%D8%A9-the-5-whys-%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D8%A8%D8%B3%D9%8A%D8%B7%D8%A9-%D9%84%D9%81%D9%87%D9%85-%D8%A3%D9%8A-%D9%85%D8%B4%D9%83%D9%84%D8%A9-r149/" rel="">اللماذات الخمسة</a> لتحديد الأهداف العامة المشتركة.
</p>

<h2 id="4">
	4. توضيح الأدوار والمسؤوليات
</h2>

<p>
	لا أحد يرغب بأن يقوم شخص آخر بدوره، فإذا لم تكن الأدوار والمسؤوليات موضَّحةً وموزعةً من البداية فلا بد من حدوث التوتر والاضطراب الذي يؤدي إلى الخلافات بطبيعة الحال.
</p>

<p>
	من الأساليب الرائعة لإرساء فهم مشترك للأدوار والمسؤوليات، من المهم استخدام نموذج RACI المكون من اختصار الحروف الأولى بالإنجليزية لأربع أدوار، وهي:
</p>

<ul>
	<li>
		منفِّذ
	</li>
	<li>
		مسؤول
	</li>
	<li>
		مستشار
	</li>
	<li>
		مطّلع.
	</li>
</ul>

<p>
	ولتطبيق هذا النموذج يجب أن يجتمع الأطراف ويراجعوا المهمات ليقرروا توزيع الأدوار والمسؤوليات كما يلي:
</p>

<ul>
	<li>
		من <strong>المسؤول</strong> عن ضمان إنجاز المهمة؟
	</li>
	<li>
		من <strong>المنفذ</strong> للمهمة؟
	</li>
	<li>
		من الذي يجب <strong>استشارتُه</strong> أثناء المهمة؟
	</li>
	<li>
		من الذي يجب أن يبقى <strong>على اطلاع</strong> لكن ليس بالضرورة استشارته بصورة مباشرة؟
	</li>
</ul>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpg" data-fileid="169893" href="https://academy.hsoub.com/uploads/monthly_2025_03/04--RACI.jpg.95c2e1e62af8c0dd5e82962c3551397c.jpg" rel=""><img alt="04-مصفوفة-RACI.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="169893" data-ratio="65.33" data-unique="tx232lxoe" style="width: 600px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2025_03/04--RACI.thumb.jpg.476a3e17a108532c94dabdd33ee2aa8c.jpg"></a>
</p>

<h2 id="5">
	5. كسب ثقة أصحاب المصلحة
</h2>

<p>
	في الحياة أمورٌ كثير يصعب اكتسابها، ومنها ثقة أصحاب المصلحة، فالأمر يحتاج إلى بذل مجهود كبير أولًا. من المهم تخصيص وقت للتفكير في كيفية إرضاء أصحاب المصلحة، مثل مساعدتهم في إنجاز مهمة ما أو توفير دراسات سابقة لهم.
</p>

<p>
	يُعَد تحقيق انتصارات مبكرة على مستوى العمل طريقةٌ ممتازةً لبناء الثقة بيننا وبين أصحاب المصلحة. لذا من المهم تحديد هدف مفيد وواقعي وقابل للإنجاز للعمل على تحقيقه وإظهار التأثير الإيجابي لجودة <a href="https://academy.hsoub.com/design/general/%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-r846/" rel="">التصميم</a> وقوة الأبحاث على سير العمل.
</p>

<h2 id="6">
	6. عدم الاعتماد على القول بل على الفعل
</h2>

<p>
	بدلًا من إخبار أصحاب المصلحة كيف يجب القيام بالأمور أو محاولة إقناعهم بالموافقة على أشياء لم يقتنعوا بها بعد، من الأفضل إظهار ذلك لهم عمليًا. على سبيل المثال، يمكن <a href="https://academy.hsoub.com/design/general/%D8%A7%D9%84%D9%86%D9%85%D8%A7%D8%B0%D8%AC-%D8%A7%D9%84%D8%A3%D9%88%D9%84%D9%8A%D8%A9-prototypes-%D9%83%D9%8A%D9%81-%D8%AA%D8%A8%D9%86%D9%8A%D9%87%D8%A7-%D9%88%D9%85%D8%A7-%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-r857/" rel="">إعداد نموذج أولي</a> يبين كيف ستبدو تجربة المستخدم، أو إعداد <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF-%D8%AE%D8%B1%D8%A7%D8%A6%D8%B7-%D8%B1%D8%AD%D9%84%D8%A9-%D8%A7%D9%84%D8%B9%D9%85%D9%8A%D9%84-r772/" rel="">خريطة رحلة المستخدم</a> التي تبرز نقاط الألم والفرص التي يجب استهدافها، أو إنشاء مقطع فيديو يوضح مشكلات اختبار سهولة الاستخدام التي يجب معالجتها.
</p>

<h2 id="7">
	7. التحدث بلغة أصحاب المصلحة
</h2>

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

<h2 id="8">
	8. إشراك أصحاب المصلحة في دائرة العمل
</h2>

<p>
	من المهم إشراك أصحاب المصلحة المرهِقين في خطوات عملية التصميم، وقد يكون ذلك من خلال ورشات العمل أو التعاون الشخصي أو المقابلات، مما يساعد على فهمهم للعملية ومساهمتهم فيها، وعندها لن يتمكنوا من انتقاد عمل كانوا جزءًا فعالًا منه.
</p>

<h2 id="9">
	9. مشاركة العمل مع أصحاب المصلحة
</h2>

<p>
	إذا تعذر إشراك أصحاب المصلحة صعبي التعامل في رحلة التصميم بصورة مباشرة، فيجب على الأقل أن نشارك عملنا معهم باستمرار. تقول تيريزا توريس مدربة تطوير المنتجات في كتابها المميز بعنوان <strong>عادات الاستكشاف المستمر</strong>:
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		مفتاح التعامل مع أصحاب المصلحة هو عرض عملك عليهم. لا تبدأ معهم من النتائج، بل شاركهم العمل خطوةً بخطوة بطريقة يسهل عليهم استيعابها.
	</p>

	<ul>
		<li>
			تيريزا توريس، مدربة تطوير منتجات.
		</li>
	</ul>
</blockquote>

<p>
	إذا كنا نشارك عملنا باستمرار مع أصحاب المصلحة فإن ذلك سيمكّنهم من رؤية ما نقوم به وفهم الأساس المنطقي الذي يبرر القرارات والتوصيات فهمًا أفضل. من المهم تحديد وتيرة ثابتة لمشاركة العمل مع أصحاب المصلحة، والتفكير بالطريقة الأنسب التي تسهّل عليهم استيعابه. يمكن مثلًا عقد جلسات عرض وإبلاغ دورية، أو إعداد مقاطع فيديو منتظمة لعرض التحديثات، أو إرسال بريد إلكتروني أسبوعي بالتحديثات إلى أصحاب المصلحة.
</p>

<h2 id="10">
	10. العمل فرديًا مع صاحب المصلحة صعب المراس
</h2>

<p>
	تختلف عمومًا تصرفات الناس عندما يكونون ضمن فريق عمّا هي عليه في التعامل الفردي، فبعض الأطفال مثلًا يصبحون أكثر عدوانيةً ضمن مجموعة من أصدقائهم، وبعض المديرين يرغبون بفرض سيطرتهم ضمن الفريق. ينطبق هذا الأمر تمامًا على بعض أصحاب المصلحة الذين يتعاملون فرديًا مع الشخص الآخر بطريقة مثالية لكنهم يتحولون إلى كابوسٍ حقيقي عندما يكونون ضمن فريق تسوده مشاعر الغرور والتكبر.
</p>

<p>
	في هذه الحالات قد يكون الابتعاد عن جو العمل الجماعي واللجوء إلى العمل الفردي حلًّا مثاليًا، مما يفسح المجال لتوطيد علاقة عمل جيدة واستغلال الوقت باجتماع فردي مثمر.
</p>

<h2 id="11">
	11. التواصل المستمر
</h2>

<p>
	عندما يتعلق الأمر بأصحاب المصلحة فإن الغياب بالطبع لن يزيد الأشواق بل سيزيد العلاقات الشائكة سوءًا. تحتاج العلاقات دائمًا إلى جهدٍ مستمر، سواءً في العمل أو في الحياة الشخصية، ولا يمكن التفاؤل بازدهار العلاقات دون بذل هذا الجهد؛ ولهذا السبب من الضروري التواصل باستمرار مع أصحاب المصلحة صعاب التعامل. وقد يكون ذلك عبر المتابعة نصف الشهرية أو الأسبوعية أو حتى اليومية، من خلال لقاءات مباشرة أو على الأقل بمكالمات الفيديو.
</p>

<h2 id="12">
	12. عدم التهرب من الخلافات
</h2>

<p>
	كما يقول مستشارو العلاقات، فإن حدوث بعض الخلافات هو جزء طبيعي من العلاقة الصحية، لا كثرة الخلافات ولا انعدامها؛ فالعلاقات التي تخلو من الخلافات إما يطغى فيها طرفٌ على آخر، وإما يسود فيها الخوف من المواجهة.
</p>

<p>
	رغم أن الأمر قد يكون مربكًا، لكن يُنصَح بعدم التهرب من الخلاف مع أصحاب المصلحة صعاب التعامل، وهنا ليس المقصود بالطبع الدخول في صراع حادّ معهم، لكن يجب الانفتاح على أية مسألة تختلف فيها وجهات النظر، من خلال توفير بيئة تدعم الحوارات الصريحة والشفافة.
</p>

<h2 id="-4">
	خاتمة
</h2>

<p>
	يُعَد التعامل مع أصحاب المصلحة صعاب المراس أمرًا مرهقًا، لكنه جزءٌ من التحديات الواقعية التي تواجه مصممي تجربة المستخدم، مع ذلك يجب عليهم تعلُّم كيفية تجاوزها. 
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://www.uxforthemasses.com/working-with-difficult-stakeholders/#" rel="external nofollow">How to work with difficult stakeholders</a> لصاحبه Neil Turner.
</p>

<h2 id="-5">
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D8%AE%D8%B7%D9%88%D8%A9-%D8%A8%D8%AE%D8%B7%D9%88%D8%A9-%D9%84%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r836/" rel="">دليلك الشامل خطوة بخطوة لاحتراف تصميم تجربة المستخدم UX</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r709/" rel="">أساسيات تصميم تجربة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/general/%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-r846/" rel="">مبادئ التصميم وأهميتها</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">875</guid><pubDate>Fri, 28 Mar 2025 12:06:00 +0000</pubDate></item><item><title>&#x643;&#x64A;&#x641; &#x62A;&#x646;&#x62A;&#x642;&#x644; &#x645;&#x646; &#x627;&#x644;&#x62A;&#x635;&#x645;&#x64A;&#x645; &#x627;&#x644;&#x62C;&#x631;&#x627;&#x641;&#x64A;&#x643;&#x64A; &#x625;&#x644;&#x649; &#x62A;&#x635;&#x645;&#x64A;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645; UX</title><link>https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81-%D8%AA%D9%86%D8%AA%D9%82%D9%84-%D9%85%D9%86-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D8%AC%D8%B1%D8%A7%D9%81%D9%8A%D9%83%D9%8A-%D8%A5%D9%84%D9%89-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r873/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2025_01/UX.png.457a7ad143f1f2bd69f3cdd25abe06a7.png" /></p>
<p>
	من المتعارف عليه بين الناس أن التصميم الجرافيكي graphic design هو جوهر مجال التصميم، فهو يتجلى حولنا في شعارات العلامات التجارية الشهيرة، كما نراه في الخطوط والألوان على اللوحات الإعلانية للأفلام، فضلًا عن غيرها من التصاميم البارزة التي يبدعها مصممو الجرافيك في كل مكان. لكن لماذا إذًا قد يرغب مصمم الجرافيك بالانتقال إلى تصميم تجربة المستخدم؟ أحد أبرز الأسباب هو الشعور بالإنجاز والرضا الذي ينبع من الاهتمام بتفاصيل المنتج، بدلًا من اقتصار العمل على الشكليات الخارجية. لا ننسى أيضًا أن راتب مصمم تجربة المستخدم يفوق نظيره للمصمم الجرافيكي في معظم الأحيان.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpeg" data-fileid="166179" href="https://academy.hsoub.com/uploads/monthly_2025_01/01--------.jpeg.74092a3ea155281b1679a8ff5cd0c9fd.jpeg" rel=""><img alt="01-انتقال-من-تصميم-جرافيكي-إلى-تصميم-تجربة-المستخدم.jpeg" class="ipsImage ipsImage_thumbnailed" data-fileid="166179" data-ratio="40.44" data-unique="n5hks83q8" style="width: 650px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2025_01/01--------.thumb.jpeg.442dd5a49f7bf9fa0ff6705ff15f9e07.jpeg"></a>
</p>

<p>
	على أي حال، أيًا كان السبب الذي يدفع مصمم الجرافيك للتغيير، فمن المرجح أن يكون هذا التغيير مثمرًا للغاية، لكن كيف يمكن تحقيق هذا التحول المهني من التصميم الجرافيكي إلى تصميم تجربة المستخدم؟ لنتعرف على الإجابة فيما يلي.
</p>

<h2 id="">
	ما المقصود بتجربة المستخدم وتصميم تجربة المستخدم؟
</h2>

<p>
	<a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">تجربة المستخدم UX</a> هي ما يشعر به المستخدم أثناء استخدام <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">المنتج</a>. وتكمُن وظيفة مصمم تجربة المستخدم في تصميم منتج يقدم أفضل تجربة ممكنة؛ لكن كيف يجري ذلك؟
</p>

<p>
	يبدأ الأمر بإجراء الكثير من الأبحاث، إذ لا يمكن تقديم أي شيء مفيد للمستخدم دون التعرف على نوع المشكلات التي يعاني منها وكيفية حلها لكي يكون الحل ملبيًا لرغبات المستخدم ومحققًا لاحتياجاته؛ كما لا يمكن فهم تلك المشكلات دون التفاعل مع المستخدمين.
</p>

<p>
	يتركز اهتمام مصممي تجربة المستخدم عادةً على ثلاثة عوامل رئيسية هي: مظهر المنتج، وانطباعه، و<a href="https://academy.hsoub.com/design/user-experience/%D9%82%D8%A7%D8%A8%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r728/" rel="">سهولة استخدامه Usability</a>.
</p>

<p>
	يتمحور المظهر حول تصميم منتج جذاب بصريًا يتناغم مع تفضيلات المستخدمين ويجسِّد توقعاتهم من المنتج، ولا يقتصر ذلك على الناحية الجمالية، بل يجب أن يكون التصميم ملائمًا أيضًا، بحيث يساعد على بناء جسر من الثقة والمصداقية بين المنتج والمستخدم؛ أما الانطباع فهو يتعلق بتطوير منتجات ممتعة الاستخدام، إذ يجب أن يقدم المنتج تجربةً تعطي شعورًا بالمتعة وليس فقط يؤدي وظيفته، سواءً كان ذلك أثناء التفاعل مع المنتج أو الاستجابة له.
</p>

<p>
	كذلك، تُعَد سهولة الاستخدام هي الجوهر الأساسي لتجربة المستخدم، ففي حال كان المنتج صعب الاستخدام، فلن تحظى تجربة المستخدم بالنجاح على الإطلاق. وهنا يهدف مصممو تجربة المستخدم إلى تصميم منتجات يمكن تكييفها مع احتياجات المستخدم المختلفة، وفي نفس الوقت ذات أداء وظيفي مألوف للمستخدم.
</p>

<h2 id="-1">
	العناصر المشتركة بين التصميم الجرافيكي وتصميم تجربة المستخدم
</h2>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpg" data-fileid="166180" href="https://academy.hsoub.com/uploads/monthly_2025_01/04--------.jpg.58f2e2ee7bb27434a6486bd3426d6e8f.jpg" rel=""><img alt="04-العناصر-المشتركة-بين-التصميم-الجرافيكي-وتصميم-تجربة-المستخدم.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="166180" data-ratio="65.78" data-unique="ou8ernwjj" style="width: 650px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2025_01/04--------.thumb.jpg.e96978883e69c1a2ac95fabde03b0217.jpg"></a>
</p>

<p>
	يشترك التصميم الجرافيكي وتصميم تجربة المستخدم في كل من الذكاء العاطفي والتفكير الإبداعي والنمذجة الأولية، بينما يختلفان في عناصر أخرى خاصة بكل مجال.
</p>

<h3 id="-2">
	التصميم العاطفي
</h3>

<p>
	يدور التصميم الجرافيكي حول التواصل العاطفي من خلال الخطوط والألوان والصور، فالخطوط المزخرفة والألوان الداكنة تعطي شعورًا بالجدية؛ أما الخطوط البسيطة والألوان الزاهية، فتضفي شعورًا بالفرح والمتعة. بهذه الأساليب يعتمد مصمم الجرافيك في كثير من الأحيان على التصميم العاطفي لتحفيز المشاعر المطلوبة لدى المستخدم.
</p>

<p>
	بالمثل، فإن تصميم تجربة المستخدم يُعنى بتوجيه مشاعر المستخدم، لكنه يهتم بالصورة الشاملة لتجربة المستخدم في استخدامه للمنتج. وبالتالي، بالإضافة إلى التركيز على الخطوط والألوان المناسبة، يهتم مصمم تجربة المستخدم بالتصميم الحركي ونبرة المحتوى وهندسة المعلومات وغيرها من النواحي.
</p>

<h3 id="-3">
	التفكير الإبداعي
</h3>

<p>
	يتمتع كل من مصممي الجرافيك ومصممي تجربة المستخدم بمهارات متكافئة في التفكير الإبداعي. بالنسبة للتصميم الجرافيكي فإن إنشاء تصاميم بصرية إبداعية تجمع بين الألفة (لتكون مفهومةً للمستخدم) والتفرُّد (لتكون قويةً تنافسيًا) يتطلب قدرًا عاليًا من التفكير الإبداعي والنقدي. وبالمثل يتعين على مصمم تجربة المستخدم ابتكار منتجات تحل مشكلات المستخدم، فليس بالضرورة أن تكون الحلول المألوفة هي الأنسب.
</p>

<h3 id="-4">
	النمذجة الأولية
</h3>

<p>
	ينشئ مصمم الجرافيك نماذج مُحاكية mockups ورسوم تخطيطية wireframes للتصاميم قبل إعداد التصميم النهائي، مما يسمح للعميل بإبداء ملاحظاته حول التصاميم، ويمكّن المصمم من تحسينها دون الحاجة إلى تكرار التصميم من الصفر.
</p>

<p>
	يعمل مصمم تجربة المستخدم أيضًا على إنشاء نماذج محاكية ونماذج أولية، لكنها تكون أقل تركيزًا على "مظهر" المنتج وأكثر تركيزًا على "انطباعه"، ومن الأمثلة على الأسئلة التي يبحث مصمم تجربة المستخدم عن إجابات لها: هل هذا النموذج الأولي مفيد؟ هل هو سهل الاستخدام؟ هل هو مرغوب؟
</p>

<h2 id="-5">
	الاختلاف بين التصميم الجرافيكي وتصميم تجربة المستخدم
</h2>

<p>
	يختلف التصميم الجرافيكي عن تصميم تجربة المستخدم في النواحي التالية:
</p>

<h3 id="-6">
	التركيز على المستخدم مقابل التركيز على التفاصيل
</h3>

<p>
	يميل مصممو الجرافيك إلى الاهتمام بأدقّ التفاصيل في تصاميمهم، مثل التحقق من التباعد المثالي بين حروف النص وتوافق الألوان مع توجُّهات العلامة التجارية، إذ تحتل هذه الجوانب حيزًا كبيرًا من عملهم، ولها أسبابها الوجيهة. في المقابل، يركّز مصممو تجربة المستخدم على المستخدمين، ويهتمون بالواجهة التي يتفاعل المستخدم من خلالها مع المنتج من أجل ضمان تلبية المنتج للاحتياجات الأساسية للمستخدمين؛ ويتطلب ذلك بالطبع إجراء الكثير من الأبحاث التي تتضمن مخاطبة المستخدمين ومراقبتهم، وإنشاء <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%AF%D8%AE%D9%84-%D9%86%D8%AD%D9%88-%D8%B4%D8%AE%D8%B5%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-personas-r688/" rel="">شخصيات المستخدم</a> و<a href="https://academy.hsoub.com/entrepreneurship/business/%D9%82%D8%B5%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-story-%D9%88%D8%AF%D9%88%D8%B1%D9%87%D8%A7-%D9%81%D9%8A-%D8%AA%D8%B9%D8%B2%D9%8A%D8%B2-%D8%A7%D9%84%D9%82%D9%8A%D9%85%D8%A9-%D9%84%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r1109/" rel="">قصص المستخدم</a>، وإجراء اختبارات سهولة الاستخدام على المنتجات، وغيرها الكثير؛ لذلك يتعين على مصمم الجرافيك الذي ينوي تغيير اختصاصه إلى تصميم تجربة المستخدم بأن يبذل مجهودًا في تعلُّم كيفية إجراء أبحاث المستخدمين (سنتحدث عن ذلك بمزيد من التفصيل لاحقًا).
</p>

<h3 id="-7">
	الطريقة التكرارية لحل المشكلات
</h3>

<p>
	يُعَد تصميم تجربة المستخدم عمليةً تكرارية لحل المشكلات، لذا قد يختلف اختلافًا كبيرًا عما اعتاد عليه مصمم الجرافيك. يبدأ تصميم تجربة المستخدم بتحديد المشكلة، وهي خطوة تجري غالبًا من خلال <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%81%D9%8A-%D8%A8%D8%AD%D8%AB-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r797/" rel="">أبحاث المستخدمين</a> التي تساعد على تحديد المشكلة أو على الأقل تأكيدها، فلا فائدة من حل مشكلات لا يهتم بها المستخدمون، لأنهم ببساطة لن يدفعوا شيئًا لقاء حل مشكلات لا تهمّهم، وبالتالي لن تكسب الشركة أي عوائد مالية.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpg" data-fileid="166181" href="https://academy.hsoub.com/uploads/monthly_2025_01/05------.jpg.b12107cd91043f98fccd7b0ced9c0125.jpg" rel=""><img alt="05-العملية-التكرارية-في-تصميم-تجربة-المستخدم.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="166181" data-ratio="84.63" data-unique="suejifw1e" style="width: 650px; height: auto;" width="709" src="https://academy.hsoub.com/uploads/monthly_2025_01/05------.thumb.jpg.6db0a4bd9047812dc1758c11e092504f.jpg"></a>
</p>

<p>
	بعد الانتهاء من مرحلة تحديد المشكلة، تُجرى المزيد من الأبحاث لإيجاد الطريقة المثلى المناسبة للمستخدم في حل المشكلة المدروسة، وغالبًا ما يجري ذلك من خلال المراقبة واستطلاعات الرأي و<a href="https://academy.hsoub.com/design/user-experience/%D8%B7%D8%B1%D8%A7%D8%A6%D9%82-%D8%AA%D8%AD%D8%B3%D9%8A%D9%86-%D9%86%D8%AA%D8%A7%D8%A6%D8%AC-%D8%A7%D9%84%D8%A3%D8%A8%D8%AD%D8%A7%D8%AB-%D8%A7%D9%84%D8%A5%D8%AB%D9%86%D9%88%D8%BA%D8%B1%D8%A7%D9%81%D9%8A%D8%A9-r798/" rel="">الأبحاث الإثنوجرافية</a> وغيرها.
</p>

<p>
	يجري التصميم لاحقًا على ضوء نتائج هذه الأبحاث، ثم يُختبَر التصميم على المستخدمين لمعرفة مدى ملاءمة الحلول المصمَّمة، ويُعاد التصميم مرارًا حتى تحقيق المعايير المطلوبة.
</p>

<p>
	بعد ذلك يحين موعد إطلاق المنتج، لكن عملية التصميم لا تنتهي هنا، إذ يستمر إجراء اختبارات على التصميم وجمع آراء وملاحظات المستخدمين من خلال دورة جديدة من أبحاث المستخدمين، ثم تطبَّق تحسينات لاحقة على التصميم على ضوء هذه الملاحظات.
</p>

<h3 id="-8">
	تعدد المجالات مقابل التخصص
</h3>

<p>
	يتطلب التصميم الجرافيكي لمجال متخصص مستوًى معينًا من الإبداع ومجموعةً من المهارات التخصصية (مثل المعرفة بالخطوط و<a href="https://academy.hsoub.com/design/graphic/%D9%83%D9%84-%D9%85%D8%A7-%D9%8A%D8%AC%D8%A8-%D8%B9%D9%84%D9%8A%D9%83-%D9%85%D8%B9%D8%B1%D9%81%D8%AA%D9%87-%D8%B9%D9%86-%D9%86%D8%B8%D8%B1%D9%8A%D8%A9-%D8%A7%D9%84%D8%A3%D9%84%D9%88%D8%A7%D9%86-%D9%84%D8%BA%D9%8A%D8%B1-%D8%A7%D9%84%D9%85%D8%B5%D9%85%D9%85%D9%8A%D9%86-r565/" rel="">نظرية الألوان</a>)، وذلك لإنشاء تصاميم بصرية جذابة. في المقابل، فإن تصميم تجربة المستخدم يتّسم بتعدد التخصصات ويتضمن مجالات معرفية متنوعة. فمثلًا، يجب أن يكون مصمم تجربة المستخدم على دراية بكلٍّ من علم النفس البشري و<a href="https://academy.hsoub.com/design/user-experience/%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86-%D8%A5%D9%84%D9%89-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D8%AA%D9%81%D8%A7%D8%B9%D9%84%D9%8A-interaction-design-r401/" rel="">التصميم التفاعلي</a> وهندسة المعلومات وتقنيات أبحاث المستخدمين على سبيل المثال لا الحصر، وذلك بغية تصميم حلول صحيحة لمشكلات المستخدمين.
</p>

<p>
	يوضح (دون نورمان) مبتكِر مصطلح "تجربة المستخدم" أنّ تجربة المستخدم تغطي جميع جوانب تجربة الناس للنظام المصَّمم، بما في ذلك الرسوم الجرافيكية للمنتجات المادية وواجهات المستخدم والكتيبات الإرشادية إضافةً إلى التفاعل المادي للمستخدم مع كل ذلك.
</p>

<h2 id="-9">
	فوائد خبرات التصميم الجرافيكي عند الانتقال إلى مجال تصميم تجربة المستخدم
</h2>

<p>
	يتمتع مصمم الجرافيك بخبرات مفيدة جدًا في تصميم تجربة المستخدم، أهمها:
</p>

<h3 id="-10">
	النواحي الجمالية
</h3>

<p>
	من أهم مزايا انتقال مصمم الجرافيك إلى تصميم تجربة المستخدم أنه يستفيد كثيرًا من خبرته في جعل الأشياء جذابةً بصريًا. يعتقد الكثيرون خطأً أن سهولة الاستخدام تتفوق على الناحية الجمالية في مجال تصميم تجربة المستخدم، لكن في الواقع تبين أن الجماليات تحسّن بذاتها من إجمالي تجربة المستخدم للمنتج من خلال إضفاء شعور بالاسترخاء وترسيخ انطباع أولي إيجابي وإظهار أن المنتج تم إعدادُه بإتقان.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpg" data-fileid="166182" href="https://academy.hsoub.com/uploads/monthly_2025_01/06-----.jpg.fb2ec3b4ed833bdbc9b63d84007a5135.jpg" rel=""><img alt="06-الجماليات-تعزز-مصداقية-الموقع-الإلكتروني.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="166182" data-ratio="78.95" data-unique="bv10h31pq" style="width: 650px; height: auto;" width="760" src="https://academy.hsoub.com/uploads/monthly_2025_01/06-----.thumb.jpg.ba94603202b1a3d6994460bee788eff1.jpg"></a>
</p>

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

<h3 id="-11">
	التصاميم المألوفة والتصاميم الرائجة
</h3>

<p>
	القدوم من خلفية تصميمية لا يعني فقط إلمام المصمم بمصطلحات التصميم، بل من المرجح أن يكون على دراية بالتصاميم المألوفة والاتجاهات الرائجة في تصميم الويب والتطبيقات. يستفيد مصمم تجربة المستخدم في معظم الأحيان من التصاميم المتعارف عليها (مثل مفتاح التبديل لحالات التشغيل والإيقاف، والقائمة المنسدلة للخيارات المتعددة، إلخ) وذلك لأن المستخدم يفهم هذه التصاميم من مواقع الويب الأخرى.
</p>

<p>
	مصمم الجرافيك معتادٌ أيضًا على هذه التصاميم، لا سيما إذا كان قد أعدّ نماذج أولية مسبقًا؛ مما يعني أنه سيتكيف مع مهام تصميم تجربة المستخدم أسرع من الأشخاص الذين لا يأتون من خلفية تصميمية. قد لا يبدو الأمر ذا أهمية كبيرة، لكنّ القدرة على التواصل والتحدث بلغة التصميم هي جوهر أي مشروع تصميمي.
</p>

<h2 id="-12">
	كيف يمكن تحسين المهارات للانتقال من التصميم الجرافيكي إلى تصميم تجربة المستخدم
</h2>

<p>
	هل هناك فجوة بين التصميم الجرافيكي وتصميم تجربة المستخدم؟ نعم، لكنها ليست بالفجوة العميقة، فالمصمم الجرافيكي يتحدث أساسًا بلغة التصميم، وهو لا يحتاج سوى لصقل مهاراته لتشمل المهارات الخاصة بتصميم تجربة المستخدم.
</p>

<p>
	بمجرد حيازة هذه المهارات المكمّلة، يمكن بدمجها في العمل بالتصميم الجرافيكي (فتصميم تجربة المستخدم يضيف قيمةً إلى التصميم الجرافيكي بقدر ما يضيفها إلى تصميم المنتجات)، بعدها يمكن تعديل السيرة الذاتية لتسليط الضوء أكثر على مهارات تصميم تجربة المستخدم إلى جانب مهارات التصميم الجرافيكي.
</p>

<p>
	وكما ذكرنا مسبقًا، المفتاح الحقيقي لمصمم الجرافيك هو فهم جميع أشكال أبحاث المستخدمين، وهو ما يمكن تعلُّمه من خلال ما يلي:
</p>

<h3 id="-13">
	الدورات عبر الإنترنت
</h3>

<p>
	هناك العديد من المنصات التي تقدم دورات تعليمية تغطي المهارات الأساسية في تصميم تجربة المستخدم ومجالات العمل المختلفة لهذا الاختصاص مع التدريب على المهارات العملية. هذا النوع من الدورات يُكسِب المصمم الجرافيكي الخبرة والثقة الكافية لاجتياز مقابلات التوظيف، ومن ثم العمل في مجال تصميم تجربة المستخدم.
</p>

<h3 id="-14">
	الدورات على أرض الواقع
</h3>

<p>
	يفضل البعض التعلم في قاعة دراسية على التعلُّم عن بُعد، لذا يمكن البحث عن دورات تدريبية مباشرة لتعلُّم مهارات تصميم تجربة المستخدم في حال الرغبة في ذلك، لكنّ هذا النوع من الدورات يكون عادةً متاحًا في مواقع محددة، وقد يرفع تكاليف التعلم أكثر في حال كانت هذه المواقع بعيدة عن مكان الإقامة.
</p>

<h3 id="-15">
	الدراسة الجامعية
</h3>

<p>
	ليس من المرجح أن تكون الدراسة الجامعية هي الخيار الأمثل لمن يبحث عن تغيير مجال عمله، فالأمر لا يتوقف على الميزانية، بل أيضًا على الوقت المستغرَق. يمكنك أن تعمل وتتعلم في الوقت نفسه باستخدام طريقة أخرى بدلًا من قضاء 3 أو 4 سنوات جامعية للحصول على شهادة بكالوريوس أو سنتين بالنسبة لبرامج الماجستير. لكن بالعموم، في حال اخترت طريق الدراسة الجامعية، يجب أن تخصص وقتًا كافيًا للبحث عن البرنامج الدقيق الذي يناسبك، مع العلم أن هناك مئات البرامج الجامعية التي تتيح دراسة هذا الاختصاص.
</p>

<p>
	يُنصح أيضًا بالاستعانة بآلة حاسبة وتخصيص بعض الوقت لحساب تكاليف الذهاب إلى الجامعة قبل حجز مقعد جامعي، بما في ذلك تكاليف الإيجار والرسوم الدراسية والكتب وغيرها، مع مراعاة عدم القدرة على العمل بدوام كامل في فترة الدراسة الجامعية، مما يعني المزيد من الفجوة المالية بين هذه الطريقة والطرائق الأخرى.
</p>

<h3 id="-16">
	التشبيك
</h3>

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

<p>
	بالإضافة لذلك، يمكن متابعة أعضاء مشهورين في مجال تصميم تجربة المستخدم على منصة اكس وهي وسيلةٌ أخرى من الوسائل المفيدة للبدء ببناء شبكة المعارف من نفس المجال، وبهذه الطريقة يمكن التفاعل معهم والتعلم منهم باستمرار.
</p>

<h3 id="-17">
	الإرشاد والتقييم
</h3>

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

<h2 id="-18">
	خاتمة
</h2>

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

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://www.interaction-design.org/literature/article/how-to-change-your-career-from-graphic-design-to-ux-design" rel="external nofollow">How to Change Your Career from Graphic Design to UX Design</a> لصاحبه Teo Yu Siang.
</p>

<h2 id="-19">
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D8%AE%D8%B7%D9%88%D8%A9-%D8%A8%D8%AE%D8%B7%D9%88%D8%A9-%D9%84%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r836/" rel="">دليلك الشامل خطوة بخطوة لاحتراف تصميم تجربة المستخدم UX</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D9%82%D8%A7%D8%A8%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r728/" rel="">قابلية الاستخدام وأهميتها في تجربة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86-%D8%A5%D9%84%D9%89-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D8%AA%D9%81%D8%A7%D8%B9%D9%84%D9%8A-interaction-design-r401/" rel="">دليل المبتدئين إلى التصميم التفاعلي Interaction Design</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">873</guid><pubDate>Sun, 19 Jan 2025 16:00:00 +0000</pubDate></item><item><title>&#x627;&#x644;&#x625;&#x62C;&#x631;&#x627;&#x621;&#x627;&#x62A; &#x627;&#x644;&#x644;&#x627;&#x632;&#x645;&#x629; &#x641;&#x64A; &#x62A;&#x635;&#x645;&#x64A;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645;</title><link>https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%A5%D8%AC%D8%B1%D8%A7%D8%A1%D8%A7%D8%AA-%D8%A7%D9%84%D9%84%D8%A7%D8%B2%D9%85%D8%A9-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r872/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2025_01/UX.png.56ea9c7f94287a1cbd624965c462f6ea.png" /></p>
<p>
	ربما أفضل ما يجب أن يقتنيه مصمم تجربة المستخدم هو قميصٌ مكتوبٌ عليه: "بحسب الحالة"، ليتمكن من الإشارة إلى هذه العبارة السحرية على قميصه بدلًا من تكرارها عشرات المرات يوميًا، ذلك أن جواب معظم الأسئلة المتعلقة بتجربة المستخدم يكمُن في هذه العبارة. ما أفضل نمط يمكن استخدامه للتصميم؟ بحسب الحالة. كم عدد المستخدمين الذين يجب التحدث معهم؟ الجواب يعتمد على الحالة. ما هي العناصر الأكثر أهمية في التصميم؟ أيضًا يتوقف الأمر على الحالة.
</p>

<p>
	يعود السبب في ذلك إلى أن الأسئلة المتعلقة <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">بتجربة المستخدم</a> تحكُمُها دائمًا الكثير من المتغيرات المعقدة، فإذا طرحنا أسئلة من قبيل: من هم المستخدمون لدينا؟ وما أهدافهم؟ وما المعوقات التي تواجهنا؟ وما النتائج التي نسعى لتحقيقها؟ وما هي معلوماتنا السابقة؟ وما الذي يجب أن نتعلمه؟ مهما كانت الإجابات عن هذه الأسئلة، فإن تغيير واحد أو أكثر من هذه المتغيرات فسيحتاج إلى نسخة جديدة مختلفة من الإجابات.
</p>

<p>
	على سبيل المثال، يتصرف المستخدم الخبير بطريقة مختلفة عن المستخدم المبتدئ، وتختلف معوقات التصميم المخصَّص للأجهزة المحمولة عن معوقات التصميم من أجل الحواسيب، كما أن التصميم الذي يعتمد على آراء الكثير من أصحاب المصلحة يتطلب منهجيةً مختلفةً عمّا لو كان عدد أصحاب المصلحة قليل.
</p>

<p>
	أما بالنسبة لسؤالنا اليوم <strong>ما هي أفضل الإجراءات في تصميم تجربة المستخدم؟</strong> فهو من أكثر الاسئلة التي ينطبق عليها الجواب المعهود "بحسب الحالة"، رغم أننا نرى فرق العمل مرارًا وتكرارًا تحاول تطبيق نفس المنهجية الجامدة بغض النظر عن المتغيرات المختلفة المؤثرة في المشروع، والتسلسل التالي هو أحد الأمثلة على هذه المنهجيات:
</p>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D9%85%D8%B1%D8%AD%D9%84%D8%A9-%D8%A7%D9%84%D8%AB%D8%A7%D9%86%D9%8A%D8%A9-%D9%81%D9%8A-%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%AA%D9%81%D9%83%D9%8A%D8%B1-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85%D9%8A-%D9%85%D8%B1%D8%AD%D9%84%D8%A9-%D8%AA%D8%AD%D8%AF%D9%8A%D8%AF-%D8%A7%D9%84%D9%85%D8%B4%D9%83%D9%84%D8%A9-%D9%88%D8%AA%D9%81%D8%B3%D9%8A%D8%B1-%D8%A7%D9%84%D9%86%D8%AA%D8%A7%D8%A6%D8%AC-r690/" rel="">تحديد المشكلة</a>، وإنشاء <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%AF%D8%AE%D9%84-%D9%86%D8%AD%D9%88-%D8%B4%D8%AE%D8%B5%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-personas-r688/" rel="">شخصيات المستخدم</a>، تحديد السيناريوهات
	</li>
	<li>
		إعداد رحلات المستخدم
	</li>
	<li>
		إنشاء <a href="https://academy.hsoub.com/design/user-experience/%D8%AA%D8%B9%D8%B1%D9%81-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D8%B1%D8%B3%D9%88%D9%85-%D8%A7%D9%84%D8%AA%D8%AE%D8%B7%D9%8A%D8%B7%D9%8A%D8%A9-wireframes-%D9%81%D9%8A-%D9%85%D8%AC%D8%A7%D9%84-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r243/" rel="">رسوم تخطيطية</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/general/%D8%A7%D9%84%D9%86%D9%85%D8%A7%D8%B0%D8%AC-%D8%A7%D9%84%D8%A3%D9%88%D9%84%D9%8A%D8%A9-prototypes-%D9%83%D9%8A%D9%81-%D8%AA%D8%A8%D9%86%D9%8A%D9%87%D8%A7-%D9%88%D9%85%D8%A7-%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-r857/" rel="">إنشاء نماذج أولية</a>
	</li>
	<li>
		إجراء اختبارات سهولة الاستخدام
	</li>
</ul>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2025_01/01------.jpg.b9ae989f74eb63001f750bb42c175259.jpg" data-fileid="165789" data-fileext="jpg" rel=""><img alt="منهجية غير مرنة في تصميم تجربة المستخدم" class="ipsImage ipsImage_thumbnailed" data-fileid="165789" data-ratio="25.29" data-unique="hbpcvl04b" style="width: 700px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2025_01/01------.thumb.jpg.fcf73d13a36293d80812de808d1fc32e.jpg"></a>
</p>

<p style="text-align: center;">
	منهجية غير مرنة في تصميم تجربة المستخدم قد تتّبعُها بعض الفرق بغض النظر عن المشروع
</p>

<p>
	تحتاج بعض المشاريع قطعًا إلى إجراء أبحاث أولية، بينما لا يحتاج بعضُها الآخر إلى هذه الأبحاث، كما أن شخصيات المستخدم قد تكون مفيدةً في بعض المشاريع وغير مفيدة في بعضها الآخر، وكذلك الأمر بالنسبة للنماذج الأولية عالية الدقة التي تكون ضروريةً في مشاريع معينة وغير ذات أهمية في مشاريع أخرى، وتتطلب بعض المشاريع إجراء اختبار سهولة الاستخدام، بينما يكون هذا الاختبار غير ضروري في مشاريع أخرى. ومع اكتسابنا للمزيد من الخبرة في مجال تجربة المستخدم، يتضح لنا أنه لا منهجية موحدة تلائم <a href="https://academy.hsoub.com/design/user-experience/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D8%AE%D8%B7%D9%88%D8%A9-%D8%A8%D8%AE%D8%B7%D9%88%D8%A9-%D9%84%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r836/" rel="">تصميم تجربة المستخدم</a> في جميع الحالات، أي أنه لا وجود لوصفة سحرية لإجراءات تجربة المستخدم تعطي دائمًا نتائج مبهرة بغض النظر عن المتغيرات.
</p>

<p>
	إن اختيار الإجراءات التي يجب تنفيذها في تصميم تجربة المستخدم أشبه بانتقاء أصناف معينة من الطعام بدلًا من التوجه إلى مأدُبة مفتوحة تتضمن جميع أصناف المأكولات، فلا يصحّ أن يعمل مصمم تجربة المستخدم على تنفيذ جميع الإجراءات دون تفكير، بل عليه أن يراعي المتغيرات المختلفة في المشروع ويختار المنهجية الأنسب من وجهة نظره لتحقيق النتائج المطلوبة.
</p>

<p>
	وضعت منصة <a href="https://www.designcouncil.org.uk/our-resources/framework-for-innovation/" rel="external nofollow">Design Council</a> مثلًا منهجيةً مفيدةً لمشاريع تصميم تجربة المستخدم باسم <strong>عملية تصميم الماسة المزدوجة</strong> كما في الصورة أدناه، ورغم أن هذه المنهجية تحدد المراحل التي يجب أخذها بالحسبان (الاستكشاف، التحديد، التطوير، التسليم) <a href="https://academy.hsoub.com/design/general/%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-r846/" rel="">ومبادئ التصميم</a> التي يجب اتباعها، مثل التصميم المتمحور حول المستخدم، إلا أنها لا تشترط إجراء جميع المراحل أو تحدد ما يجب فعله في كل مرحلة. فمثلًا قد تتطلب بعض المشاريع تنفيذ إجراءات الاستكشاف، بينما لا يتطلب بعضُها الآخر ذلك، وقد تكون بعض المشاريع محدَّدة بالتفصيل من الأساس، بينما يكون بعضها الآخر على النقيض من ذلك.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2025_01/02----.jpg.f5f4bfd911489fd13c83d17fc9c769a0.jpg" data-fileid="165788" data-fileext="jpg" rel=""><img class="ipsImage ipsImage_thumbnailed" data-fileid="165788" data-ratio="92.59" data-unique="c8nlnp8sz" width="648" alt="02-عملية-تصميم-الماسة-المزدوجة.jpg" src="https://academy.hsoub.com/uploads/monthly_2025_01/02----.thumb.jpg.fede4a27a677b63ad2e5f51f4d070157.jpg"></a>
</p>

<p style="text-align: center;">
	عملية تصميم الماسة المزدوجة من Design Council.
</p>

<p>
	إذا كان اختيار المنهجية المناسبة لتصميم تجربة المستخدم والإجراءات التي يجب تنفيذها يعتمد على العديد من المتغيرات المختلفة، فكيف يمكن استكشاف هذه المتغيرات؟ يكمُن الجواب في البدء بطرح الكثير من الأسئلة مثل:
</p>

<ul>
	<li>
		ما خلفية المشروع؟
	</li>
	<li>
		ما معايير نجاح المشروع؟
	</li>
	<li>
		ما هي القيود؟
	</li>
	<li>
		من هم المشاركون بالمشروع؟
	</li>
	<li>
		ما الذي قد يمنع نجاح المشروع؟
	</li>
	<li>
		من هم المستخدمون؟
	</li>
	<li>
		ما هي مشكلات المستخدمين التي يجب حلُّها؟
	</li>
	<li>
		ما الموارد والأفكار المتوفرة؟
	</li>
	<li>
		ما هي الافتراضات والأسئلة الرئيسية؟
	</li>
	<li>
		ما مدى أهمية المشروع؟
	</li>
</ul>

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

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="165223" href="https://academy.hsoub.com/uploads/monthly_2025_01/03----.png.23837c4efb95c729e9b82adf88e61c0d.png" rel=""><img alt="03 مخطط معلومات حول المشروع" class="ipsImage ipsImage_thumbnailed" data-fileid="165223" data-unique="by4ztyd3n" src="https://academy.hsoub.com/uploads/monthly_2025_01/03----.thumb.png.1b74d9852ff8106e4e7826b594bec61f.png"> </a>
</p>

<p style="text-align: center;">
	يساعد استخدام مخطط لجمع المعلومات الرئيسية حول المشروع على تحديد الإجراءات اللازمة لتصميم تجربة المستخدم في هذا المشروع
</p>

<h2 id="">
	خاتمة
</h2>

<p>
	بالعودة إلى سؤالنا الأساسي حول أفضل الإجراءات التي يجب تنفيذها في تصميم تجربة المستخدم، فإن الإجابة هي فعلًا بحسب الحالة، فتحديد الإجراءات اللازمة يعتمد على الكثير من المتغيرات المختلفة المؤثرة في المشروع، وكلما ازداد فهمنا لهذه المتغيرات، زاد تمكننا أكثر من تحديد المنهجية والإجراءات الملائمة للمشروع.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://www.uxforthemasses.com/best-ux-activities/" rel="external nofollow">What are the best UX activities to carry out? It depends…‎</a> لصاحبه Neil Turner.
</p>

<h2 id="-1">
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A3%D9%87%D9%85-%D8%A7%D9%84%D8%AA%D9%82%D8%A7%D8%B1%D9%8A%D8%B1-%D8%A7%D9%84%D9%84%D8%A7%D8%B2%D9%85%D8%A9-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r855/" rel="">أهم التقارير اللازمة لتصميم تجربة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D8%AE%D8%B7%D9%88%D8%A9-%D8%A8%D8%AE%D8%B7%D9%88%D8%A9-%D9%84%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r836/" rel="">دليلك الشامل خطوة بخطوة لاحتراف تصميم تجربة المستخدم </a><a href="https://academy.hsoub.com/design/user-experience/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D8%AE%D8%B7%D9%88%D8%A9-%D8%A8%D8%AE%D8%B7%D9%88%D8%A9-%D9%84%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r836/" rel="">UX</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/general/%D9%85%D8%A7-%D8%A7%D9%84%D9%81%D8%B1%D9%82-%D8%A8%D9%8A%D9%86-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-%D9%88%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ui%D8%9F-r853/" rel="">ما الفرق بين تجربة المستخدم UX وواجهة المستخدم UI؟</a>
	</li>
	<li>
		 النسخة الكاملة لكتاب <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">مدخل إلى تجربة المستخدم (User Experience - UX)</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">872</guid><pubDate>Sun, 05 Jan 2025 16:00:00 +0000</pubDate></item><item><title>&#x623;&#x641;&#x636;&#x644; 15 &#x645;&#x645;&#x627;&#x631;&#x633;&#x629; &#x644;&#x633;&#x647;&#x648;&#x644;&#x629; &#x627;&#x644;&#x648;&#x635;&#x648;&#x644; &#x625;&#x644;&#x649; &#x645;&#x648;&#x642;&#x639; &#x627;&#x644;&#x648;&#x64A;&#x628;</title><link>https://academy.hsoub.com/design/user-experience/%D8%A3%D9%81%D8%B6%D9%84-15-%D9%85%D9%85%D8%A7%D8%B1%D8%B3%D8%A9-%D9%84%D8%B3%D9%87%D9%88%D9%84%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84-%D8%A5%D9%84%D9%89-%D9%85%D9%88%D9%82%D8%B9-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-r860/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2024_07/----.png.2769604035e13df09f2453656e89c888.png" /></p>
<p>
	عند إنشاء موقع ويب هناك العديد من العوامل التي يجب مراعاتها جيدًا، ومن بين هذه العوامل ضرورة جعل الموقع سهل الاستخدام لجميع الأشخاص، بغض النظر عن قدراتهم و إعاقاتهم، وهنا تأتي أهمية تطبيق مبادئ سهولة الوصول لموقع الويب.
</p>

<p>
	إذًا ما هي بالضبط سهولة الوصول لموقع الويب؟
</p>

<p>
	في الواقع، سهولة الوصول لموقع الويب هي عبارة عن مجموعة من الممارسات التي تضمن توفير نفس فرص الوصول إلى المواقع للأشخاص ذوي الاحتياجات الخاصة. بمعنى آخر: يتمكن هؤلاء الأشخاص من الاستفادة من السلع والخدمات التي تقدمها تلك المواقع بنفس القدر المتاح للآخرين، لذا لا يمكن تجاهل حقيقة أن سهولة الوصول لموقع الويب تشكل جزءًا لا يتجزأ من عملية تصميم وتطوير المواقع باحترافية.
</p>

<p>
	سنقدم في هذه المقالة 15 من أبرز الممارسات التي تعمل على تعزيز سهولة الوصول <a href="https://academy.hsoub.com/devops/servers/%D8%A7%D9%84%D9%81%D8%B1%D9%82-%D8%A8%D9%8A%D9%86-%D8%B5%D9%81%D8%AD%D8%A9-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-%D9%88%D9%85%D9%88%D9%82%D8%B9-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-%D9%88%D8%AE%D8%A7%D8%AF%D9%85-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-%D9%88%D9%85%D8%AD%D8%B1%D9%83-%D8%A7%D9%84%D8%A8%D8%AD%D8%AB-r572/" rel="">لموقع الويب</a>، سوف تغطي هذه الممارسات الشائعة عدة جوانب مختلفة، مثل: <a href="https://academy.hsoub.com/files/36-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ui/" rel="">تصميم واجهة المستخدم</a> السهلة، وتوفير الوصول للمحتوى الصوتي والبصري، وضمان التوافق مع متصفحات الويب المختلفة، وغيرها الكثير.
</p>

<h2 id="">
	لماذا يجب أن تهتم بسهولة الوصول؟
</h2>

<p>
	هناك العديد من الأسباب التي تجعل المطورين والمصممين وأصحاب العمل/ العملاء يولون اهتمامًا لسهولة الوصول لضمان أنها تشكل جزءًا مبكرًا ومتكاملًا من عملية تطوير الويب، ومن ضمن تلك الأسباب ما يلي:
</p>

<ul>
	<li>
		في العديد من المناطق مثل الولايات المتحدة الأمريكية والاتحاد الأوروبي والمملكة المتحدة واليابان، يُعَد عدم التمييز ضد الأشخاص بسبب إعاقتهم مطلبًا قانونيًا، ففي الولايات المتحدة مثلًا، <a href="https://info.usablenet.com/2019-ada-web-accessibility-lawsuit-recap-report" rel="external nofollow">رُفعت 2235 دعوى قضائية جديدة</a> بموجب قانون الإعاقة في عام 2019 بالمحكمة الفيدرالية، وهو ما يعادل متوسط دعوى قضائية واحدة في الساعة.
	</li>
	<li>
		المواقع التي يمكن الوصول إليها، عادةً ما تكون مكتوبة بشيفرة برمجية مُحسنة وأكثر قوة، مما يجعلها تحظى بتصنيف جيد على محركات البحث.
	</li>
	<li>
		المواقع التي يصعب الوصول إليها تُعد ضارة للأعمال التجارية، ففي <a href="https://www.clickawaypound.com/" rel="external nofollow">دراسة استقصائية</a> أُجريت في المملكة المتحدة عام 2019، وُجِد أن أكثر من 4 ملايين شخص تخلى عن موقع ويب للبيع بالتجزئة بسبب العوائق التي واجهوها في الوصول إلى الموقع.
	</li>
	<li>
		إبعاد <a href="https://academy.hsoub.com/freelance/personal-branding/5-%D8%B7%D8%B1%D9%82-%D9%85%D8%B6%D9%85%D9%88%D9%86%D8%A9-%D9%84%D8%AA%D8%AD%D9%88%D9%8A%D9%84-%D8%A7%D9%84%D8%B9%D9%85%D9%84%D8%A7%D8%A1-%D8%A7%D9%84%D9%85%D8%AD%D8%AA%D9%85%D9%84%D9%8A%D9%86-%D8%A5%D9%84%D9%89-%D8%B9%D9%85%D9%84%D8%A7%D8%A1-%D8%B1%D8%A7%D8%A6%D8%B9%D9%8A%D9%86-r197/" rel="">العملاء المحتملين</a> طوعًا بسبب صعوبة الوصول يُعَد أمرًا سيئًا من الناحية التجارية.
	</li>
</ul>

<h2 id="-1">
	الأخطاء الأكثر شيوعا في أهم مليون صفحة رئيسية
</h2>

<p>
	بعد دراسة العوائق الرئيسية التي تواجه مواقع التجارة الإلكترونية التي أُبلِغ عنها من قِبَل المستخدمين الذين يواجهون بعض الصعوبات، بالإضافة إلى مجموعة كبيرة من المواقع (وهي الصفحات الرئيسية لأفضل مليون موقع) التي <a href="https://webaim.org/projects/million/update" rel="external nofollow">حُلِّلَت تلقائيًا بواسطة WebAIM</a> في أغسطس 2019، تبين أن 98٪ من تلك الصفحات المُحللة تحتوي على خطأ واحد على الأقل. ومن بين تلك الأخطاء الأكثر شيوعًا ما يلي:
</p>

<ol>
	<li>
		نص منخفض التباين (86.1٪).
	</li>
	<li>
		نص بديل مفقود للصور (67.9٪).
	</li>
	<li>
		روابط فارغة (58.9٪).
	</li>
	<li>
		تسميات إدخال النموذج مفقودة (53.2٪).
	</li>
	<li>
		لغة المستند المفقودة (30.5٪).
	</li>
</ol>

<p>
	سنتعرف فيما يلي على كيفية تجنب الأخطاء الشائعة الأخرى.
</p>

<h2 id="15">
	كيفية تحسين سهولة الوصول إلى موقع الويب - أفضل 15 ممارسة
</h2>

<p>
	توجد قائمة مرجعية تشمل أفضل 15 ممارسة لتحسين الوصول إلى مواقع الويب، وتهدف هذه الممارسات إلى التغلب على العقبات الرئيسية التي يواجهها الأشخاص ذوو الاحتياجات الخاصة، مع تقديم اقتراحات عملية لحل تلك المشكلات. لكن قبل كل شيء، يجب ملاحظة أن أيًا من أهم خمسة مشاكل تقنية تُعَد أخطاءً في التصميم أو في كتابة النصوص.
</p>

<h3 id="1">
	1. الكثير من المحتوى
</h3>

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

<ul>
	<li>
		<strong>استخدام عنوان رئيسي واحد فقط <code><a href="https://wiki.hsoub.com/HTML/h1-h6https://wiki.hsoub.com/HTML/h1-h6" rel="external">&lt;h1&gt;</a></code></strong> على الصفحة.
	</li>
	<li>
		<strong>استخدام العناوين الفرعية</strong> بحرية لكسر "الرتابة" في النَص وتسهيل قراءة المحتوى للمستخدمين المبصرين؛ بينما يمكن لمستخدمي التقنيات المساعدة مثل قارئات الشاشة استخدام مفاتيح مختصرة للانتقال بين العناوين، أو الحصول على خريطة ذهنية للمحتوى من خلال ترتيب العناوين.
	</li>
	<li>
		<strong>الحفاظ على تسلسل العناوين</strong> عند استخدام العناوين الفرعية، يجب التأكد من أنها تتبع تسلسل صحيح. على سبيل المثال، إذا كنت تستخدم العنوان الفرعي <code>&lt;h3&gt;</code>، فتأكد من أنه مسبوق بالعنوان الفرعي <code>&lt;h2&gt;</code>.
	</li>
	<li>
		<strong>استخدام القوائم ذات التعداد النقطي</strong> التي كُتبت شيفرتها بطريقة صحيحة في <a href="https://wiki.hsoub.com/HTML" rel="external">HTML</a> بهذا الشكل <code>&lt;ul&gt;</code> ،<code>&lt;li&gt;</code> لتوضيح قوائم المحتوى، فهذا يتيح لبرامج قراءة الشاشة إعلام المستخدمين بوجود "قائمة تحتوي على 10 عناصر" ويسمح لهم بالانتقال خلالها أو تخطيها بسهولة.
	</li>
</ul>

<h4 id="-2">
	استخدام اللغة البسيطة
</h4>

<p>
	يسلط دليل <a href="https://monzo.com/tone-of-voice/" rel="external nofollow">Our tone of voice</a> الذي أصدره بنك مونزو الضوء على أهمية استخدام اللغة الواضحة، يمكن تلخيصه فيما يلي:
</p>

<ul>
	<li>
		في عام 2010، أجرى المحامي الأمريكي شون فلامر تجربة حيث طلب من 800 قاضي محكمة أن يقفوا إلى جانب حجة قانونية تقليدية أو إلى جانب نسخة بلغة إنجليزية بسيطة.
	</li>
	<li>
		فَضَّل الحكام بالغالبية العظمى النسخة البسيطة من اللغة الإنجليزية بنسبة 66٪ مقابل 34٪، وكان هذا التفضيل ساريًا بغض النظر عن أعمارهم أو خلفياتهم.
	</li>
</ul>

<p>
	وفي <a href="https://www.michbar.org/file/barjournal/article/documents/pdf4article1900.pdf" rel="external nofollow">ملاحظات فلامر</a> عن النسخة البسيطة من اللغة الإنجليزية لوحِظ ما يلي:
</p>

<ul>
	<li>
		كانت النسخة البسيطة أقصر تقريبًا بصفحة واحدة، مما يوضح أنها تقلل من الجمل والكلمات غير الضرورية، وكان متوسط عدد الكلمات في الجملة يبلغ 17.8 كلمة، بينما كان المتوسط 25.2 كلمة في النسخة التقليدية.
	</li>
	<li>
		نتيجةً لذلك، إذا كنت ترغب في إرضاء القارئ، فاستخدم لغة إنجليزية بسيطة.
	</li>
</ul>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: قسّم النَص إلى أقسام تحتوي على عناوين وقوائم ذات تعداد نقطي، واستخدم لغة بسيطة.
	</p>
</blockquote>

<h3 id="2recaptcha">
	2. اختبار ReCAPTCHA
</h3>

<p>
	يُعَد اختبار ReCAPTCHA الذي تقدمه شركة Google حلًا مجانيًا لحماية مواقع الويب من البريد العشوائي، وتهدف هذه الخدمة إلى أن يكون حلًا سهلًا للبشر وصعبًا على الروبوتات والبرامج الضارة الأخرى. ومع ذلك، كان هناك العديد من المستخدمين يعانون من بعض المشاكل مع <a href="https://developers.google.cn/recaptcha/old/docs/customization?hl=ar" rel="external nofollow">إصدار ReCAPTCHA القديم</a>.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2024_07/001-old-recaptcha-version(Arabic).png.ff52a0504998206167169766f7f71f02.png" data-fileid="152746" data-fileext="png" rel=""><img class="ipsImage ipsImage_thumbnailed" data-fileid="152746" data-ratio="37.22" data-unique="oz832gmsq" width="900" alt="001 - old-recaptcha-version (Arabic).png" src="https://academy.hsoub.com/uploads/monthly_2024_07/001-old-recaptcha-version(Arabic).thumb.png.c593b489b735f6d5be85984fe68e3f96.png"></a>
</p>

<p style="text-align: center;">
	 
</p>

<p>
	لحسن الحظ، أصبح نمط الحروف المتذبذبة لـ reCAPTCHA مهملاً الآن.
</p>

<p>
	أما في الوقت الحالي، يُعَد النمط الأكثر شيوعًا هو "No CAPTCHA reCAPTCHA" والمعروف أيضًا باسم <a href="https://developers.google.com/recaptcha/docs/versions?hl=ar#recaptcha_v2_im_not_a_robot_checkbox" rel="external nofollow">مربع الاختيار "أنا لست روبوتًا"</a>، إذ يُطلب من المستخدمين تحديد مربع يؤكد أنهم ليسوا روبوتًا، فإذا نجحوا في تجاوزه فلن تكون هناك حاجة لأي تفاعل إضافي؛ أما إذا فشلوا في تجاوزه، فسوف يُعرض لهم تحدي جديد.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2024_07/002-recaptcha-select-images-(Arabic).png.8e7f69200ef39ec2923dfa0189538948.png" data-fileid="152749" data-fileext="png" rel=""><img class="ipsImage ipsImage_thumbnailed" data-fileid="152749" data-ratio="150.38" data-unique="8o4nskwe7" width="399" alt="002 - recaptcha-select-images - (Arabic).png" src="https://academy.hsoub.com/uploads/monthly_2024_07/002-recaptcha-select-images-(Arabic).thumb.png.383e7a9492141599df51a5d6dcdd373c.png"></a>
</p>

<p style="text-align: center;">
	 
</p>

<p>
	ومن إحدى أشكال reCAPTCHA المتاحة وقابلة للوصول، هي <a href="https://developers.google.com/recaptcha/docs/versions?hl=ar#recaptcha_v3" rel="external nofollow">reCAPTCHA v3</a>، والتي لا تتطلب أي تفاعل من المستخدم، ولكنها تتطلب جهودًا إضافية للتعامل مع الزيارات التي تفشل في الاختبار.
</p>

<p>
	يُعَد اختبار reCAPTCHA v3 واجهة برمجة تطبيقات مبنية بالكامل بلغة البرمجة JavaScript، إذ تُرجع نتيجةً تمكّنك من اتخاذ إجراءات في سياق موقعك، ومن بين تلك الإجراءات الممكنة: طلب عوامل مصادقة إضافية، أو إرسال إشعار للمشرف، أو تقييد أنشطة الروبوتات التي قد تنفذ عملية Scraping أو سحب للمحتوى؛ فباستخدام اختبار reCAPTCHA v3، يمكنك تعزيز مستوى الحماية وتعزيز التحقق من الهوية في موقعك دون أن تتسبب في إزعاج المستخدمين أو طلب إجراءات معقدة.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: لا تُجبر المستخدمين على تنفيذ أعمال معقدة أو صعبة من أجل توفير وقت المطور.
	</p>
</blockquote>

<h3 id="3">
	3. الافتقار للمقروئية
</h3>

<p>
	كي تتماشى الفقرات مع بعضها البعض، يجب اتباع بعض الممارسات لجعل النص سهل القراءة.
</p>

<ul>
	<li>
		يجب ضمان تباين كافٍ بين النص والخلفية، إذ يُعَد سوء التباين واحدًا من أكبر عوائق الوصول على الويب، لذلك تتطلب توجيهات منظمة W3C نسبة تباين لا تقل عن 4.5:1، باستثناء النصوص ذات الحجم الكبير والصور التي تحتوي على نصوص ذات حجم كبير، والتي يجب أن تكون لها نسبة تباين لا تقل عن 3:1 (باستثناء الشعارات والنصوص "المحضة")، ويتوفر العديد من الأدوات التي يمكن استخدامها لقياس نسب التباين، مثل <a href="https://ada.is/contrast-widget/" rel="external nofollow">أداة قياس التباين</a> التي طورتها Ada Rose Cannon.
	</li>
	<li>
		في حال كان المحتوى باللغة الإنجليزية، يجب عليك تجنب استخدام الأحرف الكبيرة لكتابة العناوين بالكامل، إذ هناك أدلة تشير إلى أنها أكثر صعوبةً في القراءة نظرًا لصعوبة تمييز شكل الأحرف والكلمات المشتركة عندما تكون الأحرف الكبيرة بنفس الارتفاع. بالإضافة إلى ذلك، قد يتهجى بعض قُراء الشاشة الأحرف الكبيرة كما لو كانت اختصارات، فإذا كنت بحاجة لاستخدام الأحرف الكبيرة في العناوين، يُفضل كتابتها بالأحرف الصغيرة في HTML ثم تحويلها إلى أحرف كبيرة باستخدام <a href="https://wiki.hsoub.com/CSS" rel="external">CSS</a> من خلال هذه الشيفرة <code>text-transform: uppercase</code>.
	</li>
	<li>
		يجب محاذاة النص إلى اليمين (أو اليسار في حالة اللغات الأجنبية) وتجنب عمل Justify أو تمليس للنص، مما يجعل القراءة أكثر صعوبةً بالنسبة للأشخاص ذوي الصعوبات في القراءة، مثل عسر القراءة، لذلك يوصي دليل <a href="https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide" rel="external nofollow">أسلوب الجمعية البريطانية لعسر القراءة</a> باستخدام خطوط بدون سواريف، مثل: Arial و Comic Sans، إذ تظهر الحروف بشكل أقل كثافة. مع ذلك يمكن الاستعانة بخطوط بديلة، مثل: Verdana و Tahoma و Century Gothic و Trebuchet و Calibri و Open Sans.
	</li>
</ul>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: تأكد من أن النَص لديه تباين كافٍ، وأنه قابل للقراءة، مع عدم تمليسه أو تسويته.
	</p>
</blockquote>

<h3 id="4">
	4. الصور والرسومات المُشتتة
</h3>

<p>
	يتطلب المستوى الأساسي لإرشادات الوصول إلى محتوى الويب WCAG لأي معلومات تتحرك أو تومض أو تمرر وتحتوي على ما يلي:
</p>

<ol>
	<li>
		تبدأ تلقائيًا.
	</li>
	<li>
		تستمر لأكثر من خمس ثوانٍ.
	</li>
	<li>
		تُعرض جنبًا إلى جنب مع محتوى آخر. في هذه الحالة يجب توفير آلية تتيح للمستخدم إيقافها مؤقتًا، أو إيقاف تشغيلها، أو إخفائها، ما لم يكن الحركة أو الوميض أو التمرير جزءًا من نشاط ضروري، فالتشتيت يُعد أمرًا مزعجًا، خاصةً بالنسبة للأشخاص الذين يعانون من اضطراب نقص الانتباه وفرط الحركة ADHD أو مشاكل التفكير الأخرى، ونظرًا لأن الحركة والوميض قد يسببان نوبات صرع، فحسب إرشادات الوصول إلى محتوى الويب WCAG، أن يجب ألا يومض المحتوى أكثر من ثلاث مرات خلال فترة زمنية تدوم لمدة ثانية واحدة.
	</li>
</ol>

<h4 id="-3">
	احترام اختيار المستخدم بشأن الرسوم المتحركة
</h4>

<p>
	يُعَد توفر جميع أنظمة التشغيل الرئيسية خيارًا للمستخدمين للتعبير عن تفضيلهم لتقليل الحركة على الشاشة، وذلك بسبب اضطراب طيف الجهاز الدماغي البليغ الذي يمكن أن ينتج عن الحركة، ويمكن لموقع الويب الخاص بك اكتشاف ما إذا فَعَّل المستخدم هذا الاختيار باستخدام <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" rel="external nofollow">استعلام تقليل الحركة</a> في CSS باستخدام هذه الشيفرة <code>prefers-reduced-motion</code>. وفي هذا السياق، نسمح فقط بتحريك الزر إذا لم يعبر المستخدم عن أي تفضيل بشأن الحركة:
</p>

<pre class="ipsCode prettyprint lang-css prettyprinted" id="ips_uid_6056_14" style=""><span class="kwd">@media</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">prefers-reduced-motion</span><span class="pun">:</span><span class="pln"> no-preference</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  button </span><span class="pun">{</span><span class="pln">
    </span><span class="com">/* `vibrate` keyframes are defined elsewhere */</span><span class="pln">
    </span><span class="kwd">animation</span><span class="pun">:</span><span class="pln"> vibrate </span><span class="lit">0.3s</span><span class="pln"> linear infinite both</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></pre>

<p>
	وفي حال كنت تبحث عن تعديل موقع يحتوي على العديد من قواعد الرسوم المتحركة، فقد يؤدي ما يلي إلى <a href="https://web.dev/prefers-reduced-motion/#bonus_forcing_reduced_motion_on_all_websites" rel="external nofollow">إيقاف جميع رسوم CSS المتحركة المعلنة مسبقًا</a>:
</p>

<pre class="ipsCode prettyprint lang-css prettyprinted" id="ips_uid_6056_16" style=""><span class="kwd">@media</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">prefers-reduced-motion</span><span class="pun">:</span><span class="pln"> reduce</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">*,</span><span class="pln">
</span><span class="pun">*::</span><span class="pln">before</span><span class="pun">,</span><span class="pln">
</span><span class="pun">*::</span><span class="pln">after </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">animation-duration</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.001s</span><span class="pln"> </span><span class="kwd">!important</span><span class="pun">;</span><span class="pln">
  </span><span class="kwd">transition-duration</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.001s</span><span class="pln"> </span><span class="kwd">!important</span><span class="pun">;</span><span class="pln">
  </span><span class="kwd">scroll-behavior</span><span class="pun">:</span><span class="pln"> auto </span><span class="kwd">!important</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></pre>

<p>
	كما يسمح لنا عنصر HTML للصورة picture element بعرض صورة ثابتة بدلًا من صورة متحركة GIF للمستخدمين الذين يعبرون عن تفضيل تقليل الحركة.
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_6056_18" style=""><span class="tag">&lt;picture&gt;</span><span class="pln">
  </span><span class="tag">&lt;source</span><span class="pln"> </span><span class="atn">srcset</span><span class="pun">=</span><span class="atv">"no-motion.jpg"</span><span class="pln"> </span><span class="atn">media</span><span class="pun">=</span><span class="atv">"(prefers-reduced-motion: reduce)"</span><span class="tag">&gt;</span><span class="pln"> 
  </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">srcset</span><span class="pun">=</span><span class="atv">"animated.gif"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"brick wall"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/picture&gt;</span></pre>

<p>
	أيضًا، فيما يتعلق بموضوع احترام تفضيلات نظام التشغيل للمستخدم، قد ترغب في التفكير في <a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode" rel="external nofollow">تصميم موقع الويب الخاص بك للوضع المظلم</a>.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: اسمح للمستخدمين بإيقاف أي حركة، واحترم إعدادات نظام التشغيل الخاصة بهم، ولا تُشغل الفيديو تلقائيًا.
	</p>
</blockquote>

<h3 id="5">
	5. معلومات غير كافية حول الروابط
</h3>

<p>
	غالبًا ما يكون أحد أسباب ضعف المعلومات المتعلقة بالروابط ناتجًا عن سوء كتابة النص، فمعظم قارئات الشاشة تسمح للمستخدم بعرض قائمة سريعة للروابط الموجودة في الصفحة، إذ يمكن استخدام اختصار لوحة المفاتيح Ins + F7 لعرض قائمة سريعة للروابط في قارئات الشاشة التجارية الشهيرة JAWS، أما في <a href="https://www.nvaccess.org/download/" rel="external nofollow">قارئ الشاشة NVDA المجاني</a> فيمكن عرض قائمة الروابط والعناوين والعلامات بنفس اختصار لوحة المفاتيح.
</p>

<p>
	ومع ذلك، إذا كان كل رابط يحتوي على نص يقول "انقر هنا" أو "اقرأ المزيد"، دون وجود أي عنصر آخر يمكن تمييز الرابط به، فإن هذا لا يوفر الفائدة المطلوبة. وأحد الطرائق السهلة لحل هذه المشكلة هو ببساطة كتابة نصوص فريدة للروابط؛ وإذا لم يكن ذلك ممكنًا، فيمكن استخدام السمة <code>aria-label</code> الفريدة على كل رابط لتجاوز النص المرئي للتقنيات المساعدة.
</p>

<p>
	وإليك مثال جيد من <a href="https://community.joomla.org/" rel="external nofollow">موقع جوملا</a> يوضح ذلك.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="152747" href="https://academy.hsoub.com/uploads/monthly_2024_07/003-joomla-read-more-example.png.afa0a88d78c876c015b360d50d246d7a.png" rel=""><img alt="003   joomla read more example" class="ipsImage ipsImage_thumbnailed" data-fileid="152747" data-ratio="58.86" data-unique="xloscqmt8" style="width: 700px; height: auto;" width="700" src="https://academy.hsoub.com/uploads/monthly_2024_07/003-joomla-read-more-example.thumb.png.07aa11ef57e09f0815aeb73178778bab.png"> </a>
</p>

<p>
	ففي المثال السابق سوف تلاحظ أن نص الرابط المرئي ببساطة هو "اقرأ المزيد"، ولكن Joomla تستخدم السمة <code>aria-label</code> لجعل كل رابط فريدًا بالنسبة للتقنيات المساعدة.
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_6056_21" style=""><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"joomla-group-2-president-election-results.html"</span><span class="pln"> 
  </span><span class="atn">aria-label</span><span class="pun">=</span><span class="atv">"Read more: Joomla Group 2 - President election results"</span><span class="tag">&gt;</span><span class="pln">Read more</span><span class="tag">&lt;/a&gt;</span><span class="pln">

</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"forum-for-the-future-re-engage-re-ignite-stream.html"</span><span class="pln">
  </span><span class="atn">aria-label</span><span class="pun">=</span><span class="atv">"Read more: Forum for the Future: Re-Engage &amp;amp; Re-Ignite Stream"</span><span class="tag">&gt;</span><span class="pln">Read more</span><span class="tag">&lt;/a&gt;</span></pre>

<p>
	ونظرًا لأن النص الموجود في السمة <code>aria-label</code> سوف يُستخدم عوض نص الرابط بواسطة التقنيات المساعدة، توصي W3C ببدء النص المستخدم في السمة <code>aria-label</code> بالنص المستخدم داخل الرابط، حيث "سيتيح ذلك بالتواصل المتسق بين المستخدمين".
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>تنويه</strong>: لا يوصى بإضافة نص توضيحي إلى الروابط باستخدام السمة <code>title</code>.
	</p>
</blockquote>

<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_6056_24" style=""><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"results.html"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"click here to read more about the election results"</span><span class="tag">&gt;</span><span class="pln">Read more&gt;</span><span class="tag">&lt;/a&gt;</span></pre>

<p>
	<strong>ويرجع السبب في عدم فعل ذلك</strong>، إلى أن <a href="https://www.tpgi.com/using-the-html-title-attribute/" rel="external nofollow">معظم برامج قراءة الشاشة لا تعرض محتوى السمة <code>title</code></a> لاعتياد المطورون على حشوها بكلمات رئيسية لأغراض "تحسين محركات البحث"، لذلك يعطلها بائعو برامج قراءة الشاشة افتراضيًا، كما تقدم المتصفحات محتوى السمة <code>title</code> على أنها "تلميحات" تكون متاحة فقط لمستخدمي الفأرة عند عمل تحويم hover عليها بالفأرة.
</p>

<h4 id="-4">
	ينبغي أن تُعرَض الروابط على هيئة روابط
</h4>

<p>
	افتراضيًا، تُسَطَّر الروابط في المتصفحات، لذلك من الأفضل عدم تغيير هذا الوضع، لكن إذا كان هناك خلاف مع المصمم حول هذه المسألة، فيجب توفير نسبة تباين بنسبة 3:1 بين نص الرابط والنص المحيط به الذي ليس رابطًا، كما يجب أن يوفر الرابط بعض المؤشرات غير اللونية التي تشير إلى أنه رابط، مثل: تغير الشكل عند تحويم مؤشر الفأرة فوقه أو التركيز عليه. على سبيل المثال:
</p>

<pre class="ipsCode prettyprint lang-css prettyprinted" id="ips_uid_6056_26" style=""><span class="kwd">a</span><span class="pun">:</span><span class="pln">hover</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">a</span><span class="pun">:</span><span class="pln">focus </span><span class="pun">{</span><span class="kwd">text-decoration</span><span class="pun">:</span><span class="pln"> underline</span><span class="pun">;}</span></pre>

<p>
	فعندما يركز المستخدم على الرابط باستخدام وسائل أخرى غير الفأرة، مثل: لوحة المفاتيح أو القلم الضوئي أو الإدخال الصوتي، فسيُطبق نمط التركيز Focus Style لجعل الرابط يظهر بخط تحتي أو مُسَطَّر، وبوجهٍ عام ينبغي تطبيق تأثير التحويم Hover Style في أي مكان على الصفحة. كما يجب أيضًا تطبيق تأثير التركيز Focus Style.
</p>

<p>
	فمن خلال "التصميم غير اللوني" الذي في حالتنا هو الخط التحتي أو التسطير، نضمن أن الزوار ذوي الرؤية المحدودة أو صعوبة في التمييز بين الألوان يمكنهم ملاحظة التغيير عند التحويم أو التركيز على التص. علاوةً على ذلك، فإن قارئات الشاشة تعلن تلقائيًا عن "الرابط" قبل الوصول إلى نص الرابط.
</p>

<h4 id="-5">
	أخبر الزوار إذا كان الرابط يفتح في علامة تبويب/ صفحة جديدة
</h4>

<p>
	يمكن أن يسبب فتح رابط في علامة تبويب أو نافذة جديدة للزائر بعض الارتباك، خاصةً إذا كان هذا النمط مقتصرًا على بعض الروابط فقط في الصفحة مثل: فتح الروابط الخارجية في علامة تبويب جديدة، وفي حالة وجود هذا النمط بموقعك الإلكتروني، يجب أن تنبه المستخدم إما من خلال نَص الرابط نفسه أو باستخدام السمة aria-label كما بالمثال التالي:
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_6056_28" style=""><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"عنوان الرابط"</span><span class="pln"> </span><span class="atn">aria-label</span><span class="pun">=</span><span class="atv">"فتح الرابط في علامة تبويب جديدة"</span><span class="pln"> </span><span class="atn">target</span><span class="pun">=</span><span class="atv">"_blank"</span><span class="tag">&gt;</span><span class="pln">النص الخاص بالرابط</span><span class="tag">&lt;/a&gt;</span></pre>

<h4 id="-6">
	أخبر الزوار إذا كان الرابط يؤدي إلى ملف
</h4>

<p>
	إذا كان الرابط يؤدي إلى ملف (مثل ملف PDF أو فيديو)، فمن الضروري إبلاغ الزوار بذلك عن طريق وضع تنبيه في نَص الرابط نفسه من خلال السمة <code>aria-label</code>؛ فعدم إخفاء هذه المعلومة قد يكون مفيدًا أيضًا للعديد من المستخدمين القادرين على الرؤية. على سبيل المثال، بعض الهواتف المحمولة قد لا تدعم فتح ملف بصيغة "docx."، وفي حالة إذا كان الملف كبيرًا، فمن الجيد أن تفكّر في إبلاغ المستخدم بالحجم التقريبي له، فقد يُفضل بعض المستخدمين عدم تنزيل ملف فيديو ضخم عبر شبكة الجيل الثالث (3G).
</p>

<p>
	ولتنفيذ ذلك يمكنك استخدام السمة <code>download</code>، والتي تتسبب في فتح مربع حوار <a href="https://academy.hsoub.com/apps/operating-systems/%D9%86%D8%B8%D8%A7%D9%85-%D8%A7%D9%84%D8%AA%D8%B4%D8%BA%D9%8A%D9%84/" rel="">نظام التشغيل</a> لتنزيل الملف في المتصفح، وبوضع كل ذلك معًا، ستبدو الشيفرة البرمجية كما يلي:
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_6056_30" style=""><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"big-report.pdf"</span><span class="pln"> </span><span class="atn">download</span><span class="tag">&gt;</span><span class="pln">Annual report (PDF, 240 MB)</span><span class="tag">&lt;/a&gt;</span></pre>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: اجعل الروابط في الموقع قابلة للتعرف عليها عن طريق وجود نصوص فريدة للروابط، كما ينبغي توفير تحذير للمستخدمين إذا كانت الروابط ستَفتح علامة تبويب جديدة أو ملفًا.
	</p>
</blockquote>

<h3 id="6">
	6. خطأ آخر في التصميم: إزالة حلقة التركيز
</h3>

<p>
	لقد ذكرنا سابقًا أن سمة التركيز <code>focus:</code> هي مؤشر بصري لا يقدر بثمن لأولئك الذين لا يستطيعون استخدام الفأرة لأي سبب من الأسباب، مثل الذين يعانون من متلازمة تكرار إجهاد اليد (RSI) أو مرض باركنسون أو التصلب المتعدد، ومع ذلك يرى بعض الأشخاص أن استخدام الفأرة وظهور حلقة التركيز أمرًا غير جمالي ثم يوقفونه باستخدام CSS، مما يؤدي إلى عدم قدرة المستخدمين الذين يعتمدون على لوحة المفاتيح على الوصول إلى الموقع.
</p>

<p>
	ولحل هذه المشكلة، قُدِّمَت سمة جديدة تُسمى <code>focus-visible:</code> التي قَدَّم متصفح فايرفوكس الدعم الأول لها. تُضيف هذه السمة تأثير تركيز على العنصر عند الوصول إليه باستخدام لوحة المفاتيح أو جهاز تأشير غير الفأرة، بينما لا يظهر أي شيء للمستخدمين الذين يستخدمون الفأرة للتأشير. ونظرًا لاحتمالية عدم دعم المتصفح الذي تستخدمه لتلك السمة، يقترح علينا <a href="https://www.tpgi.com/focus-visible-and-backwards-compatibility/" rel="external nofollow">باتريك لاوكي</a> استخدام شيفرة CSS التالية للتعامل بشكل جيد مع جميع المتصفحات:
</p>

<pre class="ipsCode prettyprint lang-css prettyprinted" id="ips_uid_6056_33" style=""><span class="kwd">button</span><span class="pun">:</span><span class="pln">focus </span><span class="pun">{</span><span class="pln"> </span><span class="com">/* some exciting button focus styles */</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="kwd">button</span><span class="pun">:</span><span class="kwd">focus</span><span class="pun">:</span><span class="pln">not</span><span class="pun">(:</span><span class="pln">focus-visible</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="com">/* undo all the above focused button styles
  if the button has focus but the browser wouldn't normally
  show default focus styles */</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="kwd">button</span><span class="pun">:</span><span class="pln">focus-visible </span><span class="pun">{</span><span class="pln"> </span><span class="com">/* some even *more* exciting button focus styles */</span><span class="pln"> </span><span class="pun">}</span></pre>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: تأكد من أن المستخدمين الذين يستخدمون لوحة المفاتيح يمكنهم دائمًا رؤية المكان المُرَكَّز عليه حاليًا.
	</p>
</blockquote>

<h3 id="7">
	7. ملء النموذج
</h3>

<p>
	نظرًا للأهمية الحيوية للنماذج في مواقع التجارة الإلكترونية، فمن المدهش وجود عدد كبير من النماذج غير المتاحة للوصول إليها، وغالبًا ما يحدث ذلك بسبب عدم تنسيق عناصر النموذج بطريقة صحيحة في المتصفحات القديمة، لذلك شَرَعَ المطورون بإنشاء عناصر نموذج مزيفة باستخدام سمات HTML أخرى، لكن في المقابل تتيح المتصفحات الحديثة إمكانية إنشاء نماذج تحتوي على <a href="https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/" rel="external nofollow">مربعات اختيار جذابة، وأزرار اختيار متعددة</a>، <a href="https://www.24a11y.com/2019/select-your-poison/" rel="external nofollow">ومكونات تحديد مخصصة، ومربعات تحرير وسرد</a>، <a href="https://adamsilver.io/blog/building-an-accessible-autocomplete-control/" rel="external nofollow">وعناصر تحكم الإكمال التلقائي التي يمكن الوصول إليها</a>، وغيرها الكثير.
</p>

<h4 id="-7">
	الملء التلقائي هو صديقك
</h4>

<p>
	تتيح إمكانية تعبئة النماذج تلقائيًا Autofill في المتصفحات للزوار بتنفيذ مهام أقل، مما يزيد من احتمالية استكمال النموذج وإتمام عملية التسجيل أو الشراء <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">لمنتجك</a>، وبهذا الصدد توجد مقالة رائعة بعنوان <a href="https://tech.ebayinc.com/engineering/autofill-deep-dive/" rel="external nofollow">"Autofill on Browsers: A Deep Dive"</a> مُقدَّمة من eBay تتحدث بأسلوب مفصل عن هذا الموضوع (ويجب التنويه عنها ليتعرف عليها الجميع).
</p>

<p>
	علاوةً على ذلك، تُعد التكملة التلقائية Autocomplete الطريقة الأمثل المعتمدة حاليًا لتحقيق امتثال AA <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H98" rel="external nofollow">لمعيار النجاح 1.3.5: تحديد غرض المدخلات</a>.
</p>

<h4 id="-8">
	جعل حقول النماذج تبدو كحقول النماذج
</h4>

<p>
	افتراضيًا، تظهر حقول إدخال النماذج على شكل مربعات في المتصفحات، ويمكن تنسيقها باستخدام الهوامش والحواف والجوانب، ولكن يُفضل الاحتفاظ بها كمربعات، ففي الماضي اتبع العديد من المصممين نمط تصميم Material Design السابق لشركة جوجل قبل عام 2017، وهو تصميم يستخدم خطًا واحدًا لإدخال النص من قِبَل المستخدم.
</p>

<p style="text-align: center;">
	<img alt="004 - material-design-old - (Arabic).png" class="ipsImage ipsImage_thumbnailed" data-fileid="152752" data-ratio="33.33" data-unique="lodczbgaf" style="width: 600px; height: auto;" width="750" src="https://academy.hsoub.com/uploads/monthly_2024_07/004-material-design-old-(Arabic).png.c969ddf5d7bcc1ccac8c09db9b1c4daa.png">
</p>

<p>
	ومع ذلك، اكتشفت جوجل أن الخط الموجود أسفل حقول النص القديمة ليس واضحًا بما فيه الكفاية لبعض المستخدمين، وأنه يسبب الالتباس مع عنصر التقسيم Divider، وبناءً على ذلك غَيَّرت جوجل التصميم.
</p>

<p>
	وفي <a href="https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03" rel="external nofollow">اختبارات استخدامية</a> مع مشاركة 600 شخص، اتضح أن الحقول المحاطة بشكل مربع أداءها أفضل من تلك التي تحتوي على خط؛ فإذا كنت تفكر في استخدام مكتبة <a href="https://academy.hsoub.com/design/user-interface/%D8%A3%D9%81%D8%B6%D9%84-%D8%A7%D9%84%D9%86%D8%B5%D8%A7%D8%A6%D8%AD-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r818/" rel="">تصميم واجهة المستخدم</a> الكاملة لـ Material Design المقدمة من جوجل، فينصح بقراءة المقالة <a href="https://www.matsuko.ca/blog/stop-using-material-design-text-fields/" rel="external nofollow">"Stop using Material Design text fields!"</a> لمعرفة ما إذا كانت تلبي احتياجاتك.
</p>

<h4 id="-9">
	ضع تسمية على جميع حقول النموذج
</h4>

<p>
	يجب وضع تسمية على جميع حقول النموذج، بما في ذلك:
</p>

<ul>
	<li>
		إدخالات النص
	</li>
	<li>
		مربعات الاختيار
	</li>
	<li>
		أزرار الاختيار
	</li>
	<li>
		أشرطة التمرير
	</li>
	<li>
		وما إلى ذلك
	</li>
</ul>

<p>
	وأفضل طريقة لفعل ذلك هي استخدام العنصر <code><a href="https://wiki.hsoub.com/HTML/label" rel="external">&lt;label&gt;</a></code> بلغة HTML.
</p>

<p>
	وفيما يلي عرض توضيحي <a href="https://jsbin.com/wigusodevu/edit?html,output" rel="external nofollow">لحقل نموذج غير موسوم وحقل نموذج موسوم</a>، فالحقلان يبدوان متطابقين ولكن الحقل الأول ليس لديه تسمية في حين أن الحقل الثاني يحمل تسمية. انقر الآن على تسمية النص للحقل الثاني وستلاحظ أن التركيز يتحول إلى الحقل ذي الصلة أو المرتبط به.
</p>

<p style="text-align: center;">
	<img class="ipsImage ipsImage_thumbnailed" data-fileid="152745" data-ratio="14.83" data-unique="ua1tpmyoy" style="width: 600px; height: auto;" width="673" alt="005 - fake-vs-real-label-comparison - (Arabic).png" src="https://academy.hsoub.com/uploads/monthly_2024_07/005-fake-vs-real-label-comparison-(Arabic).png.cecb11fa8d81fcf11e0b8447420342c6.png">
</p>

<p style="text-align: center;">
	 
</p>

<p>
	يسهل هذا التركيز على إدخال البيانات بالنسبة لأولئك الذين يعانون من صعوبات في التحكم الحركي، ويكون مفيدًا أيضًا عندما تحاول التحقق من خانة اختيار صغيرة على شاشة صغيرة وأنت في قطار هزاز. إضافةً إلى ذلك، فإن هذا أمر بالغ الأهمية لمستخدمي قارئ الشاشة الذين يتنقلون بين حقول النموذج (افتراضيًا، فقط الروابط وحقول النموذج يمكن تركيزها باستخدام المفتاح Tab)، فعند الانتقال إلى حقل الإدخال سيعلن قارئ الشاشة محتوى التسمية المرتبطة به. والشيفرة البرمجية لتحقيق ذلك بسيطة، فقط نحتاج إلى تعيين معرف فريد لكل حقل إدخال، ثم ربط التسمية به باستخدام السمة <code>for</code>.
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_6056_41" style=""><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"colour"</span><span class="tag">&gt;</span><span class="pln">What's your favourite colour?</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"colour"</span><span class="tag">&gt;</span></pre>

<h4 id="-10">
	إخفاء التسميات
</h4>

<p>
	قد يحدث أحيانًا أن لا ترغب في وجود تسمية مرئية، أو قد لا يرغب المصمم في ذلك وأنت لا ترغب في وجود خلاف معه حول هذه المسألة. على أي حال، إليك مثالًا عندما تبدو التسمية التي تقول "بحث" قبل الإدخال وكأنها مبالغة.
</p>

<p style="text-align: center;">
	<img alt="006 - search - (Arabic).png" class="ipsImage ipsImage_thumbnailed" data-fileid="152754" data-ratio="33.33" data-unique="yjrpogdd8" style="width: 300px; height: auto;" width="750" src="https://academy.hsoub.com/uploads/monthly_2024_07/006-search-(Arabic).png.2bff143ff9e94df091dad76899847ccc.png">
</p>

<p>
	ويمكننا ربط حقل الإدخال بنص "بحث" وهو محتوى زر الإرسال، وذلك باستخدام السمة <code>:aria-labelledby</code>.
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_6056_44" style=""><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">aria-labelledby</span><span class="pun">=</span><span class="atv">"searchbutton"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"searchbutton"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="tag">&gt;</span><span class="pln">Search</span><span class="tag">&lt;/button&gt;</span></pre>

<p>
	وكان بالإمكان استخدام السمة <code>aria-label</code> التي تعرفنا عليها سابقًا عند الحديث عن الروابط:
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_6056_46" style=""><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">aria-label</span><span class="pun">=</span><span class="atv">"Search"</span><span class="tag">&gt;</span></pre>

<p>
	ومع ذلك، يُفضل دائمًا استخدام النص المرئي على الصفحة عن استخدام النص المخفي، فالنَص المرئي يمكن ترجمته عبر أدوات الترجمة، بينما النص "المخفي" في سمات HTML لن يُترجم، وتلك النصيحة أشار إليها أدريان روزيلي في مقاله <a href="https://adrianroselli.com/2020/01/my-priority-of-methods-for-labeling-a-control.html" rel="external nofollow">My Priority of Methods for Labeling a Control</a>.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: صمم حقول النموذج بحيث تبدو كحقول نموذج، واربط كل منها بتسمية، ولا تعطل ميزة التعبئة التلقائية.
	</p>
</blockquote>

<h3 id="8">
	8. توفير بدائل نصية لجميع الصور والفيديوهات والصوتيات
</h3>

<p>
	يجب توفير بدائل نصية لجميع الصور والفيديوهات والصوتيات على مواقع الويب، ويتضمن ذلك إضافة "نص بديل" في عناصر <a href="https://wiki.hsoub.com/HTML/img" rel="external">الصورة &lt;img&gt;</a> يمكن أن يكون مفهومًا للأشخاص ذوي المشاكل البصرية أو لأولئك الذين يواجهون صعوبات في عرض الصور أو لديهم قيود في استهلاك البيانات، ما جعلهم يوقفون تحميل الصور في المتصفحات الخاصة بهم؛ كما يجب أن يشمل ذلك الصور التي تحتوي على نص. وإليك بعض القواعد الأساسية:
</p>

<ul>
	<li>
		إذا كانت الصورة الغرض منها مجرد الزخرفة، يجب أن يكون النص البديل فارغًا:<code>""=alt</code> (ولكن من الأفضل أن تستخدم الصور الزخرفية في CSS بدلًا من ذلك).
	</li>
	<li>
		إذا وُصِفَت الصورة في نَص الصفحة، فيجب أن يكون النص البديل فارغًا (<code>""=alt</code>) لتجنب التكرار، ولكن توخ الحذر إذا كانت الصورة <code>&lt;img&gt;</code> داخل <code>&lt;figure&gt;</code>، وهنا يرجى الاطلاع على المقالة <a href="https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html" rel="external nofollow">?How do you figure</a> لمزيد من التفاصيل.
	</li>
	<li>
		إذا كانت الصورة تمثل الرابط بذاته (مثال: شعار المؤسسة الذي يمكن النقر عليه للعودة إلى الصفحة الرئيسية)، فيجب أن يوضح النص البديل وجهة الرابط، مثال: <code>"alt="home page"</code>.
	</li>
	<li>
		<a href="https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/" rel="external nofollow">لا تستخدم خطوط الرموز الأيقونية</a> فقد تكون صعبةً جدًا للأشخاص ذوي صعوبات في القراءة، فإذا ما قررت استخدامها، يُفضل <a href="https://www.myareapage.com/convert-font-icons-to-svg/" rel="external nofollow">تحويلها إلى تنسيق SVG</a>.
	</li>
</ul>

<h4 id="-11">
	نص بديل للفيديو والصوت
</h4>

<p>
	يجب أن لا ننس أهمية توفير نصوص بديلة للمحتوى الصوتي حتى يتمكن الأشخاص ذوو المشاكل السمعية من الاستفادة منه، وهذا يشمل توفير نصوص للبودكاست وترجمة الشرائط النصية للفيديوهات، وإذا كان الأمر مناسبًا للوسائط الخاصة بك، فيجب توفير <a href="https://www.rnib.org.uk/living-with-sight-loss/assistive-aids-and-technology/everyday-tech/tv-audio-and-gaming/audio-description-ad/" rel="external nofollow">الوصف الصوتي</a> لها، وهو عبارة عن رواية توفر المعلومات المحيطة بالعناصر البصرية الرئيسية في الوسائط.
</p>

<p>
	ومرةً أخرى، يجب تجنب تشغيل الوسائط تلقائيًا، حيث يتعذر على الأشخاص ذوي الاحتياجات الخاصة بالاستفادة منها بشكل كافٍ.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: وفر نصًا بديلًا لأي معلومات تُنقل عن طريق الصور أو الفيديوهات أو الصوتيات.
	</p>
</blockquote>

<h3 id="9">
	9. أضف لغة الصفحة الصحيحة
</h3>

<p>
	تُعاني حوالي 30% من صفحات البداية من عدم إعلان اللغة التي استُخدمت في كتابة المحتوى الخاص بها، مما يمكن أن يسبب الارتباك لمستخدمي قارئ الشاشة، ويُعد هذا أمرًا هامًا، فكلمة "six" مثلًا تُنطق بشكل مختلف بناءً على اللغة المستخدمة. لكن من السهل حل هذه المشكلة عن طريق إضافة السمة <code>lang</code> إلى عنصر HTML الخاص بك كما يلي:
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_6056_49" style=""><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span></pre>

<p>
	القيمة "ar" تُخبر قارئ الشاشة أو برنامج الترجمة أن هذه الصفحة باللغة العربية، بينما "en" تعني الإنجليزية و"es" تعني الإسبانية، وهكذا. وبالنسبة لمعظم اللغات، يُعَد تحديد اللغة سهل التنفيذ، ويتوفر لدى W3C دليل <a href="https://www.w3.org/International/questions/qa-choosing-language-tags" rel="external nofollow">لاختيار علامة اللغة المناسبة</a>.
</p>

<p>
	وفي حال كانت الصفحة تحتوي على محتوى بلغة أخرى غير اللغة الرئيسية المُعلنة، يمكنك إضافة سمة اللغة إلى العنصر الذي يحتوي على ذلك المحتوى، فعلى سبيل المثال: في صفحة وُسِمَت بأن تكون باللغة الإنجليزية:
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_6056_52" style=""><span class="pln">If you'd like to chat a </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"es"</span><span class="tag">&gt;</span><span class="pln">matador</span><span class="tag">&lt;/span&gt;</span><span class="pln">, in some cool </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"es"</span><span class="tag">&gt;</span><span class="pln">cabana</span><span class="tag">&lt;/span&gt;</span><span class="pln">
And meet </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"es"</span><span class="tag">&gt;</span><span class="pln">senoritas</span><span class="tag">&lt;/span&gt;</span><span class="pln"> by the score, </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"es"</span><span class="tag">&gt;</span><span class="pln">Espana por favor</span><span class="tag">&lt;/span&gt;</span></pre>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: دع التقنيات المساعدة تعرف اللغة التي يوجد بها المحتوى الخاص بك.
	</p>
</blockquote>

<h3 id="10">
	10. ساعد الزائر على التنقل في محتواك
</h3>

<p>
	عندما يأتي الزائر المبصر إلى صفحتك يمكنه مسحها بصريًا بسهولة لفهم أين توجد أماكن التنقل وأين يبدأ المحتوى الرئيسي، لكن لا يمكن للمستخدمين الذين يعتمدون على قارئ الشاشة أن يفعلوا ذلك. مع ذلك، لحسن الحظ تتيح لنا تقنيات HTML5 بعض العلامات الجديدة التي تساعدنا على تمييز هذه المناطق، بالإضافة إلى توفير اختصارات للانتقال إليها أو تجاوزها، ولتنفيذ ذلك يُنصح باتباع الإرشادات التالية:
</p>

<ul>
	<li>
		<strong>غَلِّف المحتوى الرئيسي</strong>، أي المحتوى الذي ليس رأس الصفحة أو التنقل الأساسي أو التذييل في <a href="https://wiki.hsoub.com/HTML/main" rel="external">العنصر &lt;main&gt;</a>، ففي معظم الحالات يجب أن يكون هناك عنصر <code>&lt;main&gt;</code> واحد فقط في كل صفحة، وتسمح لك جميع المتصفحات (+IE9) بتنسيقه؛ كما تعرف التقنيات المساعدة كيفية التعامل معه.
	</li>
	<li>
		<strong>غَلِّف الرأس</strong>، ضع شعار <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%A7%D9%84%D8%B9%D9%84%D8%A7%D9%85%D8%A9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A%D8%A9-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-%D9%81%D9%8A-%D9%82%D8%B1%D8%A7%D8%B1-%D8%A7%D9%84%D8%B4%D8%B1%D8%A7%D8%A1-%D9%85%D9%83%D9%88%D9%86%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%84%D8%A7%D9%85%D8%A9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A%D8%A9-r486/" rel="">العلامة التجارية</a>، وشريط العناوين، وعنوان الصفحة داخل <a href="https://wiki.hsoub.com/HTML/header" rel="external">العنصر &lt;header&gt;</a>.
	</li>
	<li>
		<strong>غَلِّف الذيل</strong>، ضع المعلومات القانونية، وبيانات الاتصال، وإشعار حقوق التأليف والنشر، وما إلى ذلك داخل العنصر <code><a href="https://wiki.hsoub.com/HTML/footer" rel="external">&lt;footer&gt;</a></code>.
	</li>
	<li>
		<strong>مَيِّز الملاحة الأساسية</strong> باستخدام العنصر <code>&lt;ul&gt;</code> مغلفًا داخل <a href="https://wiki.hsoub.com/HTML/nav" rel="external">العنصر &lt;nav&gt;</a>، ويمكنك تضمين هذا العنصر داخل العنصر <code>&lt;header&gt;</code> إذا كان ذلك مناسبًا لتصميم صفحتك.
	</li>
	<li>
		<strong>غَلِّف الإعلانات والمحتوى غير الأساسي</strong> داخل <a href="https://wiki.hsoub.com/HTML/aside" rel="external">العنصر &lt;aside&gt;</a>.
	</li>
	<li>
		إذا كانت لديك عدة منتجات أو فيديوهات أو أخبار أو مقالات في الصفحة، فغَلِّف كل واحدة منها داخل <a href="https://wiki.hsoub.com/HTML/article" rel="external">العنصر &lt;article&gt;</a>.
	</li>
</ul>

<p>
	في <a href="https://webaim.org/projects/screenreadersurvey8/#landmarks" rel="external nofollow">استطلاع لمستخدمي قارئ الشاشة</a> أجْرَته WebAIM، وُجد أن 26% منهم يستخدمون هذه المناطق باستمرار أثناء تصفح الصفحة.
</p>

<p>
	وبالإضافة إلى ذلك، يساعد تغليف الأجزاء المميزة من المحتوى داخل العنصر <code>&lt;article&gt;</code> على عرض المحتوى بطريقة مثالية على نظام التشغيل WatchOS الخاص بشركة Apple.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: استخدم العناصر التوضيحية في HTML لمساعدة مستخدمي التقنيات المساعدة في فهم وتصفح محتواك.
	</p>
</blockquote>

<h3 id="11html">
	11. استخدام HTML بطريقة صحيحة
</h3>

<p>
	هناك نهج اتبعناه في هذه المقالة وهو استخدام عناصر HTML الصحيحة، فعلى سبيل المثال: يحتوي العنصر <code>label</code> على سلوك متصفح مضمن يركز على حقل الإدخال المرتبط به، كما يُفضل استخدام العنصر <code>&lt;main&gt;</code> على العنصر <code>&lt;div class =" main"&gt;</code> لأنه يسمح لمستخدمي قارئ الشاشة بالانتقال مباشرة إلى المحتوى المهم، مع كونه غير مزعج تمامًا لأولئك الذين لا يستخدمون قارئ الشاشة.
</p>

<p>
	وإليك مثال آخر عن استخدام <a href="https://wiki.hsoub.com/HTML/button" rel="external">العنصر &lt;button&gt;</a> للأزرار؛ فبدلًا من التحايل لإنشاء زر غير حقيقي باستخدام <a href="https://wiki.hsoub.com/HTML/div" rel="external">العنصر &lt;div&gt;</a>، وكتابة الكثير من أسطر الشيفرة البرمجية المتداخلة لجلب سلوكيات الزر لهذا العنصر، والتي تجعل شيفرتك البرمجية أكثر هشاشة وأقل قابلية للصيانة، يمكنك عوض ذلك خلال العنصر <a href="https://ishadeed.com/article/styling-the-good-old-button/" rel="external nofollow"><code>&lt;button&gt;</code> تصميم زر حقيقي</a> مضمن به سلوكيات الزر افتراضيًا والتحكم في حجمه ليبدو أكبر أو أصغر كما تريد، كما يتميز هذا العنصر في أنه افتراضيًا يسمح بالتركيز على الزر الحقيقي باستخدام لوحة المفاتيح، بالتالي يمكن تنشيطه باستخدام مفتاح شريط المسافة أو مفتاح Enter.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: افهم الدلالة والسلوك الافتراضي لعناصر HTML، واستخدام العنصر المناسب للمحتوى الخاص بك.
	</p>
</blockquote>

<h3 id="12">
	12. التفاعلات المعقدة
</h3>

<p>
	في بعض الأحيان قد يُطلب منك تطوير واجهات مستخدم معقدة تفتقر إلى العناصر الأساسية الموجودة في HTML. أولاً وقبل كل شيء، ينبغي أن تبحث عن طرائق لتبسيط هذه الواجهات لتجعلها تتماشى مع العناصر الأساسية في HTML، وفي حال كان ذلك غير ممكن فسيلزمك الدخول إلى العالم الغامض لـ <a href="https://academy.hsoub.com/programming/javascript/%D8%AA%D8%B9%D9%84%D9%85-%D9%84%D8%BA%D8%A9-%D8%AC%D8%A7%D9%81%D8%A7-%D8%B3%D9%83%D8%B1%D9%8A%D8%A8%D8%AA-%D9%85%D9%86-%D8%A7%D9%84%D8%B5%D9%81%D8%B1-%D8%AD%D8%AA%D9%89-%D8%A7%D9%84%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81-r2046/" rel="">JavaScript</a> و ARIA. ومن حُسن حظنا أن <a href="https://www.w3.org/WAI/ARIA/apg/" rel="external nofollow">دليل ممارسات WAI-ARIA</a> يوفر العديد من الأمثلة المفيدة لتصميم واجهات يمكن الوصول إليها، مثل: العرض الشجري وشرائط التمرير المتعددة الاتجاهات وغيرها.
</p>

<p>
	بطبيعة الحال، أنت لست بحاجة لإعادة اختراع العجلة من جديد، إذ يمكنك الاستفادة من تلك الأمثلة المتاحة؛ مع ذلك يجب عليك الانتباه إلى أن ليست جميع تلك الأمثلة جيدة للاستخدام، فعلى الرغم مما تَنُص عليه الإرشادات، من الجيد تجنب استخدام <a href="https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html" rel="external nofollow">قوائم ARIA للتنقل داخل الموقع</a>، كما لا ينبغي عليك استخدام <a href="https://adrianroselli.com/2020/07/aria-grid-as-an-anti-pattern.html" rel="external nofollow">الخطيط الشبكي لـ ARIA</a> إلا إذا كنت تهدف إلى إعادة إنشاء جدول بيانات Excel.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: استخدم ARIA فقط في حالة عدم وجود العناصر الأساسية، واستخدم أنماط التصميم والتعليمات البرمجية التي اقترحتها W3C.
	</p>
</blockquote>

<h3 id="13frameworks">
	13. أُطُر العمل Frameworks
</h3>

<p>
	في الوقت الحالي, تُستخدم أُطُر العمل مثل React و Vue بازدياد في إنشاء صفحات الويب. ورغم أن أُطُر العمل هذه لا تمنع الوصول إليها، إلا أنه في كثير من الأحيان تُختار مكونات لم تُكتب باستخدام علامات HTML الصحيحة، كما أنها لم تُختبر باستخدام التقنيات المساعدة.
</p>

<p>
	لكن لا يجب أن يكون الأمر على هذا النحو، إذ <a href="https://marcus.io/blog/accessible-react-component-libraries" rel="external nofollow">يقول ماركوس هيرمان</a>: "لدي انطباع بأن المزيد والمزيد من أنظمة مكونات React المصممة مع وضع سهولة الوصول في الاعتبار آخذة في الظهور". أما فيما يتعلق بإطار العمل React، فهناك خيارات واعدة:
</p>

<ul>
	<li>
		تُعد مكتبة <a href="https://reakit.io/" rel="external nofollow">Reakit</a> خيارًا يتبع بدقة معايير WAI-ARIA 1.1، فجميع المكونات تأتي مع السمات الصحيحة والتفاعلات التي يمكن التحكم بها عبر لوحة المفاتيح.
	</li>
	<li>
		اختُبرت مكتبة <a href="https://reacttraining.com/reach-ui" rel="external nofollow">Reach UI</a> باستخدام Safari و VoiceOver و Firefox و NVDA و Edge و JAWS، وعندما ينضج هذا المشروع سوف تُجرى له عملية تدقيق بواسطة WebAIM للتأكد من قابليته للوصول، لذا إذا اخترت استخدام مكتبة Reach UI، فإن تطبيقك سيكون له أساس قوي وقابل للوصول.
	</li>
</ul>

<p>
	وفيما يتعلق بإطار العمل Vue:
</p>

<ul>
	<li>
		تتبع مكتبة <a href="https://vuetensils.com/" rel="external nofollow">Vuetensils</a> ممارسات WAI-ARIA لإتاحة سهولة الوصول، بما في ذلك الدلالات النصية وسمات ARIA والأدوار وغيرها.
	</li>
	<li>
		تُعد مكتبة <a href="https://ui.tournant.dev/" rel="external nofollow">Tournant UI</a> ومكتبة <a href="https://vue-a11y.com/" rel="external nofollow">Vue a11y</a> مشروعين صغيرين، ولكنهما ينموان.
	</li>
</ul>

<p>
	وبالإضافة إلى ما سبق، فقد نشر بنك ING مكتبته الداخلية للمكونات كمشروع يُسمى <a href="https://medium.com/ing-blog/ing-open-sources-lion-a-library-for-performant-accessible-flexible-web-components-22ad165b1d3d" rel="external nofollow">Lion</a>، والتي يمكن استخدامها مع أي إطار عمل (أو بدونه)، فهي مكتبة مكونات مفتوحة المصدر وغير مرتبطة بأي إطار عمل، ويمكن أن تكون الأساس لنظام التصميم الداخلي الخاص بك، بُنيت هذه المكتبة من الصفر لتمكين الوصول والقدرة على التوسعة، حيث تُعد تلك الأمور صعبة التغيير أو التحقق منها في وقت لاحق خلال عملية التطوير.
</p>

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

<p>
	ولمساعدتك في هذا الصدد، كتب Adrian Roselli وثيقةً هامةً تحتوي على <a href="https://adrianroselli.com/2019/08/basic-custom-control-requirements.html" rel="external nofollow">متطلبات أساسية للتحكم المخصص</a> يمكنك استعمالها لتقييم أي مكتبة مكونات تفكر في استخدامها.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: اختر مكتبة المكونات التي سوف تستخدمها بعناية، ليصبح إطار العمل قابلًا للوصول.
	</p>
</blockquote>

<h3 id="14">
	14. أنظمة إدارة المحتوى ومُنشئي المواقع
</h3>

<p>
	تمتلك أنظمة إدارة المحتوى مفتوحة المصدر الرئيسية، مثل: <a href="https://wordpress.org/about/accessibility/" rel="external nofollow">ووردبريس</a> و <a href="https://brian.teeman.net/joomla/892-res" rel="external nofollow">جوملا</a> و <a href="https://www.drupal.org/about/features/accessibility" rel="external nofollow">دروبال</a>، القدرة على إنتاج مواقع قابلة للوصول، على الرغم من أن الجودة تعتمد بشكل كبير على اختيار منشئ الموقع لقوالب وملحقات قابلة للوصول؛ أما بالنسبة لمُنشئي المواقع المستضافة، فيُنصح بتجنب خدمة Weebly لوجود بعض القيود لديهم على سهولة الوصول. أما بالنسبة لخدمة Squarespace وخدمة Wix، فهما قادران على <a href="https://terrillthompson.com/1203" rel="external nofollow">إنشاء مواقع قابلة للوصول</a>، ومع ذلك يجب عليك أن تتطلع إلى تحقيق هذا الأمر لأنه لن يحدث من تلقاء نفسه.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: اختر نظام إدارة المحتوى ومُنشئ المواقع بعناية.
	</p>
</blockquote>

<h3 id="15pdf">
	15. مستندات PDF
</h3>

<p>
	على الرغم من أن مستندات PDF ليست قائمةً على تقنية الويب، إلا أنها تُستخدم في العديد من الأحيان لعرض تلك المستندات عبر صفحات الويب. <a href="https://www.adobe.com/accessibility/pdf.html" rel="external nofollow">فوفقًا لشركة Adobe</a>، فإن العديد من الميزات الموجودة في تنسيقات HTML، مثل: النص البديل للصور، والتسميات لعناصر التحكم في النموذج، والعناوين الخاصة بالبيانات المجدولة، وتسلسل المحتوى ذي المعنى والمنطقي؛ كلها مدعومة بالكامل من خلال مواصفات PDF، وبفضل ذلك يستطيع مستخدمو التقنيات المساعدة الشائعة الاستفادة من أدواتهم المفضلة والوصول إلى المعلومات الموجودة في مستندات PDF.
</p>

<p>
	يمكنك <a href="https://brucelawson.co.uk/2019/making-accessible-tagged-pdfs-with-prince/" rel="external nofollow">إنشاء مستندات PDF يمكن الوصول إليها من خلال علامات أو وسوم HTML و CSS</a>، وذلك باستخدام مكتبة تدعى <a href="https://www.princexml.com/" rel="external nofollow">Prince</a>، والتي يمكن الاستفادة بها مجانًا للاستخدام غير التجاري.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		<strong>باختصار</strong>: أتح الوصول إلى مستندات PDF الخاصة بك.
	</p>
</blockquote>

<h2 id="-12">
	استمر في اختبار سهولة الوصول إلى موقع الويب
</h2>

<p>
	تُعَد عملية اختبار سهولة الوصول لموقع الويب جزءًا أساسيًا من عملية التطوير، لذلك ينبغي عليك تنفيذها باستمرار قبل نشر الموقع على الويب، ويمكنك إعداد خطة اختبار بسيطة لضمان توافر المحتوى لجميع الأفراد، وتلك الخطة البسيطة يمكن أن تشمل النقاط التالية:
</p>

<ul>
	<li>
		<a href="https://validator.w3.org/" rel="external nofollow">التحقق من صحة تنسيق HTML الخاص بك</a>.
	</li>
	<li>
		اختبار تباين الألوان.
	</li>
	<li>
		هل يمكنك التنقل في أرجاء الصفحة باستخدام لوحة المفاتيح فقط ومعرفة مكان التركيز في الصفحة؟
	</li>
	<li>
		هل يمكنك ملء النماذج وإرسالها باستخدام لوحة المفاتيح فقط؟
	</li>
	<li>
		اربط صفحات موقعك مع ملف <a href="https://raw.githubusercontent.com/Heydon/REVENGE.CSS/master/revenge.css" rel="external nofollow">revenge.css</a> الخاص بـ Heydon Pickering الذي يعرض مربعات أخطاء باللون الوردي (مع رسائل بخط Comic Sans) في كل مكان تكتب فيه HTML غير صحيح، (لا تقلق، لن تنسى إزالته قبل نشر الصفحة على الويب).
	</li>
</ul>

<p>
	يمكنك أيضًا الاستفادة من <a href="https://github.com/bbc/bbc-a11y" rel="external nofollow">مدقق معايير الوصول</a> الخاص بها، كما يمكنك استخدام أدوات مثل: أداة <a href="https://developer.chrome.com/docs/lighthouse/overview/" rel="external nofollow">Google Lighthouse</a> وهي متوفرة أيضًا كامتداد <a href="https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/" rel="external nofollow">لمتصفح فايرفوكس</a>، وأداة <a href="https://tenon.io/" rel="external nofollow">Tenon.io</a> التي يمكن أن تساعدك في هذه العملية. ومع ذلك، ينبغي مراعاة أن أدوات التحقق الآلي ليست موثوقة كليًا، إذ أنها لا تتمكن من كشف جميع العوامل المؤثرة في سهولة الوصول، وذلك استنادًا إلى المقالة <a href="https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/" rel="external nofollow">بناء أكثر المواقع التي يتعذر الوصول إليها مع تقييم Lighthouse مثالي</a> التي توضح أن أي أداة آلية لا يمكن الاعتماد عليها كليًا.
</p>

<p>
	بالتالي، فإن أفضل طريقة لاختبار سهولة الوصول لموقعك هي اختباره بمساعدة أشخاص حقيقيين من ذوي الاحتياجات الخاصة المختلفة، وقد قدم بيتر فان غريكن <a href="https://frozenrockets.nl/articles/en/user-testing-with-disabled-people" rel="external nofollow">قائمة مفيدة للنظر فيها أثناء إجراء اختبارات الاستخدام مع هؤلاء الأشخاص</a>، سوف تساعدك في تحسين سهولة الوصول لموقعك وتلبية احتياجات جميع المستخدمين.
</p>

<h2 id="-13">
	خاتمة
</h2>

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

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

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

<p>
	إذاً، لندمج سهولة الوصول في عملية تطوير وتصميم مواقع الويب، ولنلتزم بتطبيق أفضل الممارسات المذكورة في هذه المقالة، فهي خطوة مهمة نحو تحقيق شمولية الويب وتوفير فرص متساوية للجميع في الوصول إلى العالم الرقمي.
</p>

<p>
	ترجمة -بتصرف- للمقال <a href="https://websitesetup.org/web-accessibility-checklist/#masthead" rel="external nofollow">Website Accessibility (15 Best Practices)</a>.
</p>

<h2 id="-14">
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A5%D9%85%D9%83%D8%A7%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84-%D9%84%D8%A5%D8%AA%D8%A7%D8%AD%D8%A9-%D8%B3%D9%87%D9%88%D9%84%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%84%D9%84%D8%AC%D9%85%D9%8A%D8%B9-r761/" rel="">إمكانية الوصول لإتاحة سهولة الاستخدام للجميع</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D9%81%D8%B1%D9%82-%D8%A8%D9%8A%D9%86-%D8%A5%D9%85%D9%83%D8%A7%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84-%D9%88%D8%A7%D9%84%D8%B4%D9%85%D9%88%D9%84%D9%8A%D8%A9-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r642/" rel="">الفرق بين إمكانية الوصول والشمولية في تصميم تجربة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%A7%D8%AD%D8%AA%D9%8A%D8%A7%D8%AC%D8%A7%D8%AA-%D8%A7%D9%84%D8%A7%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%D9%8A%D8%A9-%D9%84%D8%A5%D9%85%D9%83%D8%A7%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r760/" rel="">الاحتياجات الاجتماعية لإمكانية الوصول في تصميم تجربة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D9%85%D9%88%D8%A7%D9%82%D8%B9-%D8%AA%D8%B1%D8%A7%D8%B9%D9%8A-%D8%A5%D9%85%D9%83%D8%A7%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-r762/" rel="">كيفية إنشاء مواقع تراعي إمكانية الوصول باستخدام مبادئ التصميم الشامل</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">860</guid><pubDate>Mon, 01 Jul 2024 15:00:00 +0000</pubDate></item><item><title>&#x643;&#x64A;&#x641; &#x62A;&#x62C;&#x639;&#x644; &#x645;&#x648;&#x642;&#x639; &#x627;&#x644;&#x648;&#x64A;&#x628; &#x627;&#x644;&#x62E;&#x627;&#x635; &#x628;&#x643; &#x645;&#x62A;&#x627;&#x62D;&#x627; &#x644;&#x630;&#x648;&#x64A; &#x627;&#x644;&#x645;&#x634;&#x627;&#x643;&#x644; &#x627;&#x644;&#x628;&#x635;&#x631;&#x64A;&#x629;</title><link>https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81-%D8%AA%D8%AC%D8%B9%D9%84-%D9%85%D9%88%D9%82%D8%B9-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-%D8%A7%D9%84%D8%AE%D8%A7%D8%B5-%D8%A8%D9%83-%D9%85%D8%AA%D8%A7%D8%AD%D8%A7-%D9%84%D8%B0%D9%88%D9%8A-%D8%A7%D9%84%D9%85%D8%B4%D8%A7%D9%83%D9%84-%D8%A7%D9%84%D8%A8%D8%B5%D8%B1%D9%8A%D8%A9-r859/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2024_06/---------.png.3bc19624d91b314ed4c902a2c04da873.png" /></p>
<p>
	إن عملية تطور الإنترنت وازدهاره المستمر قد أحدث ثورة في عالم الاتصالات وتبادل المعلومات، لكن ماذا عن الأشخاص الذين يواجهون صعوبة في الاستفادة من هذه التكنولوجيا الحديثة؟ هل فكرت يومًا في كيفية جعل موقع الويب الخاص بك يكون متاحًا للمكفوفين وضعاف البصر؟
</p>

<p>
	يُعَد توفير إمكانية الوصول لهذه الفئة المهمة من المستخدمين ضرورة حتمية في عصرنا الرقمي الحالي، فجعل موقع الويب الخاص بك قابلًا للوصول للمكفوفين وضعاف البصر ليس مجرد مسألة فنية، بل هو تعبير حقيقي عن التسامح والاحترام وتمكين الجميع للاستفادة من فوائد العالم الرقمي. في هذه المقالة، ستكتشف كيف يمكن لتغييرات صغيرة في تصميم موقعك أن تحقق فرقًا كبيرًا في حياة الأشخاص الذين يواجهون صعوبات بصرية، لذا هيا بنا نسعى لجعل الويب مكانًا أكثر شمولية وتوازنًا، حيث يتمكن الجميع من الاستفادة.
</p>

<h2 id="">
	العوامل التي يجب توافرها في موقعك
</h2>

<p>
	هناك بعض العوامل الرئيسية عندما يتعلق الأمر بإمكانية الوصول إلى الويب لذوي المشاكل البصرية، ولكي يكون موقع الويب متاحًا لهم، معناها يجب أن يتوافر به ما يلي:
</p>

<ul>
	<li>
		<strong>قابل للإدراك</strong>: يجب أن يكون الأشخاص قادرين على فهم المعلومات الموجودة على موقعك، وبقدر ما قد يبدو هذا واضحًا لكن غالبًا ما يُهمل هذا المبدأ في تطوير الويب. فعلى سبيل المثال، لا يستطيع المكفوفون إدراك المعلومات المرئية مثل الرسومات والتخطيط.
	</li>
	<li>
		<strong>قابل للتشغيل</strong>: لا يمكن أن تطلب واجهة موقع الويب من المستخدمين اتخاذ أي إجراء لا يمكنهم تنفيذه، إذ يستخدم بعض الأشخاص ضعاف البصر مثلًا أجهزة تَكَيُّفية تُحاكي لوحات المفاتيح من حيث الوظائف، لذلك يجب ألا يَطلب موقع الويب الخاص بك من المستخدمين استخدام الفأرة، بل من الهام إتاحة الوصول إلى محتوى الويب عبر لوحة المفاتيح.
	</li>
	<li>
		<strong>قابل للفهم</strong>: ينبغي أن يتسم المحتوى بالسهولة في المتابعة والفهم بالنسبة لجميع المستخدمين، لذلك يجب أن يكون المحتوى بسيطًا وواضحًا قدر المستطاع، مع مراعاة أن هناك مستخدمين قد لا يكونون قادرين على فهم الجُمل المعقدة بسبب إعاقات التعلم أو الإدراك.
	</li>
	<li>
		<strong>قابل للتكامل</strong>: يجب أن يكون المحتوى متوافقًا مع التقنيات والأجهزة المساعدة التي يستخدمها الأشخاص ضعاف البصر.
	</li>
</ul>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="150651" href="https://academy.hsoub.com/uploads/monthly_2024_06/001-the-four-pillars-of-web-accessibility(Arabic).png.9ca55dea58f0a89129bf6edcce6bc91c.png" rel=""><img alt="001-the-four-pillars-of-web-accessibility(Arabic).png" class="ipsImage ipsImage_thumbnailed" data-fileid="150651" data-ratio="88.50" data-unique="vt3307tek" style="width: 600px; height: auto;" width="678" src="https://academy.hsoub.com/uploads/monthly_2024_06/001-the-four-pillars-of-web-accessibility(Arabic).thumb.png.f6057779693b01c900832827aee3f8e7.png"></a>
</p>

<h2 id="-1">
	أفضل الممارسات لإتاحة إمكانية الوصول لذوي المشاكل البصرية
</h2>

<p>
	عندما يتعلق الأمر بتوفير إمكانية الوصول للأشخاص ضعاف البصر على مواقع الويب، تتبنى بعض المواقع فكرة إنشاء إصدار منفصل مخصص لمستخدمي الشاشات الصوتية من ذوي المشاكل البصرية، ومع ذلك فإن هذا النهج ليس دائمًا الأفضل ما لم تُحدَّث هذه النسخة بانتظام.
</p>

<p>
	يُقترح إنشاء إصدار منفصل فقط في حالات معينة، مثل عدم فعالية الأساليب التي ذكرناها سابقًا لجعل موقع الويب الأصلي متاحًا للأشخاص ضعاف البصر، أو إذا كان بإمكانك تحديث الإصدار المنفصل للموقع الأصلي بانتظام، أو إذا كان الهدف الرئيسي هو استهداف الأشخاص ذوي المشاكل البصرية وتقديم أفضل <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">تجربة مستخدم</a> ممكنة لهم. وفي معظم الحالات، يمكنك اعتماد أفضل الممارسات التالية لجعل موقع الويب الخاص بك متاحًا للمكفوفين وضعاف البصر عمومًا.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="150649" href="https://academy.hsoub.com/uploads/monthly_2024_06/002-10-ways-to-make-your-website-accessible(Arabic).png.e59a8ee237f612e685cb102ab279d972.png" rel=""><img alt="002-10-ways-to-make-your-website-accessible(Arabic).png" class="ipsImage ipsImage_thumbnailed" data-fileid="150649" data-ratio="112.57" data-unique="ygzk7ss5b" width="533" src="https://academy.hsoub.com/uploads/monthly_2024_06/002-10-ways-to-make-your-website-accessible(Arabic).thumb.png.71de776a8ad40876dd24844998f77685.png"></a>
</p>

<h3 id="-2">
	توفير ما يكفي من تباين الألوان
</h3>

<p>
	يُعَد توفر تباين كافٍ في الألوان أمرًا حاسمًا في تصميم المواقع، لذلك استخدم التباين العالي بين لون الخلفية والنص، فهو أمر هام خاصةً للمستخدمين الذين يعانون من عمى الألوان. وكحد أدنى، يجب أن تفي في التصميم بمتطلبات <a href="https://www.w3.org/TR/WCAG20/" rel="external nofollow">WCAG 2.0</a>، والتي تتطلب نسبة تباين 4.5: 1 للنص العادي و 3.1: 1 للنص الكبير، كما يُعد النص الكبير خطًا من 14 أو 18 نقطة أو نصًا غامقًا.
</p>

<p>
	ويمكنك استخدام أداة مثل <a href="https://www.colorzilla.com/" rel="external nofollow">Colorzilla</a> للتحقق من قيمة أي عنصر، كما يمكنك أيضًا استخدام <a href="https://webaim.org/resources/contrastchecker/" rel="external nofollow">أدوات التحقق من تباين الألوان</a> المتوفرة التي تتحقق من مدى التوافق مع هذا المعيار.
</p>

<p>
	ونظرًا لأن العديد من المستخدمين الذين يعانون من ضعف البصر يميزون النص من خلال تحديده بالفأرة كخدعة لزيادة التباين، فتجنب استخدام تقنيات <a href="https://academy.hsoub.com/programming/javascript/%D8%AA%D8%B9%D9%84%D9%85-%D9%84%D8%BA%D8%A9-%D8%AC%D8%A7%D9%81%D8%A7-%D8%B3%D9%83%D8%B1%D9%8A%D8%A8%D8%AA-%D9%85%D9%86-%D8%A7%D9%84%D8%B5%D9%81%D8%B1-%D8%AD%D8%AA%D9%89-%D8%A7%D9%84%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81-r2046/" rel="">JavaScript</a> أو <a href="https://academy.hsoub.com/programming/css/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AE%D8%B7%D9%8A%D8%B7-%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-css-r2238/" rel="">CSS</a> التي تمنع المستخدمين من تحديد النص بواسطة الفأرة.
</p>

<p>
	وكنصيحة أخيرة، لا تستخدم أنماط خلفية مزدحمة أو عليها علامات مائية قد يصعب قراءتها أو تشتت انتباه بعض المستخدمين.
</p>

<h3 id="-3">
	الحد من اللون وعدم الاعتماد عليه
</h3>

<p>
	يمكن أن يؤدي استخدام الكثير من الألوان إلى تشتيت الانتباه والتشويش، كما يمكن أيضًا أن يجعل من الصعب على المستخدمين تحديد العناصر المهمة، لذا حاول تحديد عدد الألوان التي تستخدمها. وبالنسبة للأشخاص المصابين بعمى الألوان، من المهم ألا تعتمد على اللون وحده لنقل المعلومات (مثل: "انقر على الزر الأحمر")، وفي حالة إن احتجت إلى عمل ذلك فالتزم ببعض الألوان فقط، وحاول ألا تستخدم اللون الأخضر مع الأحمر أو الأحمر على الأخضر لتجنب إرباك المستخدمين الذين يعانون من عمى الألوان.
</p>

<h3 id="-4">
	تجنب النص فوق صور الخلفية
</h3>

<p>
	غالبًا ما تؤدي إضافة نص فوق صور الخلفية إلى حدوث مشكلة، حيث قد لا تحتوي الصورة على تباين كافٍ مع لون النص، وفي حالة ما لم تتأكد من وجود تباين كافٍ باستخدام أدوات عبر الإنترنت لاختبار ذلك، فتجنب استخدام النص فوق صور الخلفية تمامًا. وفي حالة إن احتجت إلى استخدام النص فوق صور الخلفية، فتأكد من استخدام الألوان الصحيحة وتأكد أيضًا من وجود تباين كافٍ حتى يسهل قراءة النص، حتى بالنسبة للمستخدمين الذين يعانون من عمى الألوان.
</p>

<h3 id="-5">
	تمكين ضبط حجم الخط يدويا
</h3>

<p>
	إمكانية تعديل حجم الخط يدويًا هو أحد العوامل الهامة في تحقيق إمكانية الوصول على الويب للأشخاص ذوي المشاكل البصرية، وبما أنه لا يوجد حجم مثالي للخط، ينبغي أن يكون لديك صفحات قابلة للتكيف تسمح للمستخدمين بضبط حجم الخط وفق احتياجاتهم. ومع ذلك يجب أن يكون <strong>حجم الخط الافتراضي كبيرًا بما فيه الكفاية</strong> (على الأقل 10 نقاط) حتى لا يكون الأغلبية مضطرة لضبطه يدويًا.
</p>

<p>
	وفي حالة إن كان معظم زوار موقعك من كبار السن أو ضعاف البصر، فيجب زيادة حجم الخط الافتراضي والنظر في إضافة زر لتحميل حجم خط أكبر.
</p>

<p>
	والأخير، يجب التأكد من عدم تعطل تنسيق المحتوى عند تغيير حجم الخط فقط، حيث قد يؤدي ذلك إلى تداخل النص مع المحتوى المجاور وجعله غير مقروء.
</p>

<h3 id="-6">
	إعطاء الأولوية للمعلومات المهمة
</h3>

<p>
	يُعَد وجود المحتوى الأكثر أهميةً في الجزء العلوي من الصفحة أمرًا جيدًا لجميع المستخدمين ومحركات البحث أيضًا، كما أنها مفيدة خاصةً للأشخاص الذين يستخدمون التكنولوجيا المساعدة، والذين يمكنهم أن يقرروا بسرعة ما إذا كانت الصفحة ستتضمن المعلومات التي يبحثون عنها أم لا.
</p>

<p>
	فسواءً كان المحتوى مقالة لمدوَّنة أو صفحة لمُنتَج، فقط تأكد من وصف المحتوى بإيجاز وتضمين المعلومات الأكثر أهمية في البداية.
</p>

<h3 id="-7">
	اجعل موقع الويب الخاص بك قابلا للوصول من خلال لوحة المفاتيح فقط
</h3>

<p>
	نظرًا لأن بعض المستخدمين الذين يعانون من مشاكل بصرية يعتمدون على لوحات المفاتيح وحدها للتنقل عبر الويب، فمن المهم أن تسمح باختصارات وأوامر لوحة المفاتيح لتسهيل التنقل في موقعك. وعلى العموم، لا تجعل الأجهزة مثل الفأرة مطلبًا أساسيًا للوصول إلى موقع الويب الخاص بك. على سبيل المثال، عندما يَشْرَعْ المستخدمون بملء نموذج الاتصال، سيستخدم أولئك الذين يعتمدون على لوحة المفاتيح زر "Tab" للتنقل بين الحقول، ولتوفير <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r813/" rel="">تجربة مستخدم</a> جيدة لهم، ينبغي عليك استخدام السمة "tabindex" لتحديد الترتيب الصحيح للحقول التي ينبغي اتباعها.
</p>

<h3 id="-8">
	الحد من عدد الروابط
</h3>

<p>
	من أجل توفير تجربة مستخدم جيدة يُنصح بتقليل عدد الروابط على صفحات موقعك، وذلك بغض النظر عن مدى اهتمامك بإمكانية الوصول إلى الويب، إذ يمكن أن يكون وجود عدد كبير من الروابط مُحبطًا للمستخدمين؛ كما أن وجود عدد كبير جدًا من الروابط الصادرة يعد أمرًا سيئًا بالنسبة إلى مُحسّنات محرّكات البحث.
</p>

<p>
	ومع ذلك، يصبح تحديد الروابط ذات أهمية خاصةً عند تصميم موقع ويب يستهدف الأشخاص ذوي المشاكل البصرية، فمن خلال استخدام برامج قراءة الشاشة تُحَوَّل الروابط إلى معلومات صوتية يستمع إليها المستخدمون عند هبوطهم على الصفحة، وفي حالة وجود عدد كبير من الروابط يمكن أن يكون مربكًا وصعبًا للمستخدمين في هذه الحالة.
</p>

<h3 id="-9">
	إضافة نصا للروابط ذي صلة
</h3>

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

<h3 id="-10">
	تقديم محتوى بديل
</h3>

<p>
	يُعَد تقديم محتوى بديل أمرًا ضروريًا للأشخاص ذوي المشاكل البصرية الذين يعتمدون على التكنولوجيا للوصول إلى المحتوى، لذلك يصبح من المهم توفير بدائل لبعض أنواع المحتوى. ويتعيَّن عليك أن تتذكر أن برامج قراءة الشاشة تستطيع قراءة النصوص والشيفرات البرمجية فقط، لذلك لا يتسنى للمستخدمين الوصول إلى المعلومات الموجودة في الأصول البصرية، فإذا لم يتوفر نص بديل للصور فإن قارئ الشاشة سيتجاوزها، أما إذا توفر نص بديل للصور فإن قارئ الشاشة سيصف نوع المحتوى هكذا: "صورة"، ثم يقرأ النص البديل.
</p>

<p>
	لذا، ينبغي عليك تضمين نصوص بديلة للصور، وتوفير سمات بديلة للرسومات، ومحتوى بديل لجميع الوسائط الأخرى، مثل: الترجمة أو الوصف لمحتوى الفيديو أو الصور المتحركة؛ كما يجب أن تكون تلك البدائل مُوجزة وتصل إلى النقطة الرئيسية بسرعة، وينبغي تضمينها فقط إذا كانت المعلومات ذات أهمية.
</p>

<h3 id="-11">
	استخدام نص بديل فارغ
</h3>

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

<h3 id="-12">
	تنظيم المحتوى باستخدام عنوان وصفي وعناوين فرعية
</h3>

<p>
	عند تنظيم المحتوى يجب أخذ العنوان الوصفي والعناوين الفرعية بعين الاعتبار، وذلك لأن برامج قراءة الشاشة أول ما تقرأه عندما يصل المستخدمون إلى الصفحة هو العنوان الوصفي، ومن ثَمَّ يكون لدى المستخدمين خيار الانتقال من عنوان إلى آخر؛ لذا يُنصح بجعل العنوان وصفيًا قدر الإمكان، بالإضافة إلى تضمين جدول مع <a href="https://wiki.hsoub.com/HTML/th" rel="external">عناصر &lt;th&gt;</a> في الأعلى لمساعدة المستخدمين في تحديد العناوين.
</p>

<p>
	علاوةً على ذلك، ينبغي استخدام الأنماط الصحيحة للتنسيق باستخدام <a href="https://wiki.hsoub.com/CSS" rel="external">CSS</a> وتحديد الهيكل باستخدام <a href="https://wiki.hsoub.com/HTML" rel="external">HTML</a>، كما يُفضل استخدام <a href="https://wiki.hsoub.com/HTML/p" rel="external">العنصر &lt;p&gt;</a> للفقرات، و<a href="https://wiki.hsoub.com/HTML/h1-h6" rel="external">العنصر &lt;h1&gt;، و&lt;h2&gt; للعناوين</a>، والعنصر <code><a href="https://wiki.hsoub.com/HTML/ul" rel="external">&lt;ul&gt;</a></code>، و<code><a href="https://wiki.hsoub.com/HTML/ol" rel="external">&lt;ol&gt;</a></code>، و<code><a href="https://wiki.hsoub.com/HTML/li" rel="external">&lt;li&gt;</a></code> للقوائم، فتلك الممارسات تساعد قُراء الشاشة في فهم هيكل المحتوى الخاص بك ونقله بكفاءة.
</p>

<h3 id="-13">
	تقليل عدد الإعلانات
</h3>

<p>
	يمكن أن يؤدي وجود عدد كبير جدًا من الإعلانات على موقع الويب الخاص بك إلى تكوين تجربة مستخدم سيئة، خاصةً بالنسبة لمستخدمي برامج قراءة الشاشة الذين لا يمكنهم بسهولة التمييز بين هذا النوع من المحتوى والمحتوى الآخر على صفحتك. وبالنسبة للإعلانات المرئية، ضع في حسبانك نفس الممارسات المستخدمة مع الأنواع الأخرى من المحتوى المرئي (مثل إضافة نص بديل)، ولكن ينبغي أيضًا أن تضع في حسبانك وضع كلمة "إعلان" في بداية النص البديل، فبهذه الطريقة سيعرف الأشخاص ذوي المشاكل البصرية نوع المحتوى الذي وصلوا إليه ثم يمكنهم تحديد ما إذا كانوا يريدون استهلاكه أم لا.
</p>

<h3 id="-14">
	إضافة معلومات اللغة
</h3>

<p>
	عندما يكون لموقع الويب الخاص بك جمهورًا دوليًا بالإضافة إلى محتوى مكتوب بلغات متعددة، تكون إضافة معلومات اللغة أمرًا ضروريًا. ويمكنك تحديد اللغة باستخدام <a href="https://wiki.hsoub.com/HTML/Global_Attributes#lang" rel="external">الخاصية lang</a>، وهذا يساعد الأجهزة المساعدة على التعرف على اللغة المستخدمة واستخدام قواعد النطق المناسبة لها، وعندما يتعرف قارئ الشاشة على لغة معينة، يمكنه التكيف وتقديم النص بالنطق الصحيح، وبهذه الطريقة يمكن تجنب إحداث الارتباك للمستخدمين ذوي المشاكل البصرية عندما يواجهون محتوى بلغة أجنبية.
</p>

<p>
	بإضافة معلومات اللغة، ستُعَزَّز إمكانية الوصول إلى المحتوى وتُحَسَّن تجربة المستخدم للأشخاص ذوي المشاكل البصرية، خاصةً الذين يعتمدون على تقنيات المساعدة للوصول إلى المحتوى عبر الويب.
</p>

<h3 id="-15">
	استخدام الأدوات الصحيحة
</h3>

<p>
	لحسن الحظ، هناك العديد من الأدوات المجانية عبر الإنترنت التي يمكن لمصممي الويب والمطورين استخدامها للتأكد من أن موقع الويب يلبي معايير الوصول، فيما يلي بعض أكثر هذه الأدوات فائدة:
</p>

<ul>
	<li>
		يوفر موقع <a href="http://colorsafe.co/" rel="external nofollow">Color Safe</a> اقتراحات لألوان متوافقة مع معايير الوصول، مع التركيز على معايير AA و AAA، مما يُمَكِّن مصممي الويب من تحديد مجموعات الألوان المناسبة بناءً على العناصر الموجودة في موقع الويب.
	</li>
	<li>
		يساعد <a href="https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll" rel="external nofollow">محلل تباين الألوان</a> في اكتشاف النصوص غير المتوافقة من حيث تباين الألوان، حيث يمكن للمطورين استخدام هذه الأداة للتحقق من تباين الألوان بين النصوص والخلفيات وضمان قراءتها بسهولة من قِبَل الأشخاص ذوي المشاكل البصرية.
	</li>
	<li>
		يساعد <a href="https://www.nvaccess.org/download/" rel="external nofollow">NVDA</a> المصممين على الحصول على نظرة شاملة حول تجربة مستخدم ضعيف البصر على موقع الويب، فهذه الأداة تساعد في التأكد من أن النصوص والعناصر المرئية يمكن الوصول إليها بطريقة صحيحة ومناسبة.
	</li>
	<li>
		يُجري <a href="https://wave.webaim.org/" rel="external nofollow">WebAIM’s Wave</a> تحليل لموقع الويب ويكشف الأخطاء المحتملة في إمكانية الوصول، بحيث يمكن للمطورين استخدام هذه الأداة للتحقق من وجود أي تحديات تواجه المستخدمين ذوي الاحتياجات الخاصة وتصحيحها بطريقة فعالة.
	</li>
</ul>

<p>
	وباستخدام هذه الأدوات وغيرها، يمكن للمصممين والمطورين تحسين إمكانية الوصول لمواقعهم على الويب وضمان أَنْ يتمتع جميع المستخدمين، بغض النظر عن قدراتهم، بتجربة مريحة ومفيدة.
</p>

<h2 id="-16">
	خاتمة
</h2>

<p>
	إن إنشاء موقع ويب متاح للجميع أمر حاسم في عالم يعتمد على الويب <strong>مع وجود أشخاص ذوي مشاكل بصرية يشكلون جزءًا كبيرًا من مستخدمي الإنترنت</strong>، لذلك تطبيق أفضل الممارسات في هذا الصدد يُعَدَّ أمرًا ضروريًا لجعل موقع الويب الخاص بك قابلًا للوصول؛ وبما أن واحدًا من كل أربعة بالغين في الولايات المتحدة وحدها يعاني من إعاقة، فإن توفير موقع ويب يمكن للجميع الوصول إليه ليس فقط مسؤولية اجتماعية، بل يعود بالفائدة أيضًا على عملك. وبغض النظر عن التعقيدات القانونية، يمكن أن يُحسن موقع الويب الذي يمكن للجميع الوصول إليه من سمعة علامتك التجارية ويعزز تحسينات محركات البحث ويحسن تجربة المستخدم.
</p>

<p>
	لذلك عند إنشاء موقع ويب موجه لذوي المشاكل البصرية، يجب أن تتذكر بأنه يجب أن يكون واضحًا وسهل الاستخدام ومفهومًا وقابل للتكيف، فلا يجب أن يتمكن الأشخاص ذوي المشاكل البصرية من الوصول إلى المحتوى الخاص بك فحسب، بل من المهم أيضًا أن يتمكنوا من تنفيذ ذلك بسهولة قدر الإمكان، دون أي صعوبة أو تشتيت للانتباه.
</p>

<p>
	ترجمة -بتصرف- للمقال <a href="https://websitesetup.org/websites-for-visually-impaired/" rel="external nofollow">Building a User-Friendly Website for the Visually Impaired</a>.
</p>

<h2 id="-17">
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A8%D9%86%D8%A7%D8%A1-%D9%85%D9%88%D9%82%D8%B9-%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-%D8%B3%D9%87%D9%84-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%84%D9%81%D8%A7%D8%A6%D8%AF%D8%A9-%D8%B0%D9%88%D9%8A-%D8%A7%D9%84%D9%85%D8%B4%D8%A7%D9%83%D9%84-%D8%A7%D9%84%D8%A8%D8%B5%D8%B1%D9%8A%D8%A9-r858/" rel="">بناء موقع إلكتروني سهل الاستخدام لفائدة ذوي المشاكل البصرية</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/programming/html/%D8%B4%D9%85%D9%88%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%B3%D9%87%D9%88%D9%84%D8%A9-%D9%88%D8%B5%D9%88%D9%84-%D8%AC%D9%85%D9%8A%D8%B9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D9%8A%D9%86-%D9%84%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D9%85%D9%88%D9%82%D8%B9-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-r1640/" rel="">شمولية التصميم: سهولة وصول جميع المستخدمين لصفحات موقع الويب</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/apps/productivity/google-drive/google-docs/%D8%AD%D8%B1%D9%88%D9%81-%D8%A8%D8%B1%D8%A7%D9%8A%D9%84-%D9%84%D9%85%D8%B3%D8%A7%D8%B9%D8%AF%D8%A9-%D8%A7%D9%84%D9%85%D9%83%D9%81%D9%88%D9%81%D9%8A%D9%86-%D9%81%D9%8A-%D9%85%D8%B3%D8%AA%D9%86%D8%AF%D8%A7%D8%AA-%D8%AC%D9%88%D8%AC%D9%84-r848/" rel="">حروف برايل لمساعدة المكفوفين في مستندات جوجل</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%B9%D9%88%D8%A7%D9%85%D9%84-%D8%A7%D9%84%D9%85%D8%A4%D8%AB%D8%B1%D8%A9-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r776/" rel="">العوامل المؤثرة في تجربة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A5%D9%85%D9%83%D8%A7%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84-%D9%84%D8%A5%D8%AA%D8%A7%D8%AD%D8%A9-%D8%B3%D9%87%D9%88%D9%84%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%84%D9%84%D8%AC%D9%85%D9%8A%D8%B9-r761/" rel="">إمكانية الوصول لإتاحة سهولة الاستخدام للجميع</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-interface/%D8%A3%D9%81%D8%B6%D9%84-%D8%A7%D9%84%D9%86%D8%B5%D8%A7%D8%A6%D8%AD-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r818/" rel="">أفضل النصائح لتصميم واجهة المستخدم</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">859</guid><pubDate>Sat, 01 Jun 2024 14:00:00 +0000</pubDate></item><item><title>&#x628;&#x646;&#x627;&#x621; &#x645;&#x648;&#x642;&#x639; &#x625;&#x644;&#x643;&#x62A;&#x631;&#x648;&#x646;&#x64A; &#x633;&#x647;&#x644; &#x627;&#x644;&#x627;&#x633;&#x62A;&#x62E;&#x62F;&#x627;&#x645; &#x644;&#x641;&#x627;&#x626;&#x62F;&#x629; &#x630;&#x648;&#x64A; &#x627;&#x644;&#x645;&#x634;&#x627;&#x643;&#x644; &#x627;&#x644;&#x628;&#x635;&#x631;&#x64A;&#x629;</title><link>https://academy.hsoub.com/design/user-experience/%D8%A8%D9%86%D8%A7%D8%A1-%D9%85%D9%88%D9%82%D8%B9-%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-%D8%B3%D9%87%D9%84-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%84%D9%81%D8%A7%D8%A6%D8%AF%D8%A9-%D8%B0%D9%88%D9%8A-%D8%A7%D9%84%D9%85%D8%B4%D8%A7%D9%83%D9%84-%D8%A7%D9%84%D8%A8%D8%B5%D8%B1%D9%8A%D8%A9-r858/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2024_05/--------.png.b9ece2b401d36ef1785bc01a4aa16b92.png" /></p>
<p>
	في العصر الرقمي اليوم يعمل الإنترنت كمنصة حيوية لتبادل المعلومات والتواصل والمشاركة مع مختلف الخدمات، لذلك وبينما نتبنى القوة التحويلية للتكنولوجيا، يصبح من الضروري التأكد من أن بيئة الإنترنت متاحة لجميع الأفراد، بما في ذلك أولئك الذين يعانون من مشكلات بصرية على اختلاف حدة هذه المشاكل.
</p>

<p>
	وفقًا لمنظمة <a href="https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment" rel="external nofollow">الصحة العالمية</a>، حتى سنة 2021 كان هناك <strong>2.2 مليار شخص</strong> في العالم يعانون من ضعف البصر القريب أو البعيد، من بين هؤلاء <strong>1 مليار</strong> شخص يعانون من ضعف البصر أو العمى المتوسط أو الشديد، لذلك يصبح من الضروري سد فجوة الوصول للأشخاص ذوي المشاكل البصرية وتزويدهم بفرص متساوية للوصول إلى المحتوى عبر الإنترنت والتفاعل معه.
</p>

<p>
	لكن <strong>لماذا من المهم إنشاء مواقع ويب للأشخاص ضعاف البصر؟</strong> في الماضي حتى يتمكن الأشخاص ذوي المشاكل البصرية من قراءة رسالة إخبارية أو مجلة أو أي نوع آخر من المحتوى، كان عليهم إما العثور على نسخة صوتية، أو استخدام <a href="https://academy.hsoub.com/apps/productivity/google-drive/google-docs/%D8%AD%D8%B1%D9%88%D9%81-%D8%A8%D8%B1%D8%A7%D9%8A%D9%84-%D9%84%D9%85%D8%B3%D8%A7%D8%B9%D8%AF%D8%A9-%D8%A7%D9%84%D9%85%D9%83%D9%81%D9%88%D9%81%D9%8A%D9%86-%D9%81%D9%8A-%D9%85%D8%B3%D8%AA%D9%86%D8%AF%D8%A7%D8%AA-%D8%AC%D9%88%D8%AC%D9%84-r848/" rel="">نظام برايل</a> في حال كانت مشاكل البصرية حادة تصل لحد العمى، أو جعل شخص ما يقرأ له هذا المحتوى بصوتٍ عالٍ؛ أما اليوم وبفضل الإنترنت أصبح لدى هؤلاء الأشخاص خيارات أسهل.
</p>

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

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

<h2 id="">
	أهمية إمكانية الوصول إلى الويب وتصميم الويب لذوي الاحتياجات الخاصة
</h2>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="150088" href="https://academy.hsoub.com/uploads/monthly_2024_05/001-the-why-behind-web-accessibility(Arabic).png.ae3ca424e5195eac6d569d7c4c7bce90.png" rel=""><img alt="001-the-why-behind-web-accessibility(Arabic).png" class="ipsImage ipsImage_thumbnailed" data-fileid="150088" data-ratio="125.79" data-unique="r7zij3olk" width="477" src="https://academy.hsoub.com/uploads/monthly_2024_05/001-the-why-behind-web-accessibility(Arabic).thumb.png.dbe94b7271f816de4943f27e6e3e45f1.png"></a>
</p>

<p style="text-align: center;">
	 
</p>

<p>
	قبل الخوض في كيفية جعل موقع الويب الخاص بك متاحًا للأشخاص ذوي المشاكل البصرية، سنشرح أهمية إمكانية الوصول إلى الويب ككل إلى جانب فوائدها العديدة.
</p>

<p>
	يُعد <a href="https://academy.hsoub.com/programming/general/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D9%85%D9%88%D8%AC%D8%B2-%D8%A5%D9%84%D9%89-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%85%D9%88%D9%82%D8%B9-%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-r1883/" rel="">تصميم موقع الويب</a> الخاص بك مع وضع إمكانية الوصول إليه في الحسبان ليس فقط التزامًا أخلاقيًا، وأنه الشيء الصحيح الذي يجب عليك تنفيذه؛ فهو يُعَد مفيدًا أيضًا <a href="https://academy.hsoub.com/programming/general/%D8%AE%D8%B7%D9%88%D8%A7%D8%AA-%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D9%91%D8%A9-%D9%84%D8%AA%D8%AD%D8%B3%D9%8A%D9%86-%D8%A3%D8%AF%D8%A7%D8%A1-%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9-r519/" rel="">لأداء موقع الويب</a> والنشاط الذي تستهدفه.
</p>

<p>
	فيما يلي أهم الأسباب التي تجعلك تعمل على تصميم موقع الويب الخاص بك قابلًا للوصول.
</p>

<h3 id="-1">
	أسباب أخلاقية
</h3>

<p>
	السبب الأول يتعلق بالأخلاق، بصفتك كيانًا تجاريًا فإن من مسؤوليتك توفير وصول متساوٍ إلى موقع الويب الخاص بك للأشخاص ذوي الاحتياجات الخاصة والمشاكل البصرية عمومًا، وذلك لأن موقع الويب الذي يمكن الوصول إليه يساعد الأشخاص ذوي الاحتياجات الخاصة أو المشاكل البصرية على المشاركة بفاعلية في المجتمع.
</p>

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

<h3 id="-2">
	الامتثال للقانون
</h3>

<p>
	تُعد إمكانية الوصول إلى الويب مطلبًا قانونيًا في العديد من البلدان. على سبيل المثال في الولايات المتحدة ينُص قانون <a href="https://www.eeoc.gov/statutes/rehabilitation-act-1973" rel="external nofollow">إعادة تأهيل القوى العاملة لعام 1973</a> على أن تكون تكنولوجيا المعلومات والاتصالات التي توفرها الوكالات الفيدرالية متاحة للأشخاص ذوي الاحتياجات الخاصة. وفي حالة عدم تمكن المستخدمون ذوو الاحتياجات الخاصة من الوصول إلى المعلومات الهامة بسبب عدم إمكانية الوصول إلى موقع الويب الخاص بك، فقد يقاضون شركتك بسبب التمييز الرقمي، ففي عام 2018 وحده رُفِع <a href="https://www.microassist.com/digital-accessibility/accessibility-news-legal/" rel="external nofollow">ما يقرب من 2,250 دعوى قضائية</a> في المحكمة الفيدرالية في الولايات المتحدة بسبب هذه المشكلة.
</p>

<h3 id="-3">
	تعزيز سمعة العلامة التجارية
</h3>

<p>
	إن توفير إمكانية الوصول إلى موقع الويب الخاص بك سيكون له تأثيرًا إيجابيًا على سمعة علامتك التجارية، حيث ستظهر على أنها علامةً تجاريةً تولي اهتمامًا اجتماعيًا وتُعنى بالآخرين، وسيؤدي ذلك في النهاية إلى تحسين صورة <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%A7%D9%84%D8%B9%D9%84%D8%A7%D9%85%D8%A9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A%D8%A9-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-%D9%81%D9%8A-%D9%82%D8%B1%D8%A7%D8%B1-%D8%A7%D9%84%D8%B4%D8%B1%D8%A7%D8%A1-%D9%85%D9%83%D9%88%D9%86%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%84%D8%A7%D9%85%D8%A9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A%D8%A9-r486/" rel="">علامتك التجارية</a> بين جمهورك بأكمله، مما سيترتب عليه زيادة في المبيعات. لقد أظهرت الأبحاث أن <a href="https://www.slideshare.net/accenture/accenture-global-from-me-to-we-the-rise-of-the-purposeled-brand" rel="external nofollow">62٪ من المستهلكين</a> يفضلون شراء <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">المنتجات</a> من الشركات التي تتبنى قضايا تعكس قيمهم، بينما يتجنبون التعامل مع الشركات التي لا تفعل ذلك، لذا يُرجى التأكد من أن موقع الويب الخاص بك وبشركتك تتحلى بالمسؤولية الاجتماعية من خلال إعطاء الأولوية لإتاحة الوصول إلى موقع الويب.
</p>

<h3 id="-4">
	الوصول إلى سوق كبير
</h3>

<p>
	تُشير التقارير إلى أن حوالي <a href="https://websitesetup.org/websites-for-visually-impaired/" rel="external nofollow">واحدًا من كل أربعة بالغين</a> في الولايات المتحدة يعاني من إعاقة أو مشكلة بصرية ما، وحتى إذا لم يكن الأشخاص ذوو الاحتياجات الخاصة هم عملاؤك الأساسيون، فإن من المرجح أنهم يشكلون جزءًا واضحًا من جمهورك؛ فهل تعتقد أن هؤلاء المستهلكين سوف يتسوقون من موقع ويب لا يمكن الوصول إليه وصعب استخدامه؟
</p>

<p>
	هناك <a href="https://www.toptal.com/designers/ui/importance-web-accessibility" rel="external nofollow">ما يفوق 80٪ من الأشخاص ذوي الاحتياجات الخاصة</a> لديهم قلة ثقة في مزود الخدمة بسبب المشاكل التي تنشأ بسبب صعوبات الوصول غير المرضية إلى الويب، وفي دراسة استقصائية في المملكة المتحدة، تبين أن <a href="https://www.boia.org/blog/over-2250-web-accessibility-lawsuits-filed-in-2018-could-they-triple-in-2019" rel="external nofollow">4 مليون شخص</a> تخلى عن موقع ويب للتجزئة في عام 2019 بسبب صعوبات الوصول، مما أدى إلى خسارة تقدر بحوالي 17.1 مليار جنيه إسترليني أو ما يساوي 24 مليار دولار.
</p>

<p>
	عليك أيضًا أن تأخذ في الحسبان أن مستخدمي الإنترنت الذين يعتمدون على أجهزة مساعدة لديهم قوة شرائية هائلة <a href="https://www2.stardust-testing.com/en/why-web-accessibility-important" rel="external nofollow">تفوق 350 مليار دولار</a> في الولايات المتحدة فقط، فمن خلال استهداف هذا السوق بفعالية فإنك تضع عملك أمام جمهور عادة ما يكون مستعدًا لدفع مزيد من المال مقابل خدمة متميزة.
</p>

<h3 id="-5">
	تحسين محركات البحث وتجربة المستخدم
</h3>

<p>
	تتطابق أفضل ممارسات إمكانية الوصول إلى الويب مع تلك الخاصة <a href="https://academy.hsoub.com/files/28-%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A5%D9%84%D9%89-%D8%AA%D8%AD%D8%B3%D9%8A%D9%86-%D9%85%D8%AD%D8%B1%D9%83%D8%A7%D8%AA-%D8%A7%D9%84%D8%A8%D8%AD%D8%AB-seo/" rel="">بتحسين محركات البحث</a> و<a href="https://academy.hsoub.com/programming/general/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9-%D9%84%D9%84%D8%AC%D9%88%D8%A7%D9%84-%D9%85%D8%A7-%D8%A8%D9%8A%D9%86-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA%D9%87-%D9%88%D9%83%D9%8A%D9%81-%D8%AA%D8%B5%D8%A8%D8%AD-%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9-%D8%B5%D8%AF%D9%8A%D9%82%D8%A9-%D9%84%D9%87-r841/" rel="">تصميم الويب للجوال</a>، مثل السرعة في تحميل صفحات موقع الويب، وضمان <a href="https://academy.hsoub.com/design/user-experience/%D8%A5%D9%85%D9%83%D8%A7%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84-%D9%84%D8%A5%D8%AA%D8%A7%D8%AD%D8%A9-%D8%B3%D9%87%D9%88%D9%84%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%84%D9%84%D8%AC%D9%85%D9%8A%D8%B9-r761/" rel="">سهولة استخدام</a> موقع الويب الخاص بك. فعلى سبيل المثال: يُعد إضافة نص بديل ALT إلى الصور والترجمة transcripts إلى مقاطع الفيديو، من أفضل الممارسات لكل من إمكانية الوصول إلى الويب وتحسين محركات البحث.
</p>

<p>
	تتطلب إمكانية الوصول إلى الويب أيضًا أن يكون موقع الويب الخاص بك منظمًا جيدًا للغاية، فمن حيث بنية التنقل والعناوين الرئيسية والعناوين الفرعية والمحتوى والمزيد، فتلك الممارسات لن تؤدي إلى تحسين جهود تحسين محركات البحث الخاصة بك فقط ولكن أيضًا ستؤدي إلى <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-r149/" rel="">تجربة المستخدم</a> الشاملة وسهولة استخدام موقعك.
</p>

<p>
	أخيرًا، أفضل ممارسة لإمكانية الوصول إلى الويب هي وجود شيفرة برمجية نظيفة، سيؤدي ذلك إلى موقع ويب أفضل بوجه عام، مع عدد أقل من الأخطاء ووقت تحميل أسرع.
</p>

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

<ol>
	<li>
		السمعي (بما في ذلك الصمم وضعاف السمع).
	</li>
	<li>
		المعرفي (بما في ذلك صعوبات التعلم، والتشتت، وعدم القدرة على تذكر كميات كبيرة من المعلومات).
	</li>
	<li>
		البصري (بما في ذلك العمى وضعف البصر وعمى الألوان).
	</li>
	<li>
		الحركي (بما في ذلك عدم القدرة على استخدام الفأرة، ووقت الاستجابة البطيء، والتحكم المحدود في الحركة).
	</li>
	<li>
		العصبي.
	</li>
	<li>
		البدني.
	</li>
	<li>
		الكلامي.
	</li>
</ol>

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

<h2 id="-6">
	ثلاث أدوات يستخدمها ضعاف البصر لتصفح الويب
</h2>

<p>
	ستكون عملية جعل موقع الويب الخاص بك متاحًا أو سهل الوصول إليه أكثر واقعيةً إذا فهمت كيف يتنقل الأشخاص ضعاف البصر في موقعك. وفيما يلي الأدوات الأكثر شيوعًا التي يستخدمها ضعاف البصر لتصفح الويب.
</p>

<h3 id="1">
	1. قارئات الشاشة
</h3>

<p>
	تُعَد برامج قراءة الشاشة أدوات مهمة تُمَكن المستخدمين من الوصول إلى محتوى مواقع الويب بطريقة مختلفة، حيث تعمل هذه البرامج على تحويل النص والمحتويات الأخرى إلى كلام مركب، مما يسمح للمستخدمين تصفح المحتوى بطرائق متنوعة، كما يمكن للمستخدمين التحكم في هذه الأدوات لقراءة المحتوى بترتيبات مختلفة، مثل قراءة النص من الأعلى إلى الأسفل، أو بسطر واحد في كل مرة، أو حسب العناوين، أو حسب الروابط أو غيرها.
</p>

<p>
	يمكن استخدام بعض برامج قراءة الشاشة الشائعة مثل <a href="https://support.freedomscientific.com/JAWSHQ/JAWSHeadquarters01" rel="external nofollow">JAWS</a> و <a href="https://www.nvaccess.org/" rel="external nofollow">NVDA</a> و VoiceOver، وأجهزة القراءة باللمس بواسطة الصم والمكفوفين، التي تحول النص إلى نظام برايل القابل للقراءة باللمس. بالإضافة إلى ذلك، تحتوي الهواتف الذكية والأجهزة اللوحية على قارئات شاشة مدمجة يمكن استخدامها بواسطة اللمس أو التمرير.
</p>

<h3 id="2">
	2. المتصفحات الخاصة
</h3>

<p>
	صُممت المتصفحات المخصصة، مثل: <a href="https://www.webbie.org.uk/webbrowser/index.htm" rel="external nofollow">WebbIE</a> و <a href="https://donation.eia-international.org/accessibility" rel="external nofollow">EIA</a> و PnC Net خصيصًا لتلبية احتياجات المستخدمين ضعاف البصر، وتمتاز هذه المتصفحات بقدرتها على اكتشاف <span ipsnoautolink="true">بنية </span><a href="https://academy.hsoub.com/programming/general/%D9%85%D8%A7-%D9%87%D9%8A-%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D8%A7%D9%84%D9%88%D9%8A%D8%A8%D8%9F-r2094/" rel="">صفحات الويب</a> وتوفير المعلومات بطريقة تناسب المستخدم. ومع ذلك، يوجد جانب سلبي للمتصفحات المخصصة وهو أنها غير متطورة كما المتصفحات الشائعة، مثل جوجل كروم Google Chrome أو سفاري Safari، وبالتالي قد لا تدعم بعض الميزات الجديدة، مثل التكامل مع التطبيقات والإضافات، وقد لا تكون متاحة على جميع أنواع الأجهزة.
</p>

<h3 id="3">
	3. مكبرات الشاشة
</h3>

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

<h2 id="-7">
	المشكلات الشائعة التي يواجهها ذوي المشاكل البصرية عند تصفح الويب
</h2>

<p>
	لضمان فهمنا للتحديات التي يواجهها الأشخاص ضعاف البصر على الإنترنت، يجب أن نكون على دراية بماهية هذه الفئة من الأفراد، فتنقسم الإعاقات والمشاكل البصرية إلى ثلاث فئات رئيسية كما يلي:
</p>

<ol>
	<li>
		<strong>العمى التام</strong>: يشمل هذا النوع الأشخاص الذين يعانون من فقدان تام للرؤية حيث يكون مجالهم البصري معدومًا، ومع ذلك فإن معظم الأشخاص المصنفين كـ <strong>مكفوفين قانونيًا</strong> (بمجال بصري يبلغ 20 درجة) تكون لديهم بعض القدرة البصرية.
	</li>
	<li>
		<strong>ضعف البصر</strong>: يشمل هذا النوع الأشخاص الذين لا يمكن تصحيح رؤيتهم إلى ما يقرب من 20/20، ويُعَد ضعف البصر أكثر شيوعًا بين كبار السن.
	</li>
	<li>
		<strong>عمى الألوان</strong>: تخص الأشخاص الذين يعانون من عدم القدرة على رؤية الألوان بشكل طبيعي، وتشتهر أيضًا هذه الإعاقة باسم <strong>نقص رؤية الألوان</strong>.
	</li>
</ol>

<p>
	ولقد أجرت منظمة <a href="https://webaim.org/" rel="external nofollow">WebAIM</a> تقييمًا لإمكانية الوصول على مليون صفحة رئيسية، واكتشفت أن <a href="https://webaim.org/projects/million/" rel="external nofollow">97.4٪</a> منها تحتوي على انتهاكات يمكن اكتشافها باستخدام مبادئ الوصول إلى محتوى الويب <a href="https://www.w3.org/TR/WCAG20/" rel="external nofollow">WCAG 2.0</a>، وتشمل بعض الانتهاكات الشائعة ما يلي:
</p>

<ul>
	<li>
		نص ضعيف التباين.
	</li>
	<li>
		نص بديل مفقود للصور.
	</li>
	<li>
		روابط فارغة.
	</li>
	<li>
		عدم تسمية إدخالات النماذج.
	</li>
	<li>
		أزرار فارغة.
	</li>
	<li>
		غياب لغة المستند.
	</li>
</ul>

<p>
	وفيما يلي بعض المشكلات الشائعة التي يواجهها الأشخاص ضعاف البصر عند استخدام مواقع الويب.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="150078" href="https://academy.hsoub.com/uploads/monthly_2024_05/002-common-issues-visually-impaired-people-face-on-a-website(Arabic).png.fd569ff308c0588d39ac625e9c7b9d87.png" rel=""><img alt="002-common-issues-visually-impaired-people-face-on-a-website(Arabic).png" class="ipsImage ipsImage_thumbnailed" data-fileid="150078" data-ratio="86.21" data-unique="eumnavwzi" style="width: 500px; height: auto;" width="696" src="https://academy.hsoub.com/uploads/monthly_2024_05/002-common-issues-visually-impaired-people-face-on-a-website(Arabic).thumb.png.3cf68c1eb44deb9ef633527d145f7295.png"></a>
</p>

<h3 id="-8">
	المناطق التي لا يمكن الوصول إليها عبر قارئ الشاشة
</h3>

<p>
	توجد بعض التحديات في الوصول إلى بعض أنواع المحتوى عبر برامج قراءة الشاشة، فيُعد المحتوى البصري مثل الصور وجداول البيانات والرسومات صعب الوصول إليها باستخدام هذه الأدوات؛ فعلى سبيل المثال، يصعب على قارئ الشاشة فهم العلاقة بين البيانات الموجودة في الصفوف والأعمدة إذا لم تُضع مكونات <a href="https://wiki.hsoub.com/HTML" rel="external">HTML</a> المناسبة لجداول البيانات. وينطبق الأمر نفسه على الصور، حيث لا يمكن لقارئ الشاشة تحليل المعنى الموجود في الصورة، لذا يحتاج المحتوى البصري إلى وجود نص بديل ALT يمكن فهمه من قبل قارئ الشاشة. وبالإضافة إلى ذلك، يجب توفير وسائل لوصول المستخدمين ضعاف البصر إلى العناصر التفاعلية، مثل القوائم ومعلومات التمرير بالفأرة والنص القابل للطي ومشغلات الوسائط، ويُنفذ ذلك من خلال وضع مكونات HTML المناسبة لهذه العناصر وتسميتها بطريقة صحيحة.
</p>

<h3 id="-9">
	محتوى الصفحة غير منظم مع العناوين
</h3>

<p>
	بينما يمكن للمستخدم الذي لا يعاني من مشكلات بصرية فحص صفحة الويب وفهم طريقة تنظيمها بناءً على التخطيط أو القرب أو التصميم المرئي، يواجه قارئ الشاشة صعوبةً في ذلك. وحتى يتمكن الأشخاص ضعاف البصر من الحصول على تجربة ويب مماثلة، يكون ذلك من خلال الهيكل المنظم للصفحة الذي يتضمن العناوين ذات الصلة وارتباطات التعليمات البرمجية، فبدون هذه العناصر يكون المحتوى غير منظم وغير قابل للفهم بالنسبة لهؤلاء الأفراد.
</p>

<h3 id="-10">
	العناوين لا تتبع هيكل
</h3>

<p>
	يُعد التسلسل المنطقي والدلالي في العناوين أمرًا بالغ الأهمية لمستخدمي قارئات الشاشة. فمن خلال استخدام برامج قراءة الشاشة، يعتمد المستخدمون الذين يعانون من ضعف البصر على تلك الأدوات للبحث عن المعلومات ذات الصلة والأقسام التي يهتمون بها، ولتنفيذ ذلك يعتمدون على وظيفة تقدمها تلك الأدوات تسرد لهم العناوين. ومن هنا تكمن أهمية استخدام العناوين، وليس فقط استخدامها، بل استخدامها بتسلسل منطقي ومنظم.
</p>

<h3 id="-11">
	روابط وأزرار بدون وصف
</h3>

<p>
	عندما يتعلق الأمر بإمكانية الوصول يجب أن تولي اهتمامًا خاصًا لروابط وأزرار الويب، فبعض مستخدمي قارئ الشاشة يستخدمون وظيفةً تسرد جميع الروابط الموجودة على الصفحة للبحث عن موارد محددة، وفي هذه الحالة فإن وجود روابط أو أزرار بدون وصف واضح لهما (مثل: "انقر هنا") قد يكون غير فعال ومحبط للمستخدمين ضعاف البصر.
</p>

<p>
	أحد أسوأ السيناريوهات هو وجود روابط أو أزرار فارغة أو <a href="https://academy.hsoub.com/programming/general/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D8%B9%D9%86%D9%88%D8%A7%D9%86-url-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r1435/" rel="">عناوين URL</a> غير صالحة، فإذا كان هناك روابط معطلة على موقع الويب الخاص بك، فسوف يشعر القراء بالارتباك وستتأثر تجربتهم العامة سلبيًا، لذلك تأكد من أن جميع أزرار الدعوة لاتخاذ إجراء قابلة للنقر وتوجه المستخدمين إلى الصفحات المقصودة بطريقة صحيحة.
</p>

<h3 id="-12">
	الإدخالات بدون تسميات مرتبطة
</h3>

<p>
	يُعد وجود تسميات مرتبطة أمرًا هامًا لتعزيز فهم المستخدمين للإدخالات المطلوبة في عناصر تحكم النماذج، وذلك لأن عناصر تحكم النماذج تعمل كوسيط بين المستخدم <a href="https://academy.hsoub.com/devops/servers/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AE%D8%A7%D8%AF%D9%85-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-r574/" rel="">والخادم</a> في الواجهة الأمامية للمستخدم، مثل مربعات القائمة وأزرار الاختيار وأزرار الأوامر؛ فعلى سبيل المثال، إذا لم تُضاف تسميات مناسبة ومنطقية للإدخالات، فقد يكون من الصعب على المستخدمين ضعاف البصر إكمال النموذج بنجاح، وفي حالة ما إذا كان هناك حقول يجب ملؤها، فمن المهم وجود تسميات توضح ما يجب إدخاله في تلك الحقول (مثل الاسم واللقب وعنوان البريد الإلكتروني وما إلى ذلك)، ويجب أن تكون مُرَتبة ترتيبًا منطقيًا بحيث يكون هناك زر "إرسال" في نهاية النموذج.
</p>

<h3 id="-13">
	المحتوى لا يمكن الوصول إليه بواسطة لوحات المفاتيح
</h3>

<p>
	يعتمد معظم مستخدمي قارئ الشاشة على لوحة المفاتيح كأداة رئيسية للوصول إلى الويب، ومن ثَمَّ يصبح المحتوى الذي يتطلب استخدام الفأرة أو شاشة اللمس (مثل النقر على روابط) غير قابل للوصول لهؤلاء المستخدمين، لذلك تُعد هذه المسألة ذات أهمية كبيرة، ليس فقط للأفراد ضعاف البصر ولكن أيضًا لأولئك الذين يعتمدون على لوحة المفاتيح بسبب صعوبات حركية.
</p>

<h3 id="-14">
	معلومات اللغة مفقودة
</h3>

<p>
	تَفترض برامج قراءة الشاشة أن كل المحتوى الموجود على موقع الويب يكون باللغة الافتراضية للمستخدم، ويمكن أن يؤدي ذلك إلى حدوث مشكلات عندما يقرأ البرنامج المحتوى بلغة أجنبية باستخدام قواعد نطق اللغة الافتراضية للمستخدم. فقد يكون النص مثلًا مزيجًا من لغاتٍ متعددة (مثل، "انقر بزر الفأرة الأيسر على قائمة "Start" من شريط المهام") في مثل هذه الحالات يمكن أن يشعر المستخدمون بالارتباك إذا لم يكن برنامج قراءة الشاشة مُعدًّا لقواعد النطق اللازمة لتلك اللغات المختلفة.
</p>

<h2 id="-15">
	خاتمة
</h2>

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

<p>
	فعندما يُصمم موقع الويب بعناية مع الاهتمام بتوفير إمكانية الوصول لذوي المشاكل البصرية، فهو بذلك يُتيح لهؤلاء الأشخاص الاستفادة الكاملة من المحتوى والخدمات التي يقدمها موقعك، مما يعزز قدرتهم على المشاركة الفعّالة في المجتمع الرقمي.
</p>

<p>
	بالإضافة إلى ذلك، يساعد تصميم موقع إلكتروني سهل الاستخدام لذوي الإعاقات والمشاكل البصرية على تحسين سمعة علامتك التجارية وزيادة الوعي بقيمتك الاجتماعية، كما ويعكس اهتمامك بتوفير تجربة متاحة للجميع قيمك وأخلاقك التجارية.
</p>

<p>
	ترجمة -وبتصرف- للمقال <a href="https://websitesetup.org/websites-for-visually-impaired/" rel="external nofollow">Building a User-Friendly Website for the Visually Impaired</a>.
</p>

<h2 id="-16">
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/programming/html/%D8%B4%D9%85%D9%88%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%B3%D9%87%D9%88%D9%84%D8%A9-%D9%88%D8%B5%D9%88%D9%84-%D8%AC%D9%85%D9%8A%D8%B9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D9%8A%D9%86-%D9%84%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D9%85%D9%88%D9%82%D8%B9-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-r1640/" rel="">شمولية التصميم: سهولة وصول جميع المستخدمين لصفحات موقع الويب</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/programming/html/%D8%A7%D9%84%D8%AF%D9%84%D8%A7%D9%84%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B6%D9%85%D9%86%D8%A9-%D9%84%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%B5%D9%81%D8%AD%D8%A9-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-%D9%88%D8%AF%D9%88%D8%B1%D9%87%D8%A7-%D9%81%D9%8A-%D8%AA%D8%B9%D8%B2%D9%8A%D8%B2-%D8%B3%D9%87%D9%88%D9%84%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84-r1325/" rel="">الدلالات المضمنة لعناصر صفحة الويب ودورها في تعزيز سهولة الوصول</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/apps/productivity/google-drive/google-docs/%D8%AD%D8%B1%D9%88%D9%81-%D8%A8%D8%B1%D8%A7%D9%8A%D9%84-%D9%84%D9%85%D8%B3%D8%A7%D8%B9%D8%AF%D8%A9-%D8%A7%D9%84%D9%85%D9%83%D9%81%D9%88%D9%81%D9%8A%D9%86-%D9%81%D9%8A-%D9%85%D8%B3%D8%AA%D9%86%D8%AF%D8%A7%D8%AA-%D8%AC%D9%88%D8%AC%D9%84-r848/" rel="">حروف برايل لمساعدة المكفوفين في مستندات جوجل</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%B9%D9%88%D8%A7%D9%85%D9%84-%D8%A7%D9%84%D9%85%D8%A4%D8%AB%D8%B1%D8%A9-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r776/" rel="">العوامل المؤثرة في تجربة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A5%D9%85%D9%83%D8%A7%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84-%D9%84%D8%A5%D8%AA%D8%A7%D8%AD%D8%A9-%D8%B3%D9%87%D9%88%D9%84%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%84%D9%84%D8%AC%D9%85%D9%8A%D8%B9-r761/" rel="">إمكانية الوصول لإتاحة سهولة الاستخدام للجميع</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-interface/%D8%A3%D9%81%D8%B6%D9%84-%D8%A7%D9%84%D9%86%D8%B5%D8%A7%D8%A6%D8%AD-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r818/" rel="">أفضل النصائح لتصميم واجهة المستخدم</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">858</guid><pubDate>Sun, 19 May 2024 14:00:00 +0000</pubDate></item><item><title>&#x62A;&#x635;&#x645;&#x64A;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645; &#x641;&#x64A; &#x62A;&#x637;&#x648;&#x64A;&#x631; &#x627;&#x644;&#x628;&#x631;&#x645;&#x62C;&#x64A;&#x627;&#x62A;</title><link>https://academy.hsoub.com/design/user-experience/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%81%D9%8A-%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A7%D8%AA-r856/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2024_03/-----.png.983989730e3c8ef4b789374323ea0811.png" /></p>
<p>
	هل سبق وغادرت موقعًا إلكترونيًّا وأنت منزعج من عدم عثورك على معلومة ما؟ أو حذفت تطبيقًا مفيدًا لأنّك لم تتمكّن من استخدامه بسلاسة؟ هذه الظّاهرة شائعة للأسف، وعالم شبكة الإنترنت مليء بمثل هذه الأمثلة من تجارب الإستخدام السّيّئة.
</p>

<p>
	لنفترض أنّك قرّرت تصنيع منتج ما لكنّك مختلف عن أصحاب تلك المواقع والتّطبيقات المحيّرة، فأنت ستجعل تجربة المستخدم من أعلى أولويّاتك. ولكن كيف ستفعل ذلك؟ إنّ قراءتك مقالين من مجلات تصميم تجربة المستخدم لن يجعلك مصمّما محترفًا؛ بل حتّى توظيفك للمصمّمين والمطوّرين المحترفين لن يضمن لك إنشاء تجربة مستخدم ممتازة. ولعلّ أفضل طريقة لتحقيق ذلك هي اعتماد عمليّة قائمة بذاتها في تصميم تجربة المستخدم.
</p>

<h2 id="">
	التفسير العلمي لعملية تصميم تجربة المستخدم
</h2>

<p>
	يقول الكاتب والمصمّم المحترف جويل مارش Joel Marsh في كتابه "تجربة المستخدم للمبتدئين UX for Beginners":
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		"تتعدّى تجربة المستخدم الأزرار والأطر السّلكيّة، فهذه الأشياء البديهيّة ليست سوى الجزء الظّاهريّ من العمليّة؛ أمّا عناصرها المهمّة حقّا فمخفيّة تمامًا".
	</p>
</blockquote>

<p>
	يُعَد التّصميم مكوّنًا واحدًا فقط من خمسة مكوّنات في <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">تجربة المستخدم</a>:
</p>

<ul>
	<li>
		علم النّفس
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D9%82%D8%A7%D8%A8%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r728/" rel="">قابلية الاستخدام</a>
	</li>
	<li>
		التّصميم
	</li>
	<li>
		الكتابة
	</li>
	<li>
		التّحليل
	</li>
</ul>

<p>
	نظرًا لارتباط عمليّة <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r813/" rel="">تصميم تجربة المستخدم</a> بالإستراتيجيّة العامّة للعمل التّجاريّ، فإنّ وراءها كمًّا معتبرًا من العلم. ولهذا تنطوي عادةً على البحث والتّجربة والتّحليل.
</p>

<p>
	أيضًا، تتبع عمليّة تصميم تجربة المستخدم -كأيّ دراسة علميّة أخرى- المراحل العمليّاتيّة المعتادة:
</p>

<ol>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D8%A8%D8%AD%D8%AB-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D9%8F%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r29/" rel="">البحث</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D9%85%D8%B1%D8%AD%D9%84%D8%A9-%D8%A7%D9%84%D8%AB%D8%A7%D9%86%D9%8A%D8%A9-%D9%81%D9%8A-%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%AA%D9%81%D9%83%D9%8A%D8%B1-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85%D9%8A-%D9%85%D8%B1%D8%AD%D9%84%D8%A9-%D8%AA%D8%AD%D8%AF%D9%8A%D8%AF-%D8%A7%D9%84%D9%85%D8%B4%D9%83%D9%84%D8%A9-%D9%88%D8%AA%D9%81%D8%B3%D9%8A%D8%B1-%D8%A7%D9%84%D9%86%D8%AA%D8%A7%D8%A6%D8%AC-r690/" rel="">التّعريف</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D9%85%D8%B1%D8%AD%D9%84%D8%A9-%D8%A7%D9%84%D8%AB%D8%A7%D9%84%D8%AB%D8%A9-%D9%81%D9%8A-%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%AA%D9%81%D9%83%D9%8A%D8%B1-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85%D9%8A-%D9%85%D8%B1%D8%AD%D9%84%D8%A9-%D8%A7%D9%84%D8%AA%D9%81%D9%83%D9%8A%D8%B1-r697/" rel="">التّفكير</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D9%85%D8%B1%D8%AD%D9%84%D8%A9-%D8%A7%D9%84%D8%B1%D8%A7%D8%A8%D8%B9%D8%A9-%D9%81%D9%8A-%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%AA%D9%81%D9%83%D9%8A%D8%B1-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85%D9%8A-%D9%85%D8%B1%D8%AD%D9%84%D8%A9-%D8%A8%D9%86%D8%A7%D8%A1-%D8%A7%D9%84%D9%86%D9%85%D8%A7%D8%B0%D8%AC-%D8%A7%D9%84%D8%A3%D9%88%D9%84%D9%8A%D8%A9-r698/" rel="">النّموذج الأوليّ</a>
	</li>
	<li>
		التّجربة
	</li>
	<li>
		التّكرار
	</li>
</ol>

<p>
	ونذكر مقاربةً مختلفةً لهذه العمليّة ممثّلةً في نموذج "سباق التّصميم من جوجل" أو جوجل ديزاين سبرينت Google Design Sprint. وهي عمليّة تجري خلال 5 أيّام قصد الإجابة عن أسئلة العمل التّجاريّ المهمّة عبر التّصميم، وبناء النّموذج الأوّليّ، وتجربة الأفكار مع العملاء؛ وبذلك يعالج نموذج سبرينت القضايا الأساسيّة في عمليّة تجربة المستخدم كل قضية بيوم مخصص لها على الترتيب الآتية:
</p>

<ul>
	<li>
		<strong>التشريح</strong>: حيث تعرّف المشكلة، وتختار جهة التّركيز الأساسيّة لسباق التّصميم.
	</li>
	<li>
		<strong>التّخطيط</strong>: ونعني به الرّسم التّخطيطيّ الّذي يلجأ إليه الرّسّامون بقلم رصاص قبل العمل بالقلم الدّائم أو الألوان. وغايتك هنا رسم فكرة عامّة عن الحلّ.
	</li>
	<li>
		<strong>اتّخاذ القرار</strong>: حيث تختار الفكرة أو مجموعة الأفكار الّتي ستعتمدها في المرحلة القادمة، وتكتب من خلالها نظريّةً تعمل على تأكيدها أوتفنيدها.
	</li>
	<li>
		<strong>إنشاء النّموذج الأوّليّ</strong>.
	</li>
	<li>
		<strong>التّجريب</strong>: حيث تفسح المجال لمستخدمين حقيقيّين -ما بين 6 و20 شخصًا- لتجربة النّموذج الأوّليّ.
	</li>
</ul>

<p>
	اعتمد فريق آلتيكس سوفت AltexSoft نهجًا مشابهًا، وقابلًا التّخصيص الشّامل حسب تفاصيل مشروعك. وتتبع خطّة تطوير تجربة المستخدم عادةً المراحل التّالية:
</p>

<table>
	<thead>
		<tr>
			<th style="text-align:right">
				<strong>المرحلة</strong>
			</th>
			<th style="text-align:right">
				النّتائج
			</th>
			<th style="text-align:right">
				المنفّذون
			</th>
			<th style="text-align:center">
				النّشاطات
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="text-align:right">
				<strong>الاكتشاف</strong>
			</td>
			<td style="text-align:right">
				متطلّبات العمل والتّنفيذ الأساسيّة الموثّقة.
			</td>
			<td style="text-align:center">
				العميل - ممثّل المبيعات - محلّل الأعمال - مصمّم تجربة المستخدم
			</td>
			<td>
				يشارك العميل المتطلّبات عالية المستوى، وأهداف العمل مع الفريق.
			</td>
		</tr>
		<tr>
			<td style="text-align:right">
				<strong>التّحليل والبحث</strong>
			</td>
			<td style="text-align:right">
				هندسة المعلومات، وبنية الواجهة الأساسيّة للمنتج.
			</td>
			<td style="text-align:right">
				محلّل الأعمال - مصمّم تجربة المستخدم
			</td>
			<td style="text-align:center">
				يحلّل مصمّم تجربة المستخدم ومحلّل الأعمال BA المتطلّبات، ويحدّدان الجمهور المستهدف وشخصيّات المستخدمين، ويجريان البحث السّوق والمنافسين للتأكّد من أنّ المنتج المستقبليّ ممكن التّنفيذ قادر على المنافسية.
			</td>
		</tr>
		<tr>
			<td style="text-align:right">
				<strong>بناء النموذج الأوّليّ</strong>
			</td>
			<td style="text-align:right">
				الإطارات السّلكية للمنتج (في نموذجها الأوّليّ) وتمثيل بصريّ
			</td>
			<td style="text-align:right">
				مصمّم تجربة المستخدم - محلّل الأعمال - مهندسو البرامج ومصمّمو واجهة الاستخدام (في أدوار استشاريّة عرَضيَّة)
			</td>
			<td style="text-align:center">
				بناءً على المعلومات المحصّلة والموافَق عليها، يبني خبراء تجربة المستخدم الإطارات السّلكيّة المبدئيّة لمنتجك.
			</td>
		</tr>
		<tr>
			<td style="text-align:right">
				<strong>الاختبار والتّحسين</strong>
			</td>
			<td style="text-align:right">
				الإطارات السّلكيّة المحسّنة الّتي تلبّي متطلّبات المستخدم ومعايير الصّناعة، والمعدّة للتحوّل إلى تصاميم واجهة استخدام.
			</td>
			<td style="text-align:right">
				مصمّم تجربة المستخدم - مجموعة تركيز من المستخدمين
			</td>
			<td style="text-align:center">
				يجري خبراء آلتكس سوفت اختبارات قابلية الاستعمال الأوّليّة، ويحسّنون النّماذج الأوّليّة بناءً على التّغذية الرّاجعة.
			</td>
		</tr>
	</tbody>
</table>

<p>
	يمكن في هذه المرحلة التحقّق من فكرتك عبر أنواع الاختبار التّالية:
</p>

<ul>
	<li>
		اختبار الرِّواق: اختبار بسيط معدّ خصّيصًا لإجرائه مع عيّنة عشوائيّة من النّاس كعابرٍ في رواق المكتب، أو زائر للمحلّ؛ وهو موجّه للحصول على تغذية راجعة سريعة.
	</li>
	<li>
		اختبار قابليّة الاستعمال عن بعد (غير مراقَب): تجرى هذه العمليّة عادةً باستعمال أدوات خاصّة مثل موقع UserTesting.com أو Userlytics أو UserBob، والّتي تسمح لك بنشر نموذجك الأوّليّ والحصول على مراجعات من أناس حقيقيّين يختبرونه عن بعدٍ لقاء مقابل مادّيٍّ بسيط.
	</li>
	<li>
		اختبار خاضع للإشراف: هو اختبار شبيه بسابقه، غير أنّه أكثر تطلّبًا وتكلفة، إذ تحتاج فيه محاوِرًا فعليًّا يقود الاختبار، وأدوات تسجيلٍ وتعقّبٍ للعين لتوثيق العمليّة والنّتائج.
	</li>
	<li>
		مراجعة خبير: يعتمد اختبار قابليّة الاستخدام هذا على رأي خبيرٍ محايدٍ. ويتمثّل في وكالات متخصّصة أو قادة الصّناعة المعروفين عوض المستخدمين العاديّين.
	</li>
</ul>

<p>
	حسب مجموعة نيلسون نورمان the Nielsen Norman Group، فإنّ 80% من مشاكل قابليّة الاستعمال يحدّدها عادةً 5 مختبرين فقط، لذا لا حاجة في مرحلة بناء النّموذج الأوّليّ إلى مجموعات تركيز كبيرة، واستثماراث هامّة في العمليّة. ورغم هذا إلا أنّ لمرحلة الاختبار المبكّرة هذه قيمة عظيمة على المدى الطّويل. إذ إنّ اكتشافك وإصلاحك المشاكل الممكنة باكرًا يوفّر عليك الجهد والمال. وذلك أنّ إدخال تغييرٍ واحدٍ على الإطار السّلكي قد يستغرق ساعةً واحدةً، لكنّه يستغرقُ يومًا كاملًا إذا كنتَ تنوي إدخاله على تصميم واجهة المستخدم؛ وقد يستغرق وقتًا أطول وجهدًا أكبر بكثير إذا حاولتَ تنفيذهُ بعد إطلاق <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">المنتج</a>.
</p>

<p>
	طالما اتّبعتَ مقاربة <a href="https://academy.hsoub.com/entrepreneurship/business/%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86-%D9%84%D9%85%D9%86%D9%87%D8%AC%D9%8A%D8%A9-%D8%A3%D8%AC%D8%A7%D9%8A%D9%84-agile-r1047/" rel="">أجايل Agile</a> في تطوير منتجات االبرمجيّات فإنّ العمليّة الموصوفة أعلاه متكرّرة. ستقوم مع كلّ نسخة جديدة من منتجك بالاكتشاف، والتّحليل، وإنتاج النّموذج الأوّليّ، والاختبار، واعتماد الميزة الجديدة، ميزةً ميزةً. ولهذا فإنّ هذه العمليّة مفتوحة على الدوام.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="147766" href="https://academy.hsoub.com/uploads/monthly_2024_03/UXDesignProcess.png.9376dff0b7c30a09bfc0a4d6dc148e6d.png" rel=""><img alt="uxdesignprocess" class="ipsImage ipsImage_thumbnailed" data-fileid="147766" data-unique="2vvcfyq1w" style="width: 700px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2024_03/UXDesignProcess.thumb.png.2995432dcd5e6e272f7d63839a8d1bd1.png"> </a>
</p>

<h2 id="-1">
	صيانة المنتج وتطويره بعد نشره
</h2>

<p>
	لا مجال لتفنيد أهمية عملية تصميم تجربة المستخدم. ولكنّ هذا لا يغلق الباب أمام التّحسينات حتّى بعد إطلاق المنتج، خاصّةً في ظلّ التّطوّر السّريع للتّكنولوجيا، والارتفاع الكبير لتوقّعات المستخدمين.
</p>

<p>
	إنّ ضمان التّنافسيّة والرّبح منوطٌ بتأهّبك لهذه التّحدّيات، ولعلّ أفضل الطّرائق وأكثرها اقتصاديةً في تحسين منتجك بعد إطلاقه هي الاستثمار في استشارة احترافيّة لتجربة المستخدم.
</p>

<p>
	كمّ المعلومات في اختبارات قابلية الاستخدام المجراة في مرحلة التّصميم لا يمكن أن يقارَن بكمّ المعلومات القيّمة الّتي تجمعها بعد إطلاقك المنتج واستعمال النّاس له. وللاستفادة من تلك المعلومات يمكنك اتّباع الإجراءات التّالية:
</p>

<ul>
	<li>
		التّجريب: ويسمّى تجريب الخيارات أو التّجريب المنقسم: حيث تقدّم عدّة اختيارات للصّفحة أو العنصر ذاته وتكتشف أيّ تلك الاختيارات أفضل أداءً.
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AA%D8%AD%D9%84%D9%8A%D9%84-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%88%D9%86%D8%B5%D8%A7%D8%A6%D8%AD-%D9%84%D8%AA%D8%AD%D9%88%D9%8A%D9%84-%D8%A7%D9%84%D8%B2%D9%88%D8%A7%D8%B1-%D8%A5%D9%84%D9%89-%D8%B9%D9%85%D9%84%D8%A7%D8%A1-r678/" rel="">تحليل تجربة المستخدم</a>
	</li>
	<li>
		تدقيقات الواجهة
	</li>
	<li>
		تحسين معدّل التّحويل
	</li>
</ul>

<p>
	يجمع في هذه المرحلة مستشارو تجربة المستخدم المحترفون آراء المستخدمين، ويقيسون مؤشّرات الأداء المفتاحيّة، ويقدّمون إرشاداتٍ ونصائح قابلةً للتّنفيذ فيما يخصّ تحسين واجهة منتجك ومعدّل تحويلها. وهذه العمليّة عادةً ما تكون مخصّصةً لتناسب أهداف مشروعك، وتتطلّبُ أدواتٍ ومهاراتٍ خاصّةً.
</p>

<h2 id="-2">
	إثبات الجدوى الاقتصادية لتصميم تجربة المستخدم
</h2>

<p>
	من الأقوال الشّائعة أنّ كلّ دولار تستثمره في تجربة المستخدم يعود عليك بما قد يصل إلى 100 دولار من الإيرادات. وهو عائد مدهشٌ، ولكن كيف يتحقّق هذا فعليًّا؟ هناك أربعة مناطق يمكن أن تستفيد منها شركتك في هذا الشّأن:
</p>

<ul>
	<li>
		<strong>تجربة مستخدم أفضل تعني تحويلًا وعائدا أعلى</strong>: جاء في <a href="https://econsultancy.com/" rel="external nofollow">تقرير تحسين تجربة العميل</a> أنّ 94% من المستجيبين سجّلوا معدّلات تحويل أعلى نتيجة التزامهم بتجربة العميل. وحالة <a href="https://articles.uie.com/threehundmillion_button/" rel="external nofollow">زرّ الـ 300 مليون دولار</a> الشّهيرة مثال ممتاز عن السّهولة الّتي تصنع بها تحسينات تجربة المستخدم فارقًا؛ إذ رفعت الشّركة معدّل تحويلها بـ 45% بمجرّد إزالة العوائق من عمليّة التّسديد، وذلك بجعل التّسجيل اختياريًّا. وقد حقّق هذا زيادةً بـ 15 مليون دولار من الإيرادات في شهرٍ واحدٍ، ومجموع 300 مليون دولار من الإيرادات السّنوية.
	</li>
	<li>
		<strong>تجربة مستخدم أفضل تعني تكاليف ملكيةٍ وتطويرٍ أقلّ</strong>: يصف روبرت بريسمان Robert Pressman في كتابه "هندسة البرمجيّات: نهج ممارس" حالةً يمكن أن تساعدك فيها عملية تجربة المستخدم الحسنة على توفير المال على المدى البعيد، فيشرح أنّ المشكلة الّتي تكلّف دولارًا واحدًا لإصلاحها في مرحلة التّصميم، قد تكلّف 10 دولارات للإصلاح في مرحلة التّطوير، وربّما 100 دولار بعد <a href="https://academy.hsoub.com/entrepreneurship/planning/%D9%85%D8%A7-%D8%A7%D9%84%D8%B0%D9%8A-%D9%8A%D8%AC%D8%A8-%D8%B9%D9%84%D9%8A%D9%83-%D8%A7%D9%84%D9%82%D9%8A%D8%A7%D9%85-%D8%A8%D9%87-%D8%A8%D8%B9%D8%AF-%D8%A5%D8%B7%D9%84%D8%A7%D9%82-%D9%85%D9%86%D8%AA%D8%AC%D9%83%D8%9F-r256/" rel="">إطلاق المنتج</a>.
	</li>
</ul>

<p style="margin-right: 40px;">
	وتُظهر <a href="https://www.usability.gov/what-and-why/benefits-of-ucd.html" rel="external nofollow">دراسةُ</a> أنّ 50% على الأقلّ من وقت وجهود التّطوير إنّما يُقضى في تغييراتٍ وتصليحاتٍ كان يمكن تفاديها. فإذا افترضنا فريقًا من 4 أشخاص تسعيرتهم 50 دولارًا للسّاعة الواحدة، فإنّ ذلك سيكلّف 4000 دولار من المال المهدور أسبوعيًّا، وما يفوق 200 ألف دولار سنويًّا.
</p>

<ul>
	<li>
		<strong>تجربة مستخدم أفضل تعني احتفاظًا أعلى بالمستخدمين وولاءً أكبر للعلامة التّجاريّة</strong>: تُظهر <a href="https://techcrunch.com/2016/05/31/nearly-1-in-4-people-abandon-mobile-apps-after-only-one-use/" rel="external nofollow">دراسةٌ</a> أنّ 23% من المستخدمين يزيلون تطبيقًا ثبّتوه بعد استخدام واحدٍ فقط، وأنّ 62% يستخدمونه أقلّ من 11 مرّةً. وقد لا تكون تجربة المستخدم هي المنفّر الوحيد لمستخدميك، ولكنّها بالتّأكيد واحدةٌ من الأشياء الّتي يمكنك، بل ويجدر بك، تصليحها.
	</li>
</ul>

<p style="margin-right: 40px;">
	إذا أردت الاحتفاظ بالمستخدمين، فيجب أن يكون ما تعرضه سهلَ الاستعمال ومُرضيًا بغضّ النّظر عن منتجك أو خدمتك. سواءٌ قدّمتَ موقعًا تجاريًّا، أو تطبيق إنتاجيّةٍ؛ إذا كان محيِّرًا فإنّه لن يبلي حسنًا. وسيهجره غالب المستخدمين ويستخدمون أيّ بديل يقدّم تجربة مستخدمٍ أفضل. وإذا افترضنا أنّك في المملكة العربيّة السّعودية حيث <a href="https://www.statista.com/outlook/dmo/ecommerce/saudi-arabia" rel="external nofollow">متوسّط شراء الفرد من الإنترنت سنويًّا هو 495 دولارًا</a>، فإنّ خسارتك لـ 100 مشترٍ محتملٍ سيضيّع عليك 49500 دولارًا من الإيرادات.
</p>

<ul>
	<li>
		<strong>تجربة مستخدم أفضل تعني كفاءةً أعلى بدعم أقلّ</strong> وينطبق هكذا انطباقًا أكبر على منتجات وتطبيقات الشّركات؛ إذ تتطلّب الأدوات البسيطة سهلة الاستعمال تدريبًا أقلّ، وتقلّل من نسبة الوقوع في الخطأ، كما تحسّن الفاعليّة في عمليّاتك التّجاريّة. تخيّل أنّ تحسين الفعاليّة التّنفيذيّة لفريق من 10 أشخاص بنسبة 10% فقط يمكن أن يُنتج 40 ساعة عمل إضافيّة، و1000 دولار أسبوعيًّا على اعتبار أنّ التّكلفة المتوسّطة للسّاعة الواحدة 25 دولارًا لكلّ موظّف.
	</li>
</ul>

<p>
	ومن أمثلة ذلك شركة مكافي McAfee Inc الّتي تمكّنت من خفض جهود وتكلفة الدّعم بنسبة 90%، وذلك ببساطةٍ بتوفيرها تصميمًا واضحًا ومدفوعًا بنظرة العميل. فإذا افترضنا أنّ مكالمة الدّعم الواحدة تكلّف 10 دولارات، فإنّ الشّركة خفّضت كلّ 100 مكالمة دعم إلى 10 فقط، ما يعني توفير 900 دولار.
</p>

<h2 id="-3">
	الدروس المستفادة
</h2>

<p>
	كتب سكوت جنسون Scott Jenson وهو محترف تجربة المستخدم ذا خبرة 30 سنة من العمل في آبل Apple، وسيمبيان Symbian، وجووجل Google:
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		"تجربة المستخدم الجيّدة سهلة، لكنّها ليست من الأولويّات".
	</p>
</blockquote>

<p>
	وبالفعل، إذ يفضّل العديد من المديرين التّنفيذيّين التّركيز على القيمة الحاليّة بدل إنشاء قاعدة للنّجاح المستقبليّ؛ وبرغم ضمان عائد الاستثمار على عمليّة تجربة المستخدم الفعّالة إلّا أنّه يبقى استثمارًا كبيرًا.
</p>

<p>
	لتحسين إستراتيجيّة تجربة المستخدم لديك، ورفع قيمة جهودة، يقترح موقع <a href="https://www.mckinsey.com/capabilities/growth-marketing-and-sales/our-insights/building-a-design-driven-culture" rel="external nofollow">مكينزي</a> أن تطرح على نفسك الأسئلة التّالية أولًا:
</p>

<ul>
	<li>
		هل لديك كبير مصمّمين ذا دور قياديّ وسلطة فعليَّة؟
	</li>
	<li>
		هل تراجع مقاييسك باستمرار؟
	</li>
	<li>
		هل يتعاون المصمّمون مع الأشخاص المناسبين في المنظّمة؟
	</li>
	<li>
		هل عرفت حقًّا ما يحفّز عملاءك؟
	</li>
	<li>
		كيف يمكنك تسريع العمليّة؟
	</li>
</ul>

<p>
	نظرًا لتوقّعات واحتياجات المستخدمين دائمة الارتفاع، فإنّ معايير المنتجات الجديدة عاليةٌ جدًّا هي الأخرى. ولهذا فإنّ امتلاك إستراتيجيّة تجربة مستخدم جيّدة تعبر عن جانبٌ مهم في الأعمال؛ كما أنّ التّصميم الجيّد لتجربة المستخدم ذو أثر كبير على عائد الاستثمار في الأعمال، ويلعب أيضًا دورًا كبيرًا في تطوير المنتجات البرمجيّة عمومًا، مساهمًا في إنشاء منتجاتٍ أعلى جودةً، وأكثر فائدةً واستمرارًا.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://www.altexsoft.com/blog/user-experience-ux-design-in-software-product-development-how-to-create-exceptional-product-value/" rel="external nofollow">User Experience (UX) Design in Software Product Development: How to Create Exceptional Product Value</a>
</p>

<h2 id="-4">
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%B9%D9%88%D8%A7%D9%85%D9%84-%D8%A7%D9%84%D9%85%D8%A4%D8%AB%D8%B1%D8%A9-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r776/" rel="">العوامل المؤثرة في تجربة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D9%81%D9%87%D9%85-%D8%A7%D9%84%D9%85%D8%B3%D8%A7%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D9%87%D9%86%D9%8A%D8%A9-%D9%84%D9%85%D8%AC%D8%A7%D9%84-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r713/" rel="">دليلك الشامل لفهم المسارات المهنية لمجال تجربة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r813/" rel="">الدليل الشامل لتصميم تجربة المستخدم UX</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D9%85%D9%87%D8%A7%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D8%B4%D8%AE%D8%B5%D9%8A%D8%A9-%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A9-%D9%84%D9%84%D9%86%D8%AC%D8%A7%D8%AD-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r810/" rel="">المهارات الشخصية الأساسية للنجاح في تصميم تجربة المستخدم UX</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%A3%D8%B3%D8%A8%D8%A7%D8%A8-%D8%A7%D9%84%D8%AA%D9%8A-%D8%AA%D8%AF%D9%81%D8%B9%D9%83-%D9%84%D8%AA%D8%B5%D8%A8%D8%AD-%D9%85%D8%B5%D9%85%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r740/" rel="">الأسباب التي تدفعك لتصبح مصمم تجربة مستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A3%D9%87%D9%85-%D8%A7%D8%AA%D8%AC%D8%A7%D9%87%D8%A7%D8%AA-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-%D9%88%D8%A7%D9%84%D8%AA%D9%8A-%D9%8A%D8%AC%D8%A8-%D9%85%D8%AA%D8%A7%D8%A8%D8%B9%D8%AA%D9%87%D8%A7-r837/" rel="">أهم اتجاهات تصميم تجربة المستخدم UX والتي يجب متابعتها</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">856</guid><pubDate>Mon, 01 Apr 2024 14:08:02 +0000</pubDate></item><item><title>&#x623;&#x647;&#x645; &#x627;&#x644;&#x62A;&#x642;&#x627;&#x631;&#x64A;&#x631; &#x627;&#x644;&#x644;&#x627;&#x632;&#x645;&#x629; &#x644;&#x62A;&#x635;&#x645;&#x64A;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645;</title><link>https://academy.hsoub.com/design/user-experience/%D8%A3%D9%87%D9%85-%D8%A7%D9%84%D8%AA%D9%82%D8%A7%D8%B1%D9%8A%D8%B1-%D8%A7%D9%84%D9%84%D8%A7%D8%B2%D9%85%D8%A9-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r855/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2024_03/-----.png.0113c791e0d14d0b5c6a2085aba87587.png" /></p>
<p>
	يحتاج خبراء تجربة المستخدم إلى مجموعة تقارير تساعدهم على تسهيل التواصل وتوثيق العمل وتوفير المعطيات اللازمة، مهما كانت بيئة عملهم.
</p>

<p>
	يعمل مصممو تجربة المستخدم في بيئات متنوعة، بدءًا من الشركات الناشئة الصغيرة والبيئات المرنة حيث تعمل الفرق دون الحاجة إلى الكثير من التوثيق، وصولًا إلى الأعمال الاستشارية لطرف ثالث والمؤسسات الكبيرة والهيئات الحكومية التي تفرض متطلبات توثيق صارمة. ومهما كانت طبيعة العمل وبيئته والروابط التي تجمع بين الأطراف المختلفة، يحتاج خبراء تجربة المستخدم إلى وسيلة لتوصيل أفكار التصميم ونتائج الأبحاث ومضمون المشاريع إلى الأطراف المعنية بكفاءة عالية.
</p>

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

<p>
	سنتحدث فيما يلي عن عشرة أنواع من التقارير التي يعمل مصمم تجربة المستخدم عادةً على إنشائها أثناء عمله، وهي بالطبع ليست قائمةً شاملة، بل يمكن توسيعها حسب طبيعة العمل.
</p>

<h2 id="1">
	1. أهداف العمل والمواصفات الفنية
</h2>

<p>
	وهي خطوة أساسية! بالنسبة لخبراء تجربة المستخدم، ينطلق الأمر من فهم رؤية المنتج، أي سبب وجود المنتج من منظور تجاري. يجب أن يكون بيان أهداف العمل مكتوبًا بلغة مبسطة، وأن يتضمن المشكلة المطروحة والحل المقترَح لها، مع وصف عامّ للسوق المستهدَف؛ بالإضافة إلى وصف منصات التسليم والتطرق قليلًا إلى الوسائل الفنية لتوصيل المنتج.
</p>

<p>
	لا داعي لأن يتجاوز طول هذا البيان صفحةً واحدة، لكن يجب أن يجيب عن الاستفسارت الأساسية للمشروع: "ما هو؟ لماذا؟ كيف؟"، كما في المثال التالي:
</p>

<p>
	"وجدت شركة Fantastic App Co فجوةً في تطبيقات تقديم الهدايا على منصات الهواتف المحمولة <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%B9%D8%A7%D8%AF%D8%A7%D8%AA-%D8%AC%D9%8A%D9%84-%D8%B7%D9%81%D8%B1%D8%A9-%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%84%D9%8A%D8%AF-%D9%81%D9%8A-%D8%A7%D9%84%D8%B4%D8%B1%D8%A7%D8%A1-r483/" rel="">لسوق جيل الألفية</a> (بنظام iOS أو أندرويد)، وتتمثل هذه الفجوة في معاناة عدد كبير من أفراد هذا الجيل من صعوبة في تذكر تواريخ المناسبات المميزة وتحديد الهدايا الأنسب، ثم إيجاد هذه الهدايا وشرائها. أوجدنا حلًا يخفف من هذا التوتر عبر التصميم الاستباقي بالاستفادة من أحدث تقنيات الذكاء الاصطناعي AI، ليقدم التطبيق تجربة مستخدم مفيدةً وساحرة".
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="146535" href="https://academy.hsoub.com/uploads/monthly_2024_03/02---.png.0715eec38e4890d416669de18f40deaf.png" rel=""><img alt="02 تطبيق تقديم هدايا" class="ipsImage ipsImage_thumbnailed" data-fileid="146535" data-unique="rso6wzuok" src="https://academy.hsoub.com/uploads/monthly_2024_03/02---.thumb.png.b3c0bb7a38962832dc1ef749ec732860.png"> </a>
</p>

<h2 id="2">
	2. تقرير التحليل التنافسي
</h2>

<p>
	يتعين على أي شخص يبدأ بتصميم منتج جديد أن يتحقق من مدى ملاءمته للسوق، وتتضمن خطة تجربة المستخدم ضرورة أن يملك المنتج ميزةً تنافسيةً مقنعة. وتجربة مستخدم تتفوق على غيرها من المنتجات الأخرى الموجودة في السوق.
</p>

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

<p>
	تتمثل إحدى المهام الأولية لمصمم تجربة المستخدم في إجراء بحث حول المنتجات أو الخدمات التي يستخدمها العملاء المستهدفون حاليًا لحل المشكلة المطروحة، فهل هناك منتج أو خدمة مكافئة؟ هل يستخدم الناس حلًا بديلًا جيدًا إلى حد ما لكنه ليس مثاليًا؟ هل الحل الموجود يخفف المشكلة لكن لا يحلها؟ ما الفرق الذي يمكن أن تُحدثه تجربة المستخدم الأفضل؟
</p>

<p>
	يحدد تقرير <a href="https://academy.hsoub.com/entrepreneurship/tips/%D8%A7%D9%84%D8%AA%D8%AD%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%AA%D9%86%D8%A7%D9%81%D8%B3%D9%8A-%D9%83%D9%8A%D9%81-%D9%8A%D8%B1%D9%89-%D8%B1%D8%A7%D8%A6%D8%AF-%D8%A7%D9%84%D8%A3%D8%B9%D9%85%D8%A7%D9%84-%D8%A7%D9%84%D8%B3%D9%88%D9%82-%D8%A7%D9%84%D9%85%D9%86%D8%A7%D9%81%D8%B3%D8%A9-%D9%84%D9%85%D9%86%D8%AA%D8%AC%D9%87-%D8%A7%D9%84%D8%AC%D8%AF%D9%8A%D8%AF%D8%9F-r719/" rel="">التحليل التنافسي</a> أبرز خمسة منافسين ويدرس الإجراءات الصحيحة والخاطئة التي يقدمون عليها، وهو جزء من أبحاث تجربة المستخدم. تساعد هذه الخطوة على تحديد اتجاه التصميم من خلال تعيين أهداف واضحة وتحديد العناصر التي يجب التركيز عليها.
</p>

<p>
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpg" data-fileid="148852" href="https://academy.hsoub.com/uploads/monthly_2024_04/03--_-.jpg.969d0ee55872cba4a4b23eda37247cc7.jpg" rel=""><img alt="03-تحليل-تنافسي_معرب-.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="148852" data-ratio="53.67" data-unique="tb93wvhw6" width="900" src="https://academy.hsoub.com/uploads/monthly_2024_04/03--_-.thumb.jpg.66aab58a48e1290fcc59a897e500a26e.jpg"></a>
</p>

<p style="text-align: center;">
	تحليل تنافسي يقارن بين ثلاثة تطبيقات دردشة.
</p>

<p>
	يوضح الجدول الأول (قائمة المنافسين) عدد المستخدمين وتاريخ الإصدار والميزات والتكلفة ورابط التطبيق لكل من المنافسين، ويتضمن الجدول الثاني (التحليل التنافسي) مقارنة بين الميزات المتوفرة في التطبيقات.
</p>

<h2 id="3">
	3. شخصيات المستخدم وتقارير أبحاث تجربة المستخدم
</h2>

<p>
	يجب أن يضمن مصمم تجربة المستخدم فهم الأطراف المعنية لاحتياجات مستخدمي المنتج، ومن الطرائق المجرَّبة المفيدة لهذا الغرض إنشاء <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%AF%D8%AE%D9%84-%D9%86%D8%AD%D9%88-%D8%B4%D8%AE%D8%B5%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-personas-r688/" rel="">الشخصيات personas</a> التي تختصر أنماط سلوك المستخدم وتسهل شرحها، بالإضافة إلى إجراء أبحاث المستخدمين. تمثل الشخصيات المستخدمين النموذجيين للمنتج، وتبين أهدافهم واحتياجاتهم واهتماماتهم، مما يساعد فريق العمل على تفهم المستخدمين والتعاطف معهم.
</p>

<p>
	تُعَد <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%81%D9%8A-%D8%A8%D8%AD%D8%AB-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r797/" rel="">أبحاث المستخدمين</a> أيضًا جزءًا لا يتجزأ من عملية تصميم تجربة المستخدم، وتتضمن مجموعةً من التقنيات التي تساعد على استخلاص الأنماط السلوكية وإضافة مضمون مناسب وإعطاء توضيحات وتلميحات أثناء عملية التصميم. هناك أنواع مختلفة لأدوات وتقنيات أبحاث تجربة المستخدم، وتكمُن المهارة في حسن اختيار "العدسة" المناسبة لترى من خلالها بالدقة التي تريدها.
</p>

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

<p>
	في ختام مرحلة أبحاث المستخدمين، يجب إصدار تقرير يترجم نتائج البحث إلى بنود عملية قابلة للتنفيذ، ثم يطلَب من فريق تجربة المستخدم تصميم المنتج وفق هذه البنود.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpg" data-fileid="148853" href="https://academy.hsoub.com/uploads/monthly_2024_04/04--_--.jpg.790dd20b730f81cb9e6f176f62ea346b.jpg" rel=""><img alt="04--_معرب-شخصيات-المستخدم.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="148853" data-ratio="65.67" data-unique="mx4wy3q7h" style="width: 750px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2024_04/04--_--.thumb.jpg.2eb48d0fee27b5c7f91b1c54ac69f516.jpg"></a>
</p>

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

<h2 id="4">
	4. خرائط الموقع وهندسة المعلومات
</h2>

<p>
	خريطة الموقع sitemap هي عبارة عن نموذج منظَّم شكليًا لكل المكونات والمعلومات التي يتضمنها المنتج الرقمي، وهي تمثل تنظيمًا لمحتوى التطبيق أو الموقع، وتُعَد إلى جانب الإطارات الهيكلية، واحدةً من أهم تقارير تجربة المستخدم، والتي نادرًا ما يجري تخطيها في عملية تصميم تجربة المستخدم.
</p>

<p>
	تساعد <a href="https://academy.hsoub.com/apps/web/wordpress/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D8%AE%D8%B1%D9%8A%D8%B7%D8%A9-%D9%85%D9%88%D9%82%D8%B9%D9%83-sitemap-%D8%B9%D9%84%D9%89-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D9%85%D9%86-%D8%A3%D8%AC%D9%84-%D8%A3%D8%B1%D8%B4%D9%81%D8%A9-%D8%A3%D9%82%D9%88%D9%89-%D9%88%D8%AA%D8%B5%D9%86%D9%8A%D9%81-%D8%A3%D9%81%D8%B6%D9%84-%D8%B9%D9%84%D9%89-%D9%85%D8%AD%D8%B1%D9%83%D8%A7%D8%AA-%D8%A7%D9%84%D8%A8%D8%AD%D8%AB-r54/" rel="">خرائط الموقع</a> على تحديد هندسة المعلومات (الفن والعلم الذي يعنى بتنظيم مكونات المنتج وعنونتها) لدعم التنقل وإمكانية البحث وقابلية الاستخدام، وهي تساعد على التصنيف ووضع معالم واجهة المستخدم.
</p>

<p>
	تُعَد خرائط الموقع وسيلةً مرجعيةً سهلة الاستخدام وقابلةً للتعديل مع تطور المنتج على ضوء تكرار النماذج الأولية واختبار المستخدم. وأثناء سير عملية التصميم، غالبًا ما يُستخدَم نظام الترقيم منعًا للتشتت عند مناقشة محتوى <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">المنتج</a>.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpg" data-fileid="148854" href="https://academy.hsoub.com/uploads/monthly_2024_04/05----.jpg.59da691cddd8f2c2c934df48b4458340.jpg" rel=""><img alt="05--معرب-خريطة-موقع.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="148854" data-ratio="61.22" data-unique="sdxn02na1" width="900" src="https://academy.hsoub.com/uploads/monthly_2024_04/05----.thumb.jpg.14b0e7e8f95b10e0cca4ff5d07fde90f.jpg"></a>
</p>

<p>
	تتضمن خريطة الموقع تصنيفًا للأقسام الرئيسية والفرعية وتحت الفرعية، مع ترقيمها وترتيبها وفق مخطط يعبر عن مكونات الموقع ويمثل هندسة المعلومات فيه.
</p>

<h2 id="5">
	5. خرائط التجربة ورحلات المستخدم ومسارات المستخدم
</h2>

<p>
	خريطة التجربة experience map هي تمثيل بصري يوضح طريق المستخدم ضمن منتج أو خدمة (أهدافه واحتياجاته والوقت الذي يقضيه وأفكاره ومشاعره وردود أفعاله ومخاوفه وتوقعاته)، أي تجربته الشاملة عند تفاعله مع المنتج، وتُعرَض عادةً على جدول زمني خطي يبين نقاط الاتصال بين المستخدم والمنتَج.
</p>

<p>
	تدور كل من <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF-%D8%AE%D8%B1%D8%A7%D8%A6%D8%B7-%D8%B1%D8%AD%D9%84%D8%A9-%D8%A7%D9%84%D8%B9%D9%85%D9%8A%D9%84-r772/" rel="">رحلة المستخدم</a> user journey ومسار المستخدم user flow حول سلسلة الخطوات التي يتخذها المستخدم، وتمثل الطريقة التي يتفاعل المستخدم من خلالها حاليًا (أو التي من الممكن أن يتفاعل من خلالها)، وتعبر عن السلوك والأداء الوظيفي والمهام الرئيسية التي يمكن أن ينجزها المستخدم.
</p>

<p>
	تساعد دراسة وفهم مسار المستخدم في المهام المختلفة التي قد يجريها، على البدء بالتفكير في نوع المحتوى والوظائف التي يمكن إدراجها في واجهة المستخدم؛ بالإضافة إلى نوع الواجهة التي يحتاجها المستخدم لإنجاز هذه الوظائف.
</p>

<p>
	يدور الجزء الأكبر من تجربة المستخدم حول حل مشكلات المستخدمين. وعند إنشاء رحلة المستخدم، يتعين على المصمم فهم شخصية المستخدم وأهدافه ودوافعه ونقاط الألم التي يعاني منها حاليًا والمهام الرئيسية التي يريد إنجازها.ِِ
</p>

<p>
	ما الفرق بين <strong>رحلة المستخدم</strong> و<strong>مسار المستخدم</strong>؟ يركز مسار المستخدم على مهمة واحدة أو هدف محدد في المنتج أو الخدمة، أما رحلة المستخدم فتوضح الصورة الكبيرة، وتنظر نظرةً أبعد إلى المهام، وتبحث في مدى ملاءمة التفاعلات الفردية للمستخدم مع السياق العام بصورة مجملة.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpg" data-fileid="148855" href="https://academy.hsoub.com/uploads/monthly_2024_04/06--_-.jpg.e3c180a3c385167c95869cdee28887fb.jpg" rel=""><img alt="06-خريطة-تجربة_-معرب.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="148855" data-ratio="59.11" data-unique="zco32s9z5" width="900" src="https://academy.hsoub.com/uploads/monthly_2024_04/06--_-.thumb.jpg.32bc0bf7c139b0ea19891f117a8d6403.jpg"></a>
</p>

<p>
	أُعِدت خريطة التجربة أعلاه من ضمن عملية تصميم تجربة المستخدم. المستخدِم هنا هي مسؤولة وكالة إعلانية تريد نشر محتوى إعلاني رقمي للأجهزة المختلفة ليصل إلى فئة محددة من الجمهور، وتبين الصورة رحلتها في التعامل مع منصة نشر الإعلانات الرقمية من خلال أربع مراحل:
</p>

<ul>
	<li>
		الاستكشاف.
	</li>
	<li>
		وضع خطة إعلانية.
	</li>
	<li>
		التفاوض مع الناشر.
	</li>
	<li>
		إعداد خطة النشر.
	</li>
</ul>

<p>
	تتضمن الخريطة أفكار المستخدم ومشاعره ومخاوفه في كل مرحلة من هذه المراحل.
</p>

<h2 id="6">
	6. الإطارات الهيكلية لتجربة المستخدم
</h2>

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

<p>
	الإطارات الهيكلية هي أداة لا غنى عنها لمصمم تجربة المستخدم، وهي من أشهر تقارير المشروع، فعبارة "أرني مخططاتك الهيكلية" هي من أكثر العبارات المطروقة في مقابلة مصمم تجربة المستخدم.
</p>

<p>
	<a href="https://academy.hsoub.com/design/user-interface/%D8%A3%D8%AF%D9%88%D8%A7%D8%AA-%D9%85%D8%AC%D8%A7%D9%86%D9%8A%D8%A9-%D9%84%D8%B1%D8%B3%D9%85-%D8%A7%D9%84%D8%A5%D8%B7%D8%A7%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D9%87%D9%8A%D9%83%D9%84%D9%8A%D8%A9-wireframe-%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9-%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA-%D9%88%D8%A7%D9%84%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA-r726/" rel="">رسم الإطارات الهيكلية</a> هي مرحلة رئيسية من مراحل عملية تصميم تجربة المستخدم، وهي طريقة مجدية لاستكشاف الأفكار وإنشاء مفاهيم مبتكرة تعالج أهداف العملاء، كما أنها أداة رائعة لتوليد الأفكار بعد التخطيط، ولها أنواع عديدة تتراوح من منخفضة الدقة (بلا تصميم، مربعات بالأبيض والأسود، الكتابة غير واضحة) إلى عالية الدقة (مصممة بعناية وملونة ومفصَّلة جدًا).
</p>

<p>
	يمكن أن توفر الإطارات الهيكلية أو ما يسمى اختصارًا "الهيكل" في بيئة العمل، الكثير من الوقت والمال نظرًا لمرونتها العالية وسرعة إنتاجها، ، وهي بمثابة محور تدور حوله المحادثات مع الأطراف المعنية وأفراد الفريق أثناء تحديد اتجاه التصميم؛ كما أنها أداة أساسية ومفيدة في المساعدة على تحديد هيكل التصميم ومسار المستخدم عبر التطبيق أو الموقع في حالات الاستخدام المختلفة.
</p>

<p>
	هناك بعض التحولات المثيرة للاهتمام حول الإطارات الهيكلية مثل "خرائط الإطارات الهيكلية" بالإضافة إلى "المسارات الهيكلية"، وهي تقارير تجربة مستخدم وضعتها مجموعة نيلسن نورمان تدور حول سير العمل والتطبيقات.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpg" data-fileid="148856" href="https://academy.hsoub.com/uploads/monthly_2024_04/07----.jpg.f517dee6158d19cea58a6a9f761145ee.jpg" rel=""><img alt="07-معرب--إطار-هيكلي.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="148856" data-ratio="63.67" data-unique="zxl46ra9o" width="900" src="https://academy.hsoub.com/uploads/monthly_2024_04/07----.thumb.jpg.b75d5485aa7ef391b5aeed6fa533571b.jpg"></a>
</p>

<p>
	الإطارات الهيكلية المفصلة من أشهر أدوات تصميم تجربة المستخدم، وتظهِر الصور الإطار الهيكلي لشاشة موقع تسوق إلكتروني بشكل مخطط مبسَّط لكيفية تقسيم الشاشة، مع جدول على اليمين يوضح الأوامر المختلفة وحالات التعامل معها.
</p>

<h2 id="7">
	7. النماذج الأولية التفاعلية
</h2>

<p>
	وهي شكل آخر من الأدوات واسعة الاستخدام في عملية التصميم المتمحور حول المستخدم. تبث النماذج الأولية التفاعلية الحياة في المنتج، كما توفر على بساطتها الكثير من الوقت والمال، وتوضح كيف ستعمل الأشياء على أرض الواقع، وتسمح بالتكرار السريع للتصميم واختبار المستخدم؛ كما تساعد المصمم على توضيح فكرة تصميمه بكفاءة عالية في مراحل مختلفة من عملية تصميم تجربة المستخدم.
</p>

<p>
	يمكن <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D9%85%D8%B1%D8%AD%D9%84%D8%A9-%D8%A7%D9%84%D8%B1%D8%A7%D8%A8%D8%B9%D8%A9-%D9%81%D9%8A-%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%AA%D9%81%D9%83%D9%8A%D8%B1-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85%D9%8A-%D9%85%D8%B1%D8%AD%D9%84%D8%A9-%D8%A8%D9%86%D8%A7%D8%A1-%D8%A7%D9%84%D9%86%D9%85%D8%A7%D8%B0%D8%AC-%D8%A7%D9%84%D8%A3%D9%88%D9%84%D9%8A%D8%A9-r698/" rel="">إنشاء نماذج أولية</a> في أي مرحلة من رحلة الاستكشاف عند الحاجة إلى التكرار، وهي تتراوح من نماذج أولية ورقية، إلى تصاميم عالية المستوى. تساعد الملاحظات والتقييمات الداخلية للنموذج الأولي على إدراك كل أفراد الفريق لآلية عمل المنتجات عندما يتفاعل معها مستخدم حقيقي.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="146546" href="https://academy.hsoub.com/uploads/monthly_2024_03/08----.png.aeaf9abdd9c53158f91d493e6bac86a8.png" rel=""><img alt="08 مراحل تصميم تجربة المستخدم" class="ipsImage ipsImage_thumbnailed" data-fileid="146546" data-unique="wgdwq1vl0" style="width: 700px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2024_03/08----.thumb.png.67e1e762c08194e0119d63a0eb9b1ae4.png"> </a>
</p>

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

<p>
	النماذج الأولية التفاعلية ذات فائدة كبيرة في اختبار المستخدم، فبدلًا من تقديم صفحات ثابتة للاختبار، تسمح هذه النماذج بأن يجرب المستخدمون المحتملون المنتج بطريقة واقعية 100%، مما يساعد في الحصول على أفكار وملاحظات قيمة.
</p>

<p>
	تتوفر اليوم أدوات إنشاء النماذج الأولية للمصممين بأشكال وأحجام مختلفة.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="146540" href="https://academy.hsoub.com/uploads/monthly_2024_03/09---.png.3315d0d8b7635e09829a2ada8ded4c4d.png" rel=""><img alt="09-نموذج-أولي-تفاعلي.png" class="ipsImage ipsImage_thumbnailed" data-fileid="146540" data-ratio="44.89" data-unique="y9r5med8e" width="900" src="https://academy.hsoub.com/uploads/monthly_2024_03/09---.thumb.png.23568ccd38dd50dab0190f7fec51385c.png"></a>
</p>

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

<h2 id="8">
	8. التصميم البصري
</h2>

<p>
	التصميم البصري هو "الطلاء الخارجي للوحة" بالنسبة للمنتج، لكن دوره لا يقتصر على ذلك، بل يمكن أن يؤثر بقوة على تجربة المستخدم، وبالتالي يجب إعطاؤه قدرًا كبيرًا من الاهتمام.
</p>

<p>
	يفضَّل الانتهاء من تطبيق أشكال التصميم التفاعلي وإرشادات قابلية الاستخدام خلال الخطوات السابقة من عملية تصميم تجربة المستخدم، ليتسنى للمصممين التركيز على الجانب البصري، وهي الفرصة الأخيرة لذلك قبل انتقال المنتج إلى المستوى التالي.
</p>

<p>
	ينتقل المنتج بعد مرحلة <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%B9%D9%84%D8%A7%D9%82%D8%A9-%D8%A8%D9%8A%D9%86-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D8%A8%D8%B5%D8%B1%D9%8A-%D9%88%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r749/" rel="">التصميم البصري</a> إلى مرحلة صياغة دليل الأنماط styleguide والمواصفات النهائية للمطورين، ولا يتعلق التصميم البصري فقط بالناحية الجمالية، بل هو فرصة لتحديد المخطط اللوني للعلامة التجارية وتطبيقه، بالإضافة إلى التأثير على قابلية الاستخدام من خلال التنسيق والتباين والتسلسل الهرمي البصري.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpg" data-fileid="148857" href="https://academy.hsoub.com/uploads/monthly_2024_04/10----.jpg.9e8ad07e6ea19b7b49bdca032ae19541.jpg" rel=""><img alt="10--معرب-التصميم-البصري.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="148857" data-ratio="52.44" data-unique="1ic2unji6" width="900" src="https://academy.hsoub.com/uploads/monthly_2024_04/10----.thumb.jpg.ced2a6493c2336219f5af7c7563df1bf.jpg"></a>
</p>

<p>
	تصميم بصري لإحصائيات مراقبة أداء فريق العمل، وتظهر فيها أشكال بيانية مختلفة للتعبير عن النتائج، وهي المنحنيات البيانية والمخططات الشريطية والنسبة المئوية الخطية والنسبة المئوية الدائرية. التصميم البصري هو الخطوة الأخيرة في عملية تصميم تجربة المستخدم بعد الرسوم التخطيطية والإطارات الهيكلية والتصميم التفاعلي والنماذج الأولية.
</p>

<h2 id="9">
	9. المواصفات ودليل الأنماط للمطورين
</h2>

<p>
	الخطوة الأخيرة في عملية تصميم تجربة المستخدم هي وضع المواصفات ودليل الأنماط للمطورين، ودليل الأنماط شرط أساسي لنجاح تصميم المنتج على المدى الطويل.
</p>

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

<p>
	تُجمَع بعض المواصفات ودلائل الأنماط يدويًا وبعضها الآخر آليًا، علمًا أن إعداد دليل الأنماط يدويًا يُعَد عمليةً شاقة وتستغرق غالبًا حوالي ستة أشهر، لذا فإن أي أداة أتمتة لهذه العملية ستساهم كثيرًا في توفير الوقت.
</p>

<p>
	تختلف الطرائق الآلية باختلاف الأداة المستخدَمة، وهي طرائق أكثر مرونةً وتدرُّجًا لتسليم التصاميم قياسًا بالطرائق اليدوية التي تستغرق وقتًا طويلًا. تُعَد دلائل الأنماط أحيانًا بمثابة الكتب المقدسة للأساليب والأنماط، والتي توضَع على الرف ليتسنى لكل أفراد الفريق الرجوع إليها عند الحاجة.
</p>

<p>
	إذا كنت تعمل على برنامج سكتش Sketch فهناك أدوات رائعة مثل <a href="https://zeplin.io/" rel="external nofollow">Zeplin</a>، وهي أداة عمل تشاركي لكل من مصممي واجهة المستخدم ومطوري الواجهة الأمامية، تسهل عمل المصممين وتساعد على تبادل التصميم بين الفرق المختلفة.
</p>

<p>
	بالإضافة لذلك، يمكن إعداد دليل أنماط التصميم خلال ثوانٍ من منصة سكتش عبر برنامج <a href="https://blog.prototypr.io/how-to-create-design-styleguide-in-sketch-for-3-seconds-23aabd6a5f85" rel="external nofollow">Craft</a> المساعد، أو باستخدام القياسات وتنسيقات CSS من التصميم وإصدار ملف HTML عبر برنامج Marketch المساعد.
</p>

<p>
	يمكنك الاطلاع على <a href="https://www.canva.com/learn/50-meticulous-style-guides-every-startup-see-launching/" rel="external nofollow">50 مثالًا رائعًا لدلائل الأنماط</a>، وهناك أمثلة أيضًا من <a href="https://www.bbc.co.uk/gel" rel="external nofollow">BBC</a> وأخرى من <a href="https://www.ibm.com/design/language/" rel="external nofollow">IBM</a>، وكلاهما توفر دلائلها على الإنترنت لتسهيل رؤيتها على الجميع.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="jpg" data-fileid="148858" href="https://academy.hsoub.com/uploads/monthly_2024_04/11---.jpg.c4b08a6aed44fa53a4b4af29f0a4cbcf.jpg" rel=""><img alt="11معرب-دلائل-الأنماط-والمواصفات.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="148858" data-ratio="53.67" data-unique="mftf1mpn3" width="900" src="https://academy.hsoub.com/uploads/monthly_2024_04/11---.thumb.jpg.16721f6d79e7ed692cb7a18dfefe3d78.jpg"></a>
</p>

<p>
	المواصفات ودليل الأنماط للمطورين هي الخطوة الأخيرة في عملية تصميم تجربة المستخدم. تشير الملاحظات باللون الأحمر إلى المعايير المعتمدة من لون، أو حجم خط، أو صيغة ملف، أو تباعد أو غيرها؛ بالإضافة إلى تحديد القياسات والأبعاد.
</p>

<h2 id="10">
	10. اختبار قابلية الاستخدام وتقارير تحليلات الاستخدام
</h2>

<p>
	مهمة مصمم تجربة المستخدم لا نهاية لها، فحتى بعد إصدار المنتج يأتي دور الحصول على الآراء والتعليقات وجمع بيانات حول الاستخدام، ثم إجراء التحسينات والإصدار مجددًا، لتبدأ الحلقة نفسها مرةً أخرى.
</p>

<p>
	يعكس <a href="https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D8%AC%D8%B1%D8%A7%D8%A1-%D8%A7%D8%AE%D8%AA%D8%A8%D8%A7%D8%B1-%D9%82%D8%A7%D8%A8%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%BA%D9%8A%D8%B1-%D8%A7%D9%84%D9%85%D8%B1%D8%A7%D9%82%D8%A8-unmoderated-usability-testing-r789/" rel="">اختبار قابلية الاستخدام</a> قدرة المستخدمين المستهدفين على استخدام المنتج، ويساعد على تحديد المشكلات التي يواجهها الناس في واجهة مستخدم معينة، ويكشف عن المهمات التي يصعب إكمالها والصياغة اللغوية المربكة.
</p>

<p>
	تسلَّم تقارير اختبار قابلية الاستخدام عادةً خلال مرحلة النماذج الأولية، لكن اختبار المنتجات يجري أيضًا على المستخدمين بعد إصدارها للتحري عن التحسينات الممكنة.
</p>

<p>
	تزداد مع الوقت خبرة العاملين في مجال تجربة المستخدم بمراحل اختبار قابلية الاستخدام من جمع البيانات إلى فهمها وتصنيفها وإصدار التقارير، وقد أصبحت مؤخرًا مهارةً أساسيةً للعاملين في هذا المجال.
</p>

<p>
	بعد إطلاق المنتج إلى السوق، يحصل فريق التصميم على مجموعة جديدة واسعة من البيانات (الاختبار الكمّي)، والتي تعكس كيفية أداء المنتج على نطاق واسع من المستخدمين.
</p>

<p>
	هناك أدوات وأساليب غير محدودة للتحري عن سلوك المستخدمين وتحليله، مثل خرائط تتبع العين أو تتبع النقرات (والتي تسجل سلوك النقر والضغط والتمرير)، أو وسم عناصر واجهة المستخدم الذي يتتبع البصمة الرقمية لكل مستخدم عبر أجهزة الهاتف المحمول أو الويب.
</p>

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

<p>
	تصدر شركات التحليلات آليًا تقارير مخصصة حسب الطلب، وهي تقارير مفيدة جدًا ويمكن أن تقدم معلومات وتوضيحات غير متوقعة حول استخدام المنتج، فقد تكشف هذه التقارير عن ندرة استخدام ميزات اعتقدتَ أنها رائعة وستجذب جميع العملاء؛ وفي المقابل قد يتبين أن تلك الوظيفة الصغيرة غير المهمة حسب اعتقادك تحظى بالكثير من الاستخدام، لتقرر أن الوقت قد حان للتركيز على توسيعها.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="146543" href="https://academy.hsoub.com/uploads/monthly_2024_03/12----.png.4c4051337ef27705989d64b5708b5711.png" rel=""><img alt="12 تقرير اختبار قابلية الاستخدام" class="ipsImage ipsImage_thumbnailed" data-fileid="146543" data-unique="acah2hbex" src="https://academy.hsoub.com/uploads/monthly_2024_03/12----.thumb.png.3056b0e58ff47e74bd7445b0f94ba7cd.png"> </a>
</p>

<p>
	تقارير اختبار قابلية الاستخدام يتضمن بنودًا مختلفة قيد الاختبار، مع قائمة بالتعليقات والملاحظات حولها، مع تحديد المشاكل التي تتخللها، بالإضافة إلى الحلول الممكنة.
</p>

<h2 id="">
	الخلاصة
</h2>

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

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://www.toptal.com/designers/ux/10-common-ux-deliverables" rel="external nofollow">The 10 UX Deliverables Top Designers Use</a> لصاحبه Miklos Philips.
</p>

<h2 id="-1">
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%A5%D8%AC%D8%B1%D8%A7%D8%A1-%D8%A3%D8%A8%D8%AD%D8%A7%D8%AB-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r814/" rel="">الدليل الشامل لإجراء أبحاث تجربة المستخدم UX</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D9%81%D9%87%D9%85-%D8%A7%D9%84%D9%85%D8%B3%D8%A7%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D9%87%D9%86%D9%8A%D8%A9-%D9%84%D9%85%D8%AC%D8%A7%D9%84-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r713/" rel="">دليلك الشامل لفهم المسارات المهنية لمجال تجربة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r709/" rel="">أساسيات تصميم تجربة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-r149/" rel="">مدخل إلى تجربة المستخدم User Experience</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%B1%D8%B3%D9%85-%D9%85%D8%AE%D8%B7%D8%B7-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-%D8%A8%D8%AE%D8%B7%D9%88%D8%A7%D8%AA-%D8%B3%D9%87%D9%84%D8%A9-r815/" rel="">رسم مخطط لتصميم تجربة المستخدم UX بخطوات سهلة</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">855</guid><pubDate>Wed, 13 Mar 2024 14:03:00 +0000</pubDate></item><item><title>&#x627;&#x644;&#x62F;&#x644;&#x64A;&#x644; &#x627;&#x644;&#x634;&#x627;&#x645;&#x644; &#x644;&#x62A;&#x635;&#x645;&#x64A;&#x645; &#x627;&#x644;&#x625;&#x634;&#x639;&#x627;&#x631;&#x627;&#x62A;</title><link>https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D8%A5%D8%B4%D8%B9%D8%A7%D8%B1%D8%A7%D8%AA-r845/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2023_12/---.png.28abee6aadcfc0c41803f15a8270db63.png" /></p>
<p>
	تُعَد الإشعارات بجميع أنواعها جزءًا أساسيًا من المنتجات الرقمية، وهي تمثل الرسائل الطرفية لهذه المنتجات، والتي يفترَض أن تساهم في بناء تجربة تساعد الناس على تحقيق غاياتهم، مع الحرص على ألا تلحِق أي ضرر بتجربة المستخدم، إنما تستخدَم فقط لتعزيز التفاعل وتحسين تجربة المستخدم. يساعد تحديد معالم تصميم الإشعارات في مرحلة مبكرة من عملية تصميم المنتج على تحقيق نتائج أفضل.
</p>

<p>
	تخيل مجموعة مهندسين يصممون منزلًا من ثلاثة طوابق ويعملون على المخططات لمدة شهور للوصول إلى نتائج مبهرة تثير الإعجاب، وعند المشارفة على الانتهاء يسأل أحدهم: "لكن كيف سينتقل الناس من الطابق الأول إلى الطابق الثالث؟"، لقد نسوا السلالم!
</p>

<p>
	بالمثل، يميل مصممو المنتجات لترك التحسينات الصغيرة الحاسمة إلى النهاية، مثل المنصات التي تتضمن حالات فارغة والتي كثيرًا ما يؤجل مصمموها تصميم الإشعارات والتنبيهات ورسائل الخطأ وعمليات التحقق والبلاغات والإقرارات حتى مرحلة متأخرة جدًا، وقد تظهر المشكلة فجأةً عندما يواجهون أخطاءً يصعب التعامل معها بعد كل هذه المراحل. كثيرًا ما يؤدي التأخر في معالجة تلك التفاصيل إلى تصاميم تجريبية غير متقَنة تؤثر سلبًا على <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r813/" rel="">تجربة المستخدم</a>.
</p>

<p>
	تجنبًا للوقوع في هذه المشاكل، من الأفضل اتباع نهج متكامل لتصميم <a href="m/programming/android/%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84-%D9%85%D8%B9-%D8%A7%D9%84%D8%A5%D8%B4%D8%B9%D8%A7%D8%B1%D8%A7%D8%AA-%D9%81%D9%8A-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA-%D8%A3%D9%86%D8%AF%D8%B1%D9%88%D9%8A%D8%AF-r368/" rel="">الإشعارات</a> من أجل تحسين تجربة المستخدم. رغم أن المعلومات اللازمة قد لا تكون متوفرةً بالكامل في متناول أيدي المصممين، إلا أن تصميم إطار عمل متكامل للإشعارات خلال دورة حياة تصميم المنتج يساعد على جعل هذا المنتج ملائمًا لحالات الاستخدام غير المتوقعة.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="139313" href="https://academy.hsoub.com/uploads/monthly_2023_12/02--.png.ebadc7674c8ff6d2ee45f16a2c9a4712.png" rel=""><img alt="02-تصميم-الإشعارات.png" class="ipsImage ipsImage_thumbnailed" data-fileid="139313" data-ratio="52.33" data-unique="vrkhvro54" style="width: 600px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_12/02--.thumb.png.9747cc95fbaa65bd4590f4006dab056b.png"></a>
</p>

<p>
	عند الشروع في <a href="https://academy.hsoub.com/marketing/performance-marketing/%D9%84%D9%85%D8%A7%D8%B0%D8%A7-%D9%8A%D8%AC%D8%A8-%D8%A3%D9%86-%D8%AA%D9%87%D8%AA%D9%85-%D8%A8%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-r56/" rel="">تصميم المنتج</a> فإن مبدأ التصميم الأساسي الذي يجب التركيز عليه هو <strong>مساعدة الناس على إنجاز المهام (لا إعاقتهم)</strong>. من الضروري اختبار النماذج الأولية <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">للمنتج</a> في مرحلة مبكرة وتحديد <a href="https://academy.hsoub.com/entrepreneurship/business/%D9%85%D9%82%D8%AF%D9%85%D8%A9-%D8%A5%D9%84%D9%89-%D8%AD%D8%A7%D9%84%D8%A7%D8%AA-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-use-cases-r1066/" rel="">حالات الاستخدام</a> التي تكون الرسائل الطرفية فيها ذات أهمية في <strong>المساعدة على التفاعل</strong>. مع ذلك فإن الطريقة الأفضل للتواصل مع المستخدمين تختلف وفقًا لعوامل عديدة مثل:
</p>

<ul>
	<li>
		نوع المعلومات التي يجب إيصالها.
	</li>
	<li>
		مدى إلحاح هذه المعلومات وما إذا كان من الضروري رؤيتها مباشرةً.
	</li>
	<li>
		ما إذا كان على المستخدم اتخاذ إجراء بعد الاطلاع على المعلومات.
	</li>
</ul>

<p>
	يجب تحديد أسلوب كتابة الإشعارات أيضًا عند كتابة تجربة المستخدم، فضلًا عن شكل الإشعارت ونمطها، ومن الضروري أن تكون جميع العبارات التي تتضمنها الإشعارات واضحةً ودقيقةً ومفيدة. يجب أيضًا مراعاة <a href="https://academy.hsoub.com/design/user-experience/%D8%A5%D9%85%D9%83%D8%A7%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D9%88%D8%B5%D9%88%D9%84-%D9%84%D8%A5%D8%AA%D8%A7%D8%AD%D8%A9-%D8%B3%D9%87%D9%88%D9%84%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%84%D9%84%D8%AC%D9%85%D9%8A%D8%B9-r761/" rel="">إمكانية الوصول</a> عند تصميم نظام الإشعارات، والحرص على جعله مرنًا ليتلاءم مع اللغات المختلفة.
</p>

<p>
	تتشابه المصطلحات المستخدمة في الإشعارات مع وجود فروقات بسيطة بين فريق وآخر، وما بين مشروع وآخر، وتقع على عاتق المصمم مسؤولية تحديد مصطلحات إطار عمل الإشعارات من خلال شرح المقصود بكل مسمى، مع إطلاع الجميع على الأساس المنطقي لاستخدامها عبر إستراتيجية <strong>ما هو؟ ولماذا؟ وكيف؟</strong>.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="139318" href="https://academy.hsoub.com/uploads/monthly_2023_12/03---.png.11796513119e0596fee7820040588b1f.png" rel=""><img alt="03-رسالة-إشعار-تبليغ.png" class="ipsImage ipsImage_thumbnailed" data-fileid="139318" data-ratio="51.67" data-unique="5g6f6z1l8" style="width: 700px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_12/03---.thumb.png.5d1d76a5d5c2cca36fb0969380d5fbee.png"></a>
</p>

<p style="text-align: center;">
	إشعار إقرار بنجاح عملية التبليغ
</p>

<h2 id="">
	تصميم إشعارات أفضل من أجل قابلية استخدام أفضل
</h2>

<p>
	للإشعارات دور رئيسي في قابلية استخدام المنتج، وتتربع "<strong>إمكانية رؤية حالة النظام</strong>" على رأس قائمة الإرشادات العشرة لقابلية الاستخدام في تصميم واجهة المستخدم التي وضعتها مجموعة نيلسن نورمان، وينص هذا الإرشاد على "ضرورة أن يسمح النظام للمستخدمين بالاطلاع الدائم على ما يجري من خلال إرسال ملاحظات مناسبة خلال وقت سريع".
</p>

<p>
	يُعَد نظام الإشعارات جزءًا مهمًا من تجربة المستخدم <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D8%A5%D9%84%D9%89-%D9%85%D9%81%D9%87%D9%88%D9%85-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-%D8%A7%D9%84%D8%B1%D9%82%D9%85%D9%8A%D8%A9-digital-products/" rel="">للمنتج الرقمي</a>، ومن دونه يبدو المنتج وكأن شيئًا ما ينقصه، فغياب "إمكانية رؤية حالة النظام" ورسائل الملاحظات يجعل الأمر أشبه بقيادة سيارة دون لوحة قيادة، فكما هو معروف، تعجّ لوحة قيادة السيارة بالمقاييس والأيقونات والأضواء المصممة لتمكين رؤية نظام تشغيل السيارة وضمان القدرة على تشغيلها بأمان وموثوقية، وعندما نكون في وضعية القيادة، فإننا نحصل على المعلومات من مجموعة الإشعارات والبيانات المعروضة حول درجة حرارة المحرك وسلامة البطارية وضغط الزيت والأضواء والفرامل والوسائد الهوائية وغيرها.
</p>

<p>
	على سبيل المثال، عندما نريد الانعطاف يشير ضوء وامض إلى الانعطاف مع صوت نقر، وكلاهما يزودنا بالمعلومات. يوجد أيضًا مقياس لخزان الوقود يعطينا مؤشرًا عند انخفاض مستوى الوقود.
</p>

<p>
	ينطبق ذلك أيضًا على المنتجات الرقمية التي تُعَد إمكانية رؤية حالة النظام والملاحظات فيها أمرًا أساسيًا في قابلية استخدامها، ولا شك أن <a href="https://academy.hsoub.com/design/user-experience/%D9%82%D8%A7%D8%A8%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r728/" rel="">قابلية الاستخدام</a> هي حجر الأساس لنجاح تجربة المستخدم.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="139307" href="https://academy.hsoub.com/uploads/monthly_2023_12/04---.png.748a2d8235a3cf812f6a9cbfcfdba410.png" rel=""><img alt="04 لوحة قيادة السيارة" class="ipsImage ipsImage_thumbnailed" data-fileid="139307" data-unique="dnmbc0gh3" style="width: 700px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_12/04---.thumb.png.7376b60026ffc19d14dbfffacd61df11.png"> </a>
</p>

<p style="text-align: center;">
	لوحة قيادة سيارة تقدم إشعارات عن درجة حرارة المحرك وسلامة البطارية وضغط الزيت والأضواء والفرامل والوسائد الهوائية وغيرها
</p>

<h2 id="-1">
	إنشاء إطار عمل مساعد للإشعارات
</h2>

<p>
	من أجل النجاح في تصميم إطار عمل للإشعارات، قد يكون من المفيد التفكير بقوة رسائل الإشعارت! ما هي الرسائل الطرفية التي تحتاج إلى انتباه أكثر أو أقل؟ على سبيل المثال، الرسائل الحاسمة تحتاج إلى إشعارات "أعلى"؛ أما غير الحاسمة، فتحتاج إلى إشعارات "أكثر هدوئًا".
</p>

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

<p>
	يتطلب النهج الأولي لتصميم الإشعارات تصنيفَها ضمن ثلاثة مستويات حسب مستوى شدتها: <strong>عالية الأهمية، ومتوسطة الأهمية، ومنخفضة الأهمية</strong>. بعد ذلك يجب تحديد <strong>نوع</strong> الإشعار في هذه المستويات الثلاثة وفق مواصفاته النوعية: هل هو عبارة عن رسالة تنبيه؟ أم تحذير؟ أم تأكيد؟ أم خطأ؟ أم نجاح؟ أم مؤشر حالة؟
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="139319" href="https://academy.hsoub.com/uploads/monthly_2023_12/05--.png.9740428d6e1c2a1a958b6e803670153b.png" rel=""><img alt="05-تصنيف-الإشعارات.png" class="ipsImage ipsImage_thumbnailed" data-fileid="139319" data-ratio="52.67" data-unique="tvsn7du41" style="width: 650px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_12/05--.thumb.png.eef8da30181c9f044eb4bd1d6f8d2e22.png"></a>
</p>

<p>
	بمجرد تحديد مواصفات الإشعارات، يأتي دور إنشاء تصنيف للإشعارات المختلفة يمثل إطار العمل، وفيما يلي مثال بسيط غير شامل لجميع أنواع الإشعارات، إذ تختلف أنواع الإشعارات حسب المنتج وحالات الاستخدام وعوامل أخرى. يرجى ملاحظة اختلاف المسميات بين الفرق المختلفة، إذ نطلق هنا مثلًا اسم رسالة "التأكيد" على الإشعار الذي يتطلب موافقة المستخدم من أجل التقدم من خلال تفاعل حاسم، في حين قد تطلق فرق أخرى اسم رسالة "التأكيد" على رسالة النجاح.
</p>

<ul>
	<li>
		<strong>عالية الأهمية</strong>

		<ul>
			<li>
				التنبيهات alerts (تحتاج إلى انتباه مباشر).
			</li>
			<li>
				رسائل الخطأ errors (تحتاج إلى اتخاذ إجراء مباشر).
			</li>
			<li>
				الاستثناءات exceptions (عيوب النظام، حدوث خطأ ما).
			</li>
			<li>
				التأكيدات confirmations (الإجراءات الحاسمة التي تتطلب موافقة المستخدم من أجل التقدم).
			</li>
		</ul>
	</li>
	<li>
		<strong>متوسطة الأهمية</strong>
		<ul>
			<li>
				التحذيرات warnings (لا تحتاج إلى اتخاذ إجراء مباشر).
			</li>
			<li>
				الإقرارات acknowledgments (إخبار بالحالة ردًا على إجراءات المستخدم).
			</li>
			<li>
				رسائل النجاح success messages.
			</li>
		</ul>
	</li>
	<li>
		<strong>منخفضة الأهمية</strong>
		<ul>
			<li>
				الرسائل الإعلامية informational messages (تدعى أيضًا الإشعارات السلبية، وتشير إلى الأشياء الجاهزة للعرض).
			</li>
			<li>
				الشارات badges (توضع غالبًا على الأيقونات، وتدل على وجود شيء جديد منذ آخر تفاعل).
			</li>
			<li>
				مؤشرات الحالة status indicators (تعليقات النظام).
			</li>
		</ul>
	</li>
</ul>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="139320" href="https://academy.hsoub.com/uploads/monthly_2023_12/06----.png.4f86f1e5dee5730dfb1899f47526bedd.png" rel=""><img alt="06-الإشعارات-السلبية-في-لينكدإن.png" class="ipsImage ipsImage_thumbnailed" data-fileid="139320" data-ratio="58.22" data-unique="ne15ppuzk" style="width: 700px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_12/06----.thumb.png.13b8036fbbf980c6d2bb12129ba97271.png"></a>
</p>

<h2 id="-2">
	تصميم تجربة مستخدم ذات إشعارات رائعة
</h2>

<p>
	من أجل تصميم منتج ذي تجربة مستخدم رائعة، يتعين على المصممين إعداد قائمة بجميع حالات الاستخدام التي يمكن أن تكون الإشعارات مفيدةً فيها، ويُنصح بإجراء هذه العملية بالتعاون مع مطور، فغالبًا ما يكون المطور محايدًا ويساعد على اكتشاف وإصلاح المشكلات التي تظهر في حالات خاصة والتي قد لا ينتبه لها المصمم.
</p>

<p>
	على المصممين أيضًا الانتباه لجميع التفاعلات أثناء اختبارالمستخدم وتحديد الموضع الذي تفيد فيه الإشعارات في تحسين تجربة المستخدم UX.
</p>

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

<ul>
	<li>
		ما الدافع الذي يوجب الإشعار؟
	</li>
	<li>
		ما نوع التعليق الذي ينبغي إرساله؟
	</li>
	<li>
		أين وكيف يجب أن يظهر الإشعار؟
	</li>
	<li>
		أي من الإشعارات يتطلب تفاعلًا مباشرًا؟
	</li>
	<li>
		هل الإشعار مستمر أم مؤقت؟
	</li>
</ul>

<p>
	بعد ذلك، يجب تحديد <a href="https://academy.hsoub.com/design/user-interface/%D8%A7%D8%AE%D8%AA%D9%8A%D8%A7%D8%B1-%D8%A7%D9%84%D8%A3%D9%84%D9%88%D8%A7%D9%86-%D8%A7%D9%84%D9%85%D9%86%D8%A7%D8%B3%D8%A8%D8%A9-%D9%84%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r757/" rel="">الترميز اللوني</a> والأيقونات وإدراجها في <a href="https://academy.hsoub.com/design/user-interface/%D9%83%D9%8A%D9%81-%D8%AA%D8%B3%D8%AA%D9%81%D9%8A%D8%AF-%D9%85%D9%86-%D8%A3%D9%86%D8%B8%D9%85%D8%A9-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%84%D8%AA%D8%B3%D8%B1%D9%8A%D8%B9-%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-r819/" rel="">نظام التصميم</a> (ما يسمى دليل الأنماط)، ويتعين على المصممين في هذه المرحلة دراسة <strong>جميع الحالات التي قد يظهر فيها الإشعار</strong> والتحقق من ظهوره بصورة مناسبة على جميع الخلفيات.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="139308" href="https://academy.hsoub.com/uploads/monthly_2023_12/07---.png.9b56ae500145e54a242e723f7467db73.png" rel=""><img alt="07-اختبار-مظهر-الإشعار.png" class="ipsImage ipsImage_thumbnailed" data-fileid="139308" data-ratio="41.22" data-unique="u43ghrc00" style="width: 780px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_12/07---.thumb.png.72e0340acbb522fae8ccd22ca635de0f.png"></a>
</p>

<p>
	توضح الصورة اختلاف نمط تصميم الإشعارات في العديد من أنظمة التصميم، حتى في منصات تصميم واجهة المستخدم الشهيرة، ويتجلى ذلك من خلال استخدام مسميات وإطارات مختلفة.
</p>

<p>
	المكان الذي يظهر فيه الإشعار عامل أساسي أيضًا، ومن المعروف أن الإشعارات يجب أن تظهر في أعلى واجهة المستخدم أو أسفلها أو بجوار زواياها تجنبًا لحجب الواجهة، لكن الجدير بالذكر أنه في حالة <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8-responsive-design-r751/" rel="">التصميم المتجاوب</a>، فإنه يتعين على المصممين اختبار مظهر الإشعارات لكل إطار عرض، ولهذا الأمر أهمية خاصة في رسائل الخطأ التي قد تظهر في التصميم المتجاوب على الهاتف المحمول.
</p>

<p>
	تصميم إطار عمل للإشعارات ليس بالأمر السهل، إذ يجب مراعاة الكثير من التفاصيل الصغيرة التي قد تحدث في حالات مختلفة؛ بالإضافة إلى إمكانية الوصول وقابلية القراءة، يجب أخذ خطوات الترجمة اللاحقة بالحسبان، فنظام الإشعارات الذي يبدو مثاليًا بالنسخة الإنجليزية يمكن أن يتداعى ويفشل عند تطبيقه على منصة عربية أو يابانية مثلًا.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="139312" href="https://academy.hsoub.com/uploads/monthly_2023_12/08----.png.73409750e1a57a02457b13847b8819f1.png" rel=""><img alt="08 تنبيهات في لوحة تحكم" class="ipsImage ipsImage_thumbnailed" data-fileid="139312" data-unique="mzbt80m6w" style="width: 760px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_12/08----.thumb.png.2e31ed647e5d3e024250958d7356f308.png"> </a>
</p>

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

<p>
	من الأسئلة الأخرى التي يجب طرحها عندما تكون بصدد <strong>تحديد سلوك الإشعارات</strong>:
</p>

<ul>
	<li>
		إذا كان من المفترض أن يكون التنبيه أو التحذير مستمرًا، فكيف يضمن المصممون أن يبقى بإمكان الناس الوصول إليه بعد أن يتنقّلوا بعيدًا عن الشاشة الأولية؟
	</li>
	<li>
		هل يجب إضافة شارة تنبيه إلى الأيقونة عندما يكون من الممكن الاطلاع على سجل الإشعارات؟
	</li>
	<li>
		إذا كان الإشعار مؤقتًا فما هي المدة التي يبقى فيها ظاهرًا؟ وهل يجب أن يكون هناك خيار لتجاهله قبل أن يختفي من تلقاء نفسه؟
	</li>
</ul>

<p>
	بالنسبة لتطبيقات الهاتف المحمول، لا يكفي تصميم الإشعارات داخل التطبيق، بل يجب أيضًا الاهتمام بتصميم إشعارات الدفع (على مستوى النظام، والإشعارات خارج التطبيق). غالبًا ما تسبب هذه الإشعارات مقاطعة المستخدم، لذا فمن الضروري التحقق من محتوى الإشعارات وكيفية طلب الإذن لإرسالها والتوقيت المناسب لذلك، إذ قد تؤدي المبالغة في استخدام هذه الإشعارات إلى ثني الناس عن استخدام التطبيق، كما قد يؤدي الإكثار من الإشعارات غير الضرورية إلى إحباط المستخدمين ودفعهم إلى إيقاف الإشعارات أو التخلي عن استخدام التطبيق برمّته.
</p>

<p>
	على المصممين أيضًا أن يجعلوا الإشعارات <strong>قابلةً للتنفيذ</strong> عند الإمكان، وهي الإشعارات التي تسمح للناس بالتفاعل دون الحاجة لفتح التطبيق، فتمكين المستخدم من إتمام المهمات الصغيرة دون الدخول إلى التطبيق يساهم كثيرًا في تحسين تجربة المستخدم.
</p>

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

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="139306" href="https://academy.hsoub.com/uploads/monthly_2023_12/09-----.png.69b2fd4c6d8a478c9a582f44daffedcf.png" rel=""><img alt="09-إشعارات-دفع-على-الهاتف-المحمول.png" class="ipsImage ipsImage_thumbnailed" data-fileid="139306" data-ratio="48.22" data-unique="n1mmnn56x" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_12/09-----.thumb.png.2913f7c6931ca8bec99c7ef9e5e12b41.png"></a>
</p>

<p>
	في الصورة عدة أشكال من إشعارات الدفع وهي من اليمين إلى اليسار:
</p>

<ul>
	<li>
		طلب السماح بإرسال الإشعارات.
	</li>
	<li>
		طلب السماح بالوصول إلى الموقع أثناء استخدام التطبيق.
	</li>
	<li>
		تبليغ بتحديث سياسة الخصوصية، طلب السماح بإرسال الإشعارات.
	</li>
	<li>
		طلب تقييم التطبيق ومراجعته.
	</li>
</ul>

<p>
	عمومًا، يجب اختيار التوقيت المناسب لعرض إشعارات الدفع على الهاتف المحمول حتى لا تنفّر المستخدمين.
</p>

<h2 id="-3">
	أفضل ممارسات تصميم الإشعارات من أجل تجربة مستخدم مثالية
</h2>

<p>
	تضمن الممارسات التالية أن يشعر الناس بقيمة الإشعارات ولا يرونها شيئًا مزعجًا يقاطع عملهم، مما يؤدي بالنتيجة إلى تحسين تجربة المستخدم.
</p>

<p>
	قبل تصميم نظام للإشعارات وإدراجها في نموذج التصميم، يجب مراعاة الممارسات الأساسية التالية:
</p>

<ul>
	<li>
		تصنيف الإشعارات وفق مستويات الأهمية المذكورة آنفًا، ثم تحديد مسميات الأشكال المختلفة من الإشعارات ضمن هذه المستويات الثلاثة.
	</li>
	<li>
		عند إنشاء دليل تصميمي لنظام الإشعارات، يجب تعيين الحد الأقصى لعدد حروف نص الإشعار بجميع اللغات التي سيصار إلى إصداره بها.
	</li>
	<li>
		الانتباه جيدًا إلى المرونة وقابلية التكيف مع أنواع المحتوى وأطوال النصوص المختلفة.
	</li>
	<li>
		إنشاء مخطط لوني موحد لكل من مستويات الأهمية الثلاثة مع طريقة ترميز متجانسة.
	</li>
	<li>
		إنشاء محتوى للإشعارات يتميز بالدقة وسهولة القراءة وتقديم معلومات مفيدة.
	</li>
	<li>
		التفكير جيدًا فيما تريد إرساله والتوقيت المناسب لذلك، وتأجيل إرسال الإشعارات على الهاتف المحمول من التطبيقات المحملة حديثًا لتجنب نفور الناس، والتدقيق جيدًا في المحتوى وحالات الاستخدام.
	</li>
	<li>
		الميل نحو إظهار عدد أقل من الإشعارات، سواءً كانت تنبيهات، أو تحذيرات، أو تحديثات أخرى للحالة من أهمية مرتفعة إلى متوسطة، والاستعاضة عنها بإعداد بقائمة يمكن للناس الاطلاع عليها عندما يرغبون هم بذلك (يُستدَل عليها بإضافة شارة للأيقونة على <a href="https://academy.hsoub.com/files/36-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ui/" rel="">واجهة المستخدم</a>).
	</li>
	<li>
		وجود خيار "عدم الإظهار مرة أخرى" في نظام الإشعارات.
	</li>
	<li>
		يجب أن تختفي الإقرارات المؤقتة مثل الشريط snackbar من على الشاشة بعد أربع ثوانٍ على الأقل وثماني ثوانٍ على الأكثر، مع وجود خيار التجاهل لإغلاقه قبل ذلك، وخيار التراجع عند الإمكان.
	</li>
	<li>
		بالنسبة للإشعارات عالية الأهمية على الهاتف المحمول، يمكن إضافة ردود فعل صوتية أو لمسية عند اللزوم.
	</li>
	<li>
		التحقق من التباين الملائم للإشعارات من أجل قابلية القراءة، وكذلك على مختلف الخلفيات التي يظهر عليها الإشعار، مع الانتباه إلى إمكانية تغيُّر الخلفية خلف الإشعار في حالة التصميم المتجاوب الانسيابي.
	</li>
</ul>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="139315" href="https://academy.hsoub.com/uploads/monthly_2023_12/10---------.png.e12d64531be664542b20646197fca830.png" rel=""><img alt="10-إشعارات-في-تطبيقات-هاتف-محمول-بلاغات-ورسائل-نجاح-وإقرارات.png" class="ipsImage ipsImage_thumbnailed" data-fileid="139315" data-ratio="51.44" data-unique="45k63dxp1" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_12/10---------.thumb.png.92ee0342728f359047800de7847d52f4.png"></a>
</p>

<p>
	أمثلة لأنواع مختلفة من الإشعارات في تطبيقات الهاتف المحمول، وهي من اليمين إلى اليسار:
</p>

<ul>
	<li>
		رسالة نجاح التقييم
	</li>
	<li>
		طلب تأكيد الحذف
	</li>
	<li>
		إقرار نجاح عملية الأرشفة
	</li>
	<li>
		إبلاغ عن توقف التطبيق لفترة معينة.
	</li>
</ul>

<h2 id="-4">
	أفضل ممارسات تصميم رسائل الخطأ
</h2>

<ul>
	<li>
		يجب أن تكون رسائل الخطأ بسيطةً ومباشرة، ويفضّل أن تكون قابلةً للتنفيذ ومكتوبةً بلغة مفهومة سهلة القراءة.
	</li>
	<li>
		الابتعاد عن الرموز والاختصارات الغامضة، مثل "خطأ في نجاح استلام الرد".
	</li>
	<li>
		تقديم وصف موجز واضح للمشكلة بدلًا من مجرد "حدث خطأ ما".
	</li>
	<li>
		تجنُّب لوم الناس أو إخبارهم بأنهم ارتكبوا خطأً ما، مثل قول أنه "أمر غير قانوني".
	</li>
	<li>
		تقديم رسائل خطأ بنّاءة في السياق تساعد الناس على إصلاح المشكلة.
	</li>
	<li>
		تجنُّب الإشارة إلى الخطأ بمجرد جعل الحقل بلون أحمر، مما يمنع إمكانية الوصول للأشخاص ضعاف البصر أو ذوي الاحتياجات الخاصة. من الأفضل دائمًا تضمين إشارات مرئية أخرى يمكن أن يراها المصابون بعمى الألوان.
	</li>
	<li>
		استخدام التحقق المباشر inline validation للبيانات المدخَلة في النماذج.
	</li>
	<li>
		يجب ألا تختفي رسائل الخطأ حتى يصلح المستخدم المشكلة.
	</li>
</ul>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="139321" href="https://academy.hsoub.com/uploads/monthly_2023_12/11----.png.6bb41d29efef049e0cf97857ebe4574c.png" rel=""><img alt="11-التحقق-المباشر-في-النماذج.png" class="ipsImage ipsImage_thumbnailed" data-fileid="139321" data-ratio="44.22" data-unique="u1uxjuf6z" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_12/11----.thumb.png.23d58a0caa37c6ec6aaa73f444434293.png"></a><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2023_12/11----.png.30bcb5ea796cd00d0efb351ae93b8d28.png" rel=""> </a>
</p>

<p>
	التحقق المباشر في النماذج، ويعرَف أيضًا بالتحقق المضمَّن، ويعني تنبيه المستخدم مباشرةً بوجود خطأ في ملء الحقل مع الإشارة إلى سبب الخطأ ليتسنى للمستخدم تصحيحه على الفور، وهو يساعد على تحسين تجربة المستخدم.
</p>

<h2 id="-5">
	الخلاصة
</h2>

<p>
	تساهم الإشعارات في تجربة المستخدم بمساعدة الناس على تحقيق غاية ما، ويجب التعامل معها مثل أي مكون آخر للمنتجات الرقمية، لكنها سلاح ذو حدين؛ فإذا أُديرت بطريقة مناسبة، فإنها تحسن تجربة المستخدم وتعزز التفاعل؛ أما إذا كانت سيئة الإدارة، فقد تصبح مصدرًا للإزعاج، لذا من الضروري تحقيق التوازن الصحيح.
</p>

<p>
	لا ينبغي التعامل مع الإشعارات على أنها مرحلة مؤجَّلة، فنجاحها يتطلب تعيين المصممين لحالات الاستخدام في مرحلة مبكرة وتحديد الأشكال المختلفة للإشعارات خلال <a href="https://academy.hsoub.com/entrepreneurship/business/%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%AA%D8%B5%D9%86%D9%8A%D9%81%D9%87-%D9%88%D8%AF%D9%88%D8%B1%D8%A9-%D8%A7%D9%84%D8%AD%D9%8A%D8%A7%D8%A9-%D8%A7%D9%84%D8%AA%D9%8A-%D9%8A%D9%85%D8%B1-%D8%A8%D9%87%D8%A7-r801/" rel="">دورة حياة تصميم المنتج</a>، بالإضافة إلى اختبارها على نطاق واسع.
</p>

<p>
	<strong>يمكن تلخيص الطريقة الصحيحة لتصميم الإشعارات بالنقاط التالية</strong>:
</p>

<ul>
	<li>
		ابدأ بتصميم الإشعارات مبكرًا وليس في مرحلة متأخرة.
	</li>
	<li>
		صنف الإشعارات وفق المستويات الثلاثة للأهمية: مرتفعة ومتوسطة ومنخفضة.
	</li>
	<li>
		اختر الألوان المرمِّزة والأيقونات وحدد مواضع الإشعارات.
	</li>
	<li>
		صنّف الإشعارات وفق كونها مستمرة أم مؤقتة، ووفق كونها بشكل نافذة منبثقة أم لافتة (بانر) أم مربع حوار أم غير ذلك.
	</li>
	<li>
		أدرج الإشعارات في نظام التصميم.
	</li>
</ul>

<p>
	تُعَد معرفة توقيت وكيفية استخدام الإشعارات أمرًا ضروريًا لتحسين قابلية الاستخدام وتوحيد معايير الرسائل في المنتج، كما أن النجاح في تقييم حاجة الرسائل الطرفية للوصول في التوقيت المناسب تساعد المصممين على زيادة كفاءة المنتج وتحسين تجربة المستخدم.
</p>

<h2 id="-6">
	مفاهيم أساسية
</h2>

<ul>
	<li>
		<strong>كيف أصمم الإشعارات؟</strong> ابدأ تصميم الإشعارات في مرحلة مبكرة ولا تؤجل ذلك. صنف الإشعارات وفق ثلاثة مستويات حسب أهميتها: مرتفعة ومتوسطة ومنخفضة، وصنفها وفق كونها مستمرةً أم مؤقتة، ووفق كونها بشكل نافذة منبثقة أم لافتة أم مربع حوار أم غير ذلك، واختر الألوان المرمِّزة والأيقونات وحدد مواضع الإشعارات، وأدرج الإشعارات في نظام التصميم.
	</li>
	<li>
		<strong>كيف أصمم إشعارات الدفع؟</strong> هناك نوعان من إشعارات الدفع:
		<ul>
			<li>
				تجارية: إيصال معلومة مرتقبة (مثل موعد مناسبة)
			</li>
			<li>
				تفاعلية: لأغراض تسويقية مثل إشعار حول تخفيضات قادمة؛ ولتكن إشعارات الدفع فعالة، إذ من الضروري جعلها قابلةً للتنفيذ وإضفاء طابع شخصي للمعلومات واختيار التوقيت المناسب وجعلها مثيرةً للاهتمام.
			</li>
		</ul>
	</li>
	<li>
		<strong>ما أنواع الإشعارات؟</strong> للإشعارات أنواع مختلفة تشمل:
		<ul>
			<li>
				الإشعارات التي ينشئُها المستخدم
			</li>
			<li>
				إشعارات الدفع
			</li>
			<li>
				الإشعارات السياقية
			</li>
			<li>
				الإشعارات التي ينشئُها النظام
			</li>
			<li>
				الإشعارات التي تحتاج إلى إجراء من المستخدم
			</li>
			<li>
				الإشعارات السلبية
			</li>
			<li>
				الإشعارات الذكية.
			</li>
		</ul>
	</li>
	<li>
		<strong>ما المقصود بالإشعارات ضمن التطبيق؟</strong> هي الإشعارات التي تظهر فقط داخل التطبيق عندما يكون مفتوحًا، وتستخدَم عادةً لتوجيه المستخدم نحو النقاط التي تثير اهتمامه بهدف تحسين كل من الاستخدام والاحتفاظ والقيمة الدائمة للعميل.
	</li>
	<li>
		<strong>ما المقصود بالتنبيه alert؟</strong> في سياق إشعارات تجربة المستخدم، التنبيه هو استجابة لحدث يلفت انتباه المستخدم، ويمكن جعله على شكل إشعار من خلال إرسال التطبيق رسالة يمكن أن يقرأها المستخدم دون الحاجة لفتح التطبيق، مثل التنبيه عبر رسالة بريد إلكتروني.
	</li>
	<li>
		<strong>ما الهدف من الإشعارات؟</strong> تهدف إشعارات تجربة المستخدم إلى إعطاء المستخدم ملاحظات أو تمكينه من رؤية حالة النظام أو إخباره بالأحداث أو دعوته لتنفيذ إجراء معين.
	</li>
</ul>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://www.toptal.com/designers/ux/notification-design" rel="external nofollow">A Comprehensive Guide to Notification Design</a> لصاحبته Sara Vilas Santiago.
</p>

<h2 id="-7">
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/illustration/%D9%82%D9%88%D8%A7%D8%B9%D8%AF-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D8%A3%D9%8A%D9%82%D9%88%D9%86%D8%A7%D8%AA-%D9%88%D8%A7%D9%84%D8%B4%D8%B9%D8%A7%D8%B1%D8%A7%D8%AA-r547/" rel="">قواعد تصميم الأيقونات والشعارات</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D8%AE%D8%B7%D9%88%D8%A9-%D8%A8%D8%AE%D8%B7%D9%88%D8%A9-%D9%84%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r836/" rel="">دليلك الشامل خطوة بخطوة لاحتراف تصميم تجربة المستخدم UX</a>
	</li>
	<li>
		النسخة الكاملة لكتاب: <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">مدخل إلى تجربة المستخدم (User Experience - UX)</a>
	</li>
	<li>
		النسخة الكاملة لكتاب: <a href="https://academy.hsoub.com/files/36-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ui/" rel="">مدخل إلى تصميم واجهات المستخدم UI</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">845</guid><pubDate>Fri, 01 Dec 2023 14:00:00 +0000</pubDate></item><item><title>&#x627;&#x644;&#x62A;&#x648;&#x639;&#x64A;&#x629; &#x628;&#x623;&#x647;&#x645;&#x64A;&#x629; &#x62A;&#x635;&#x645;&#x64A;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645;</title><link>https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AA%D9%88%D8%B9%D9%8A%D8%A9-%D8%A8%D8%A3%D9%87%D9%85%D9%8A%D8%A9-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r843/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2023_10/----.png.184fe80a7909ea7883048607dc3bf14e.png" /></p>
<p>
	يحتاج مصمم تجربة المستخدم إلى تسليط الضوء على القيمة التجارية للعمل الذي يؤديه ليتسنى لكل من مديريه وعملائه وزملائه إدراك أهمية هذا الدور، لكن التساؤل الذي قد يدور في أذهان الكثير من رواد هذا المجال هو كيف يتم تحقيق ذلك؟ وبطبيعة الحال، سينطلق الجواب من تعريفنا لمفهوم تجربة المستخدم UX.
</p>

<h2>
	ما الفرق بين تجربة المستخدم والفروع الأخرى للتصميم؟
</h2>

<p>
	لا يزال الكثير من الناس يجهلون الوظيفة الحقيقية لمصمم تجربة المستخدم، وربما يخلطون بين مصطلحَي <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">تجربة المستخدم</a> UX و<a href="https://academy.hsoub.com/design/user-interface/%D9%88%D8%A7%D8%AC%D9%87%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D8%A7%EF%BB%B7%D9%83%D8%AB%D8%B1-%D8%B4%D9%8A%D9%88%D8%B9%D8%A7-r737/" rel="">واجهة المستخدم</a> UI ويعتقدون أنهما مترادفَين، أو يعتقدون أن التصميم هو مجرد رسم لوحات جميلة.
</p>

<p>
	الحقيقة أن تصميم تجربة المستخدم لا يقتصر على تلك الواجهة الخارجية، بل يتعمق كثيرًا ليشمل جميع أجزاء التجربة الرقمية للعميل، من <a href="https://academy.hsoub.com/files/28-%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A5%D9%84%D9%89-%D8%AA%D8%AD%D8%B3%D9%8A%D9%86-%D9%85%D8%AD%D8%B1%D9%83%D8%A7%D8%AA-%D8%A7%D9%84%D8%A8%D8%AD%D8%AB-seo/" rel="">تحسين محركات البحث</a> SEO والمواقع الاجتماعية إلى تطبيقات البريد الإلكتروني ومواقع الويب وغيرها.
</p>

<p>
	يختلف بذلك تصميم تجربة المستخدم عن فروع التصميم الأخرى التي تركز على الجانب البصري، إذ يهتم <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D9%87%D8%A7%D9%85-%D9%85%D8%B5%D9%85%D9%85%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r24/" rel="">مصمم تجربة المستخدم</a> بالأداء والمحتوى وإمكانية الوصول بما لا يقل عن اهتمامه بالمظهر الخارجي، كما أنه يجمع بخبرته بين كل من علم النفس والترويج والكتابة التسويقية والتصميم.
</p>

<p>
	يتعين على مصممي تجربة المستخدم بذل المزيد من الجهد في التوعية بأهمية دورهم، من أجل إظهار القيمة التجارية business value التي تحملها هذه الوظيفة.
</p>

<h2>
	القيمة التجارية لتجربة المستخدم
</h2>

<p>
	يجب الانتباه إلى أن تسليط الضوء على القيمة التي توفرها <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-r149/" rel="">تجربة المستخدم</a> للمشروع التجاري يتطلب ألا تركز على المستخدم، بل على <a href="https://academy.hsoub.com/marketing/social-media/%D9%86%D8%B5%D8%A7%D8%A6%D8%AD-%D9%84%D8%B2%D9%8A%D8%A7%D8%AF%D8%A9-%D9%85%D8%B9%D8%AF%D9%84-%D8%A7%D9%84%D8%B9%D8%A7%D8%A6%D8%AF-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AB%D9%85%D8%A7%D8%B1-roi-%D9%81%D9%8A-%D8%A7%D9%84%D8%AA%D8%B3%D9%88%D9%8A%D9%82-%D8%B9%D8%A8%D8%B1-%D9%88%D8%B3%D8%A7%D8%A6%D9%84-%D8%A7%D9%84%D8%AA%D9%88%D8%A7%D8%B5%D9%84-%D8%A7%D9%84%D8%A7%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%D9%8A-r586/" rel="">العائد الاستثماري</a> الذي تقدمه تجربة المستخدم للفئة التي تتحدث معها، وتختلف طبيعة هذا العائد حسب الفئة. وقد لخص المدافع عن تجربة المستخدم جيريد سبول هذه الفكرةَ بكفاءة حين كتب:
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		يجب أولًا الاطلاع على الأفكار المسبقة التي يحملها المدير التنفيذي، وغالبًا ما يفكر المدير الناجح بالسعي لتحسين شيء ما، مثل تحسين العائدات أو تخفيض التكاليف أو زيادة عدد العملاء الجدد أو زيادة المبيعات للعملاء الحاليين أو زيادة قيمة المساهمين، وإن تجربة المستخدم الجيدة قادرة على المساعدة في تحقيق كل من هذه الأهداف.
	</p>
</blockquote>

<h3>
	التحدث مع المسوقين حول تصميم تجربة المستخدم
</h3>

<p>
	عندما تتحدث مع المسوقين يجب أن تركز على القيمة التجارية لتجربة المستخدم في التسويق، إذ يمكنك الحديث مثلًا عن التوصيات الشفهية والمراجعات الإيجابية وتحويل المستخدمين إلى مروّجين <a href="https://academy.hsoub.com/design/user-experience/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D8%A7%D8%A8%D8%AA%D9%83%D8%A7%D8%B1-%D8%A7%D9%84%D8%B9%D9%84%D8%A7%D9%85%D8%A9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A%D8%A9-r704/" rel="">للعلامة التجارية</a>، والأهم من ذلك أن عليك التركيز على تحسينات تجربة المستخدم بوصفها وسيلةً لاكتساب العملاء المحتملين وزيادة المبيعات، فهي <a href="https://academy.hsoub.com/marketing/performance-marketing/%D8%A3%D9%87%D9%85-%D9%85%D8%A4%D8%B4%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D8%A3%D8%AF%D8%A7%D8%A1-%D8%A7%D9%84%D8%AA%D8%B3%D9%88%D9%8A%D9%82%D9%8A%D8%A9-%D8%A7%D9%84%D8%AA%D9%8A-%D8%B9%D9%84%D9%89-%D9%83%D9%84-%D8%B4%D8%B1%D9%83%D8%A9-b2b-%D8%A7%D8%AA%D8%A8%D8%A7%D8%B9%D9%87%D8%A7-r413/" rel="">مؤشرات الأداء الرئيسية التي يراقبها المسوقون</a>.
</p>

<h3>
	التحدث مع فرق المبيعات أو التجارة
</h3>

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

<h3>
	إظهار قيمة تصميم تجربة المستخدم للتطبيقات الداخلية
</h3>

<p>
	إذا كنت تعمل على تصميم تطبيقات داخلية للموظفين، فكيف يمكن أن تركز على القيمة التي تقدمها للمستخدم؟ في هذه الحالة ربما لن يؤثر عملك مباشرةً على زيادة الأرباح، لكن لا شك أنه سيساعد على توفير وقت المستخدم (وهو الموظف هنا)، وبالتالي توفير المال على الشركة.
</p>

<p>
	تساعد جهودك في تصميم تجربة المستخدم لهذا النوع من التطبيقات على تقليل الوقت الذي يستغرقه الموظف لإتمام المهمات الحيوية، ومساعدته على تجنب الوقوع في الأخطاء، وتمكينه من الوصول السريع إلى المعلومات، وجميع هذه الأمور من شأنها تحسين كفاءة المؤسسة، الأمر الذي يُعَد ذا أهمية قصوى لفريق الإدارة العليا.
</p>

<p>
	بعد كل ما ذكرناه يبقى الكلام سهلًا، فإذا كنت تريد إثبات قيمة تصميم تجربة المستخدم على أرض الواقع، فعليك أن تدعم آراءك بالبيانات المؤيدة لها.
</p>

<h2>
	ما أهمية إحصائيات تجربة المستخدم؟
</h2>

<p>
	تحتاج إلى جمع البيانات والإحصائيات حول عملك لإثبات عائدات الاستثمار التي حققتَها للمشروع التجاري، لذا يجب أن تكتسب مهارة توظيف البيانات والأرقام في إقناع الآخرين بالقيمة التجارية لعملك.
</p>

<p>
	بعض البيانات متوفرة بسهولة، إذ توفر التحليلات ومنصات <a href="https://academy.hsoub.com/entrepreneurship/ecommerce/" rel="">التجارة الإلكترونية</a> وأدوات التسويق مثل <a href="https://www.hubspot.com/" rel="external nofollow">Hubspot</a> معطياتٍ قيّمة يمكن ربطها بتأثير تصميم تجربة المستخدم، كما تتوفر أدوات أكثر تخصصًا مثل <a href="https://vwo.com/" rel="external nofollow">VWO</a> تتيح المزيد من الإمكانيات، فهي تقدم كل ما قد تحتاجه مثل الخرائط الحرارية وأقماع تجربة المستخدم واختبارات أ/ب.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="137878" href="https://academy.hsoub.com/uploads/monthly_2023_10/01--VWO.png.1ea4631b30aed78abdfcd7eba004d7e2.png" rel=""><img alt="01-أداة-VWO.png" class="ipsImage ipsImage_thumbnailed" data-fileid="137878" data-ratio="66.67" data-unique="dcqa1kok2" style="width: 600px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_10/01--VWO.thumb.png.81852c21e602050bd84b66f0ab1b9489.png"></a>
</p>

<p>
	تُعَد VWO واحدةً من أفضل الأدوات لتوضيح الضرورة الملحة لتصميم تجربة المستخدم.
</p>

<p>
	لا نخفي سرًا إذا أقررنا بأنه على المصمم أحيانًا أن يكون مبدعًا ليتمكن من ربط البيانات بعمله بشكلٍ ما، فإن لم يكن فعليه تقديم بعض الافتراضات والتخمينات على الأقل، إذ يبقى ذلك أفضل من عدم تقديم أي دليل على الإطلاق لإثبات قيمة عمله.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="137877" href="https://academy.hsoub.com/uploads/monthly_2023_10/02-Microsoft-Clarity--.png.08934af3a03b2ab15049d8df8675d34d.png" rel=""><img alt="02-Microsoft-Clarity-مايكروسوفت-كلاريتي.png" class="ipsImage ipsImage_thumbnailed" data-fileid="137877" data-unique="jwyyx3tzj" style="width: 600px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_10/02-Microsoft-Clarity--.png.08934af3a03b2ab15049d8df8675d34d.png"> </a>
</p>

<p>
	إذا كنت مستجدًا أو لا تملك ميزانيةً كافية، فعندها يمكنك الاستفادة من منصة <a href="https://academy.hsoub.com/marketing/performance-marketing/analytics/%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%85%D8%A7%D9%8A%D9%83%D8%B1%D9%88%D8%B3%D9%88%D9%81%D8%AA-%D9%83%D9%84%D8%A7%D8%B1%D9%8A%D8%AA%D9%8A-microsoft-clarity-%D9%84%D9%81%D9%87%D9%85-%D8%B3%D9%84%D9%88%D9%83-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D9%8A%D9%86-r608//" rel="">Microsoft Clarity</a> التي تقدم بيانات حول قيمة تجربة المستخدم مجانًا.
</p>

<h2>
	ما أهمية تصميم تجربة المستخدم؟
</h2>

<p>
	يميل مصممو تجربة المستخدم في العادة إلى لربط أهمية تجربة المستخدم بتأثيرها الإيجابي على المستخدمين والعملاء بصورة رئيسية، لكنّ قيمتها الفعلية تكمن في المحصلة النهائية، ففي النهاية نحن نحسّن التجربة سعيًا لتحسين العائدات وتقليص الخسائر، ولو كان الهدف الجوهري ليس سوى منفعة الآخرين لكان من الأَولى أن نقدم منتجاتنا وخدماتنا مجانًا، فلا شك أن التجربة حينها ستكون أفضل. وإذا كنا نسعى لبيع قيمة تصميم تجربة المستخدم للآخرين، فيجب أن نركز على أهداف العمل أكثر من احتياجات المستخدم، وهذه هي الحقيقة المؤلمة لشبكة الإنترنت التي تحكُمها الأهداف التجارية.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://boagworld.com/usability/the-value-of-experience-design/" rel="external nofollow">Impress colleagues and clients with the value of experience design</a> لصاحبه Paul Boag.
</p>

<h2>
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%88%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ui-ux-r831/" rel="">تصميم واجهة المستخدم وتجربة المستخدم UI / UX</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r813/" rel="">الدليل الشامل لتصميم تجربة المستخدم UX</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D8%AE%D8%B7%D9%88%D8%A9-%D8%A8%D8%AE%D8%B7%D9%88%D8%A9-%D9%84%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r836/" rel="">دليلك الشامل خطوة بخطوة لاحتراف تصميم تجربة المستخدم UX</a>
	</li>
	<li>
		النسخة الكاملة لكتاب <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">مدخل إلى تجربة المستخدم (User Experience - UX)</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">843</guid><pubDate>Wed, 01 Nov 2023 14:01:01 +0000</pubDate></item><item><title>&#x623;&#x641;&#x636;&#x644; &#x627;&#x644;&#x623;&#x62F;&#x648;&#x627;&#x62A; &#x627;&#x644;&#x645;&#x648;&#x62B;&#x648;&#x642;&#x629; &#x644;&#x625;&#x62C;&#x631;&#x627;&#x621; &#x623;&#x628;&#x62D;&#x627;&#x62B; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645;</title><link>https://academy.hsoub.com/design/user-experience/%D8%A3%D9%81%D8%B6%D9%84-%D8%A7%D9%84%D8%A3%D8%AF%D9%88%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D9%88%D8%AB%D9%88%D9%82%D8%A9-%D9%84%D8%A5%D8%AC%D8%B1%D8%A7%D8%A1-%D8%A3%D8%A8%D8%AD%D8%A7%D8%AB-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r842/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2023_09/------.png.38f0a3d758ebf510a5f564959096ba2a.png" /></p>
<p>
	تجربة المستخدم الجيدة هي المفتاح الأساسي للنجاح، وسواء كان مشروعك أو خدمتك متصلًا أو غير متصل بالإنترنت، فإنك في حال لم تنجح بتقديم تجربة مستخدم جذابة فإن منافسيك سيستغلون نقطة الضعف هذه.
</p>

<p>
	لتجنب الوقوع في هذه المشاكل، يجب الاعتماد على أفضل أدوات إجراء <a href="https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D8%AC%D8%B1%D8%A7%D8%A1-%D8%A8%D8%AD%D8%AB-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%84%D8%AA%D8%AD%D8%B3%D9%8A%D9%86-%D9%85%D8%B4%D8%A7%D8%B1%D9%8A%D8%B9%D9%83-r635/" rel="">أبحاث تجربة المستخدم</a>، والتي تعمل على تحديد المشاكل الآنية وحلها، لكن في كثير من الأحيان يكون اتخاذ القرار بشأن الأداة المناسبة محيرًا بوجود عدد كبير من الأدوات المختلفة في العالم الرقمي، والتي تحير المحترفين من <a href="https://academy.hsoub.com/entrepreneurship/managementleadership/%D9%88%D8%B8%D9%8A%D9%81%D8%A9-%D9%85%D8%AF%D9%8A%D8%B1-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D9%85%D8%A7-%D8%B9%D9%84%D9%8A%D9%83-%D9%81%D8%B9%D9%84%D9%87-%D9%84%D8%AA%D8%AD%D8%B5%D9%84-%D8%B9%D9%84%D9%8A%D9%87%D8%A7-r854/" rel="">مديري المنتجات</a> ومصممي تجربة المستخدم والمسوقين، فضلًا عن الهواة والمبتدئين، وهنا تكمن صعوبة اختيار الأداة المناسبة.
</p>

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

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135907" href="https://academy.hsoub.com/uploads/monthly_2023_09/02----.png.1fb18813b5cdde2736b2585da36af394.png" rel=""><img alt="02-خصائص-أبحاث-تجربة-المستخدم.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135907" data-ratio="83.92" data-unique="3imhuxt3d" style="width: 550px; height: auto;" width="715" src="https://academy.hsoub.com/uploads/monthly_2023_09/02----.thumb.png.e66c706e7a7ba9209555943c5384b693.png"></a>
</p>

<h2>
	ما هي أدوات وبرامج أبحاث تجربة المستخدم؟
</h2>

<p>
	هي تقنيات أو طرائق تساعد على تحديد <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%B3%D9%84%D9%88%D9%83-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D9%87%D9%84%D9%83-r481/" rel="">سلوك المستخدم</a>. تساعد الأبحاث على فهم عقلية الجمهور المستهدف لتصميم منتجات أو خدمات مناسبة كفيلة بتقديم الحل الأنسب.
</p>

<p>
	عندما يتجه المشروع التجاري بالاتجاه الصحيح ويستهدف المكان الصحيح، تصبح فرص نجاحه عالية جدًا؛ أما في الحالة المعاكسة، فيصبح أشبه بالصيد في الأدغال بدلًا من التوجه نحو الهدف.
</p>

<p>
	في العالم الرقمي المعتمد على التقنيات الحديثة، لا تكتمل إستراتيجية المشروع التجاري دون إجراء أبحاث تجربة المستخدم، وغالبًا ما يضطر أولئك الذين يقللون من شأن أدوات أبحاث تجربة المستخدم إلى دفع الثمن غاليًا في النهاية، لذلك يُنصح دائمًا بالبحث عن مزود خدمة موثوق قبل الإطلاق النهائي <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">للمنتج</a> أو الخدمة إلى السوق.
</p>

<h2>
	فوائد برامج وأدوات أبحاث تجربة المستخدم
</h2>

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

<p>
	<strong>أهم فوائد أدوات أبحاث تجربة المستخدم:</strong>
</p>

<ul>
	<li>
		فهم تجربة المستخدم لإنشاء حلول أفضل.
	</li>
	<li>
		تعزيز فرص النجاح السريع بسبب الحاجة لوقت أقل للتسويق.
	</li>
	<li>
		تقليل النفقات الزائدة أو غير الضرورية.
	</li>
	<li>
		التخطيط السلس لتطوير المنتج.
	</li>
	<li>
		فهم العملاء المستهدفين والنقاط التي يعانون منها فهمًا أفضل.
	</li>
	<li>
		اتخاذ قرارات صائبة من خلال تطبيق تقنيات اختبار مختلفة قبل تصميم المنتج النهائي.
	</li>
	<li>
		تحديد معالم <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-r149/" rel="">تجربة المستخدم</a> الحقيقية وتحسينها وتقييمها وتصحيحها بكفاءة عالية.
	</li>
	<li>
		فهم موقف المستخدم وسلوكه وطريقة تفاعله لاستقطاب أكبر عدد من <a href="https://academy.hsoub.com/marketing/sales/%D8%A7%D9%84%D8%A8%D8%AD%D8%AB-%D8%B9%D9%86-%D8%A7%D9%84%D8%B9%D9%85%D9%84%D8%A7%D8%A1-%D8%A7%D9%84%D9%85%D8%B1%D8%AA%D9%82%D8%A8%D9%8A%D9%86-r649/" rel="">العملاء المحتملين</a>.
	</li>
</ul>

<h2>
	كيف تختار أفضل أدوات أبحاث تجربة المستخدم؟
</h2>

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

<p>
	تساعد الخطوات التالية على تحديد أهداف المشروع والتقنيات اللازمة لتحقيقها:
</p>

<ul>
	<li>
		<strong>فهم أهداف المشروع</strong>: وهو أول ما يجب عليك فعله، وبمجرد أن يصبح الهدف جليًا يمكن النظر إلى جوانب أخرى مثل الجمهور المستهدف أو احتياجات المستخدم أو سلوكه أو غير ذلك.
	</li>
	<li>
		<strong>فهم سلوك المستخدم</strong>: ركز بعد ذلك على فهم سلوك جمهورك المستهدف تجاه الخدمة أو المنتج الذي تريد تصميمه.
	</li>
	<li>
		<strong>فهم وجهة نظر المستخدم</strong>: لتتمكن من فهم سلوك المستخدمين، يجب أن تفكر من منظورهم.
	</li>
	<li>
		<strong>اختيار أدوات أبحاث تجربة المستخدم</strong>: لفهم العملية برمّتها فهمًا منهجيًا، استثمر في أدوات <a href="https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81-%D8%AA%D8%AC%D8%B1%D9%8A-%D8%A3%D8%A8%D8%AD%D8%A7%D8%AB-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D9%8A%D9%86-%D8%A8%D9%85%D9%81%D8%B1%D8%AF%D9%83-r780/" rel="">أبحاث تجربة المستخدم</a>، فهي تساعد على تقديم رؤية واضحة لأفكارك قبل تطوير المنتج أو إطلاقه، مما يوفر الوقت والجهد والمال ويعزز من فرص النجاح وتحقيق نتائج رائعة.
	</li>
</ul>

<h2>
	قائمة بأفضل 10 أدوات أبحاث تجربة المستخدم
</h2>

<ol>
	<li>
		كوالارو Qualaroo.
	</li>
	<li>
		بروبروفس سورفي ميكر ProProfs Survey Maker.
	</li>
	<li>
		ميز Maze.
	</li>
	<li>
		لوب11 Loop11.
	</li>
	<li>
		يوزرليتكس Userlytics.
	</li>
	<li>
		لوك باك Lookback.
	</li>
	<li>
		دسكوت Dscout.
	</li>
	<li>
		يوزر زوم UserZoom.
	</li>
	<li>
		يوزر إنترفيوز User Interviews.
	</li>
	<li>
		إثنيو.آي أو Ethnio.io.
	</li>
</ol>

<p>
	بعد أن اطلعت على هذه القائمة من الأدوات، قد تتساءل عن مزايا كل منها، لذا سنتعمق أكثر بالحديث عن استخدامات وخصائص كل من هذه البرامج.
</p>

<h3>
	كوالارو Qualaroo (يعتمد على الاستطلاعات)
</h3>

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

<p>
	<strong>استخداماته</strong>: تصميم اختبار للنموذج الأولي، واستطلاعات متعددة القنوات، واستطلاعات داخل المنتج، وتحليلات قائمة على <a href="https://academy.hsoub.com/programming/artificial-intelligence/" rel="">الذكاء الاصطناعي AI</a>، وغيرها.
</p>

<h3>
	بروبروفس سورفي ميكر ProProfs Survey Maker (لا يقتصر على الاستطلاعات)
</h3>

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

<p>
	<strong>استخداماته</strong>: التصويت والاستطلاعات والنماذج والاختبارات والشريط الجانبي للتعليقات.
</p>

<h3>
	ميز Maze (مجموعة أدوات متكاملة لتجربة المستخدم)
</h3>

<p>
	وهي الأداة الأفضل لمديري المنتجات وصانعي المحتوى و<a href="https://academy.hsoub.com/design/user-experience/%D9%85%D9%87%D8%A7%D9%85-%D9%85%D8%B5%D9%85%D9%85%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r24/" rel="">مصممي تجربة المستخدم</a>، وذلك نظرًا لاحتوائه على الكثير من الميزات. تسمح هذه الأداة باختبار المنتجات والنماذج الأولية لتقييم أفكار المحتوى وفحص <a href="https://academy.hsoub.com/marketing/performance-marketing/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D9%84%D9%83%D8%AA%D8%A7%D8%A8%D8%A9-%D8%A7%D9%84%D8%A5%D8%B9%D9%84%D8%A7%D9%86%D9%8A%D8%A9-%D9%84%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A%D8%A9-r519/" rel="">الكتابة التسويقية لموقع الويب</a> وجمع الملاحظات.
</p>

<p>
	<strong>استخداماته</strong>: اختبار الشجرة Tree testing وفرز البطاقات واختبار الخمس ثوانٍ واختبار النموذج الأولي واستطلاعات الملاحظات.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135906" href="https://academy.hsoub.com/uploads/monthly_2023_09/03-----.png.b473bea6d68e9a8fb30b41e8a3d4ec00.png" rel=""><img alt="03-طرائق-أبحاث-تجربة-المستخدم-الأكثر استخدامًا.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135906" data-ratio="109.89" data-unique="96y1d7jtw" width="546" src="https://academy.hsoub.com/uploads/monthly_2023_09/03-----.thumb.png.56753030d17fa0525ea23b6b005dd3d6.png"></a>
</p>

<h3>
	لوب11 Loop11 (أداة شائعة لاختبار قابلية الاستخدام)
</h3>

<p>
	وهي أشهر أداة لتقييم التصورات وتحسين المنتجات من بين أدوات أبحاث تجربة المستخدم، كما تقدم ميزات إضافية تتمثل بالسماح باختبار النماذج الأولية والمنتجات المعيارية وهندسة معلومات المنتج. يمكنك اختيار بيئة أساسية لاختبار قابلية استخدام خاضعة للإشراف أو غير خاضعة للإشراف.
</p>

<p>
	<strong>استخداماته</strong>: الاختبارات الخاضعة للإشراف أو غير الخاضعة للإشراف.
</p>

<h3>
	يوزرليتكس Userlytics (أداة اختبار قابلية استخدام الفكرة عن بعد)
</h3>

<p>
	تجعل هذه الأداة <a href="https://academy.hsoub.com/design/user-experience/%D9%82%D8%A7%D8%A8%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r728/" rel="">اختبار قابلية الاستخدام</a> عن بُعد سهلًا للغاية، مع توفير واجهة سهلة الاستخدام وخيارات متعددة للاختبار، كما يمكنك تصميم دراسات حول الاختبار والبدء بجمع الأفكار القيّمة. تتيح هذه الأداة أيضًا إمكانية إجراء مقابلات حية ومباشرة، مما يساعد على الاتصال مباشرةً مع المستخدمين بعد الاختبار لطرح أسئلة لاحقة.
</p>

<p>
	<strong>استخداماته</strong>: فرز البطاقات واختبار النموذج الأولي واختبار الشجرة.
</p>

<h3>
	لوك باك Lookback (برنامج متعدد المهام لتجربة المستخدم)
</h3>

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

<p>
	<strong>استخداماته</strong>: المقابلات الحية واختبار قابلية الاستخدام.
</p>

<h3>
	دسكوت Dscout (أداة نوعية رائدة للاختبار عن بعد)
</h3>

<p>
	وهي أداة نوعية رائعة لإجراء أبحاث تجربة المستخدم من خلال الاختبار عن بُعد بالإضافة إلى جمع بيانات منسجمة مع السياق حول المنتجات أو الخدمات. تساعد هذه الأداة على إنجاز عمليات متعددة مثل جمع ملاحظات حول النموذج الأولي وجمع المعلومات الأولية حول المنتج والتحليل التنافسي وإتمام العمل الميداني.
</p>

<p>
	<strong>استخداماته</strong>: اختبار قابلية الاستخدام عن بُعد، اختبار النموذج الأولي.
</p>

<h3>
	يوزر زوم UserZoom (أداة شائعة لاختبار قابلية الاستخدام عن بعد)
</h3>

<p>
	وهي أشهر أداة لإجراء اختبار قابلية استخدام عن بُعد للنماذج الأولية والمنتجات، ولديها أكبر قاعدة مشاركين مع خضوع ما يزيد عن 120 مليون مشارك للاختبار، وبالتالي فهي تسمح بإجراء اختبارات تجربة مستخدم بطرائق متعددة في أي مكان في العالم من أجل تحسين المنتجات.
</p>

<p>
	<strong>استخداماته</strong>: الاستطلاعات، اختبار تجربة المستخدم، اختبار الشجرة، فرز البطاقات.
</p>

<h3>
	يوزر إنترفيوز User Interviews (أداة توظيف المشاركين)
</h3>

<p>
	إذا لم توفَّق في إيجاد الجمهور المناسب لاختباراتك، فهذه هي الأداة المثالية التي عليك الاستثمار فيها، إذ أنها تمتلك قاعدة مشاركين أكبر، وتعمل بدقة أكبر قياسًا ببرامج أبحاث تجربة المستخدم الأخرى. وهنا يمكنك توظيف مشاركين مناسبين للاختبار والإشراف عليهم من أجل ضمان سرعة الاختبار وموثوقية البيانات.
</p>

<p>
	<strong>استخداماته</strong>: العثور على مشاركين في الاختبار.
</p>

<h3>
	إثنيو.آي أو Ethnio.io (منصة لإيجاد مشاركين في الاختبار)
</h3>

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

<p>
	<strong>استخداماته</strong>: العثور على مشاركين في الاختبار.
</p>

<h2>
	الخلاصة
</h2>

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

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://hackernoon.com/top-10-trustworthy-ux-research-tools" rel="external nofollow">Top 10 Trustworthy UX Research Tools</a> لصاحبه sahil-sachdeva.
</p>

<h2>
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%A5%D8%AC%D8%B1%D8%A7%D8%A1-%D8%A3%D8%A8%D8%AD%D8%A7%D8%AB-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r814/" rel="">الدليل الشامل لإجراء أبحاث تجربة المستخدم UX</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D8%A8%D8%AD%D8%AB-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D9%8F%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r29/" rel="">أساسيات البحث في تصميم تجربة المُستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81-%D8%AA%D8%AC%D8%B1%D9%8A-%D8%A3%D8%A8%D8%AD%D8%A7%D8%AB-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D9%8A%D9%86-%D8%A8%D9%85%D9%81%D8%B1%D8%AF%D9%83-r780/" rel="">كيف تجري أبحاث المستخدمين بمفردك</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D8%AC%D8%B1%D8%A7%D8%A1-%D8%A8%D8%AD%D8%AB-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%84%D8%AA%D8%AD%D8%B3%D9%8A%D9%86-%D9%85%D8%B4%D8%A7%D8%B1%D9%8A%D8%B9%D9%83-r635/" rel="">كيفية إجراء بحث في تجربة المستخدم لتحسين مشاريعك</a>
	</li>
	<li>
		النسخة الكاملة لكتاب <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">مدخل إلى تجربة المستخدم (User Experience - UX)</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">842</guid><pubDate>Sun, 15 Oct 2023 14:03:06 +0000</pubDate></item><item><title>&#x627;&#x644;&#x62F;&#x648;&#x631; &#x627;&#x644;&#x62E;&#x641;&#x64A; &#x644;&#x62E;&#x648;&#x641; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645; &#x639;&#x646;&#x62F; &#x627;&#x62A;&#x62E;&#x627;&#x630; &#x627;&#x644;&#x642;&#x631;&#x627;&#x631;</title><link>https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%88%D8%B1-%D8%A7%D9%84%D8%AE%D9%81%D9%8A-%D9%84%D8%AE%D9%88%D9%81-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D8%B9%D9%86%D8%AF-%D8%A7%D8%AA%D8%AE%D8%A7%D8%B0-%D8%A7%D9%84%D9%82%D8%B1%D8%A7%D8%B1-r841/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2023_09/1218411342_.png.f04fd33714cb2e929acca0d227e6b3a9.png" /></p>
<p>
	للخوف دور مهيمن في حياتنا وفي كل المجالات، مع ذلك استفادت منه العديد من المشاريع التجارية والمنتجات ونجحت بفضله. سنتحدث في هذا المقال عن بعض المخاوف التي تؤثر على اتخاذنا للقرارات، وكيف تستفيد المشاريع التجارية والمنتجات من هذا الشعور الفطري في تحقيق مصالحها، وكيف يمكن للمصمم تطبيق هذه المعلومات في عمله من أجل تصميم منتجات أفضل.
</p>

<p>
	تخيل أنك تمشي في طريق ترابية على مشارف غابة كثيفة، وفجأة تسمع حفيف الشجر وتلاحظ بطرف عينك أن هناك شيئًا كبيرًا برتقالي اللون في المكان، كيف ستكون ردة فعلك على ذلك؟ من المستبعد أن تواجه اليوم نمرًا بريًا إذا لم تكن تستقل شاحنة سفاري تحميك من التعرض للهجوم، لكن بالنسبة لأسلافنا فإن هذا كان يشكل تهديدًا حقيقيًا، وكما هو معروف، الخوف هو الاستجابة الغريزية للخطر المتوقع في هكذا مواقف، وهو مؤشر الإنذار في الدماغ الذي ينبهنا بأن شيئًا سيئًا على وشك الحدوث، فعندما نواجه مواقف مهددة للحياة يتحتم علينا اتخاذ قرارات سريعة لإنقاذ حياتنا، مثل الاستعداد للقتال أو الفرار.
</p>

<p>
	اليوم ولحسن الحظ، لا يفرض العالم الحديث مخاطر على حياتنا مشابهة لتلك التي واجهها أسلافنا، لكننا لا نزال نواجه مشاعر الخوف بدرجات متفاوتة في ظروف مختلفة غير مهددة للحياة. والكثير من مخاوف الحياة العصرية مشروطة؛ أي أننا نربط حالات معينة بتجارب سلبية أو أليمة.
</p>

<p>
	وسواءً كانت مخاوفنا غريزيةً أو مشروطة، فإنها قد ألهمت عددًا لا بأس به من المشاريع التجارية على مر السنين. لنلقِ نظرةً على بعض المخاوف التي نواجهها وكيف استغلتها المشاريع التجارية، وكيف يمكن تطبيق هذه المفاهيم في التصميم.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135898" href="https://academy.hsoub.com/uploads/monthly_2023_09/01-----.png.fcf8fc8e149d3fe2345d246faefdde8e.png" rel=""><img alt="01-دور-الخوف-في-اتخاذ-القرار.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135898" data-unique="srz945yt9" style="width: 650px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_09/01-----.thumb.png.e287a155a8782644d7be6bf332d79904.png"> </a>
</p>

<p>
	الخوف هو نظام التحذير في الدماغ للأحداث الوشيكة غير المرغوبة، فنحن مفطورون على التقاط الإشارات السلبية وإعطائها حجمًا أكبر من المكاسب الإيجابية، إذ نخاف من تفويت الفرص أو من وجود خيارات أفضل مما اتخذناه، كما نخاف من خسارة ممتلكاتنا ونخشى من الفراغ، حتى أن بعض الناس يقولون أنهم يخافون من "اللاشيء"، وهو ما قد يبدو في هذا السياق مرعبًا للغاية.
</p>

<h2>
	الانحياز للسلبية
</h2>

<p>
	غالبًا ما نميل للتركيز على إشارات الخطر أكثر من مصادر السرور، وتؤثر هذه السمة التكيفية التي تتمثل بترقب المخاطر باستمرار على نمط حياتنا الأكثر أمانًا نسبيًا.
</p>

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

<p>
	يؤثر الانحياز السلبي المرتبط بغريزة بقاء الإنسان تأثيرًا مباشرًا على <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D9%87%D8%A7%D9%85-%D9%85%D8%B5%D9%85%D9%85%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r24/" rel="">عمل مصمم تجربة المستخدم</a>: فوجود <strong>عيب واحد في قابلية الاستخدام لمنتجك كفيل بأن يغطي على جميع الميزات الرائعة التي صممتها في المنتج</strong>.
</p>

<p>
	على سبيل المثال، إذا طلب التطبيق من المستخدم تسجيل الدخول قبل أن يتمكن من الوصول إلى أي ميزة <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">للمنتج</a> أو الخدمة، ثم طلب منه اجتياز اختبار التحقق من أنه ليس روبوتًا، فمن المرجح أن يسبب ذلك إحباط المستخدم ومغادرته.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135896" href="https://academy.hsoub.com/uploads/monthly_2023_09/02------.png.d03f861984ddff21a2230da8a04e631c.png" rel=""><img alt="02-اختبار-التحقق-من-المستخدم-الإنسان-كابتشا.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135896" data-ratio="78.53" data-unique="4m6fzpwyv" style="width: 700px; height: auto;" width="764" src="https://academy.hsoub.com/uploads/monthly_2023_09/02------.thumb.png.1115423f759d713af9f80dcdd989ea36.png"></a>
</p>

<p>
	تطلب مواقع كثيرة من المستخدم إثبات أنه إنسان من أجل التخلص من تأثير البرامج الآلية، لكن ذلك يكون على حساب <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r813/" rel="">تجربة المستخدم</a>، وكلما ازداد تطور الروبوتات تصبح هذه الاختبارات أكثر تعقيدًا. كثيرًا ما تكون هذه الاختبارات صعبة الحل على المستخدمين، مما يعرقل عملهم لدرجة تحملهم على مغادرة الموقع أو التطبيق.
</p>

<h2>
	كره الخسارة
</h2>

<p>
	إذا طلب منك أحدهم رمي عملة بحيث تربح 10$ إذا ظهرت الصورة وتخسر 10$ إذا ظهرت الكتابة، فهل ستقبل اللعب؟ أجرى الباحثان الحاصلان على جائزة نوبل دانيال كانمان وعاموس تفيرسكي تجارب مشابهة على أرض الواقع ووجدا أن الناس رغبوا بالمشاركة فقط إذا كانت الأرباح ضعفَي الخسائر، وعرّفا من خلال هذه التجارب مفهوم كره الخسارة: <strong>الألم النفسي المرافق للخسارة أكبر بكثير من متعة الربح</strong>.
</p>

<p>
	ينطبق خوفنا من الخسارة هذا على الأشياء التي نمتلكها ولا نرغب بفقدانها مثل المال والصور التذكارية وبطاقات الحفلات، كما ينطبق أيضًا على الأشياء التي لا نمتلكها، مثلما هو الحال عندما يتعارض توقيت حدث رياضي مهم مع حدث مهم نرغب بحضوره، وهو ما يعرَف بالخوف من فوات الشيء (FOMO فومو).
</p>

<p>
	تعتمد معظم الحملات التسويقية على كره الخسارة والخوف من فوات الشيء، انطلاقًا من التخفيضات الموسمية إلى البضائع محدودة الإصدار، ومن حضور الحفلات إلى الأحداث الرياضية. على سبيل المثال، تجمع عروض لايتنينج Lightning من أمازون (العروض السريعة) بين التخفيضات على السعر ومحدودية الوقت والكمية لإثارة مشاعر الخوف من فوات العروض الجذابة لدى المستخدمين.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135902" href="https://academy.hsoub.com/uploads/monthly_2023_09/03---.png.1c398516e43df0ba21db64d6f9366beb.png" rel=""><img alt="03-عروض-أمازون-لايتنينج.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135902" data-ratio="43.67" data-unique="dnknimx72" style="width: 650px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_09/03---.thumb.png.284333be3f7e66097301d8e331996e55.png"></a>
</p>

<p>
	يقدم أمازون عروض لايتنينج قصيرة المدة لحث المستخدمين على الشراء، ويتضمن ذلك توفير المنتجات بسعر مخفَّض لمدة محدودة وبمخزون محدود. يُظهِر العد التنازلي أن هذا العرض الخاص متوفر لمدة 4 ساعات فقط، ويشير عدّاد التقدم الموجود فوق التوقيت إلى الكمية التي طُلِبت من هذا العرض، مما يجعل المستخدم يخشى نفاد المنتج قبل انتهاء العرض، كما أن المعلومات حول نسبة التوفير وطلب 65% من العرض تكررت مرتين على الصفحة لتحفيز المستخدمين أكثر على طلبه قبل أن ينفد.
</p>

<h2>
	تأثير الهبة
</h2>

<p>
	ربما لمست هذا التأثير عند محاولة تنظيف خزانتك والتخلص من الملابس والأشياء غير اللازمة. يشير تأثير الهِبة إلى ارتباطنا العاطفي بممتلكاتنا، إذ يصعب علينا التخلص من بعض الأشياء أكثر من غيرها، كما أننا <strong>نبالغ في قيمة هذه الأشياء أكثر مما تستحق</strong>، وهذا هو السبب الذي يجعل بعض الناس يطلبون عند بيع أغراضهم المستعملة أسعارًا أعلى مما قد يدفعه الآخرون لشرائها.
</p>

<p>
	ليس هناك ما هو أسوأ من أن تستيقظ لتجد أن ممتلكاتك قد اختفت، لكن هذا ما حصل بالفعل عام 2009 مع العملاء عندما حذف أمازون النسخ الرقمية للكتب من أجهزة كيندل، كما حصل أمر مشابه في عام 2018 عندما لاحظ مستخدمو آبل أن بعض الأفلام التي اشتروها قد اختفت من مكتبة أيتونز iTunes الخاصة بهم. خلافًا للكتب الورقية وأشرطة الكاسيت والأقراص المضغوطة، فإن ملكية الوسائط أو الخدمات المعتمدة على السحابة غير مطلقة، ويمكن للشركات الضخمة مثل أمازون وآبل الإفلات من العقوبات المترتبة على ذلك (إلى حد ما)، لكن من الأفضل للشركات الناشئة عدم استعداء المستخدمين.
</p>

<p>
	استفادةً من طبيعتنا المحبة للتملك، تلمح الكثير من البرامج وأدوات العمل الجماعي إلى الملكية من خلال استخدام كلمات مثل "عملي" أو "ملفاتي". تُدرِج بعض الاشتراكات أو خدمات SaaS (<a href="https://academy.hsoub.com/marketing/growth-hacking/%D8%AF%D9%84%D9%8A%D9%84-%D8%AA%D8%B3%D9%88%D9%8A%D9%82-%D8%B4%D8%B1%D9%83%D8%A7%D8%AA-%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D8%AE%D8%AF%D9%85%D9%8A%D8%A9-saas-%D9%84%D8%AA%D8%AD%D9%82%D9%8A%D9%82-%D8%A7%D9%84%D9%85%D8%B2%D9%8A%D8%AF-%D9%85%D9%86-%D8%A7%D9%84%D9%86%D9%85%D9%88-r355/" rel="">البرمجيات كخدمة</a>) إمكانية تخزين الملفات والنسخ الاحتياطي من ضمن الخدمات المدفوعة لتشجيع المستخدمين على اختيار الشراء.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135892" href="https://academy.hsoub.com/uploads/monthly_2023_09/05------.png.027b4fdd10110b8e72129a79aca3638a.png" rel=""><img alt="05-النسخ-الاحتياطي-والتخزين-في-دروب-بوكس.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135892" data-unique="g5yfmrj2k" style="width: 650px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_09/05------.thumb.png.89edb9afc7033597bb2ae3d439641880.png"> </a>
</p>

<p>
	تراعي خدمات التخزين السحابي مثل دروب بوكس هنا تأثير الهبة، وذلك من خلال تعهدها بحماية الممتلكات الرقمية عبر "أدوات مدمجة لاستعادة أي ملف وإصلاحه" والنسخ الاحتياطي التلقائي للصور ومقاطع الفيديو.
</p>

<h2>
	الخوف من وجود خيار أفضل
</h2>

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

<p>
	أفسح الإنترنت المجال لعالم واسع من الخيارات، إذ يمكن لأي شخص في أي مكان من العالم تقديم عروض أسعار للمستهلكين حول العالم، ولا شك أن وجود خيارات مختلفة أمر مرغوب، فأربعة خيارات أفضل من اثنين (وبالمناسبة، الخيار الواحد لا يسمى خيارًا، بل هو حشر في الزاوية)، إلا أن المقارنة بين ألف خيار تربكنا لدرجة عدم تمكننا من اتخاذ القرار على الإطلاق.
</p>

<p>
	لنلقِ نظرةً على خيارات التسعير في منصتين للاجتماعات عبر الفيديو: زوم Zoom وجوتوميتنج GoToMeeting. تقدم منصة زوم أربعة خطط رئيسية، لكن عند التدقيق نجد أكثر من 15 خيارًا موزعًا على فئات مختلفة مع إضافات أخرى ممكنة لكل منها. في المقابل فإن منصة جوتوميتنج المنافسة لها تطرح خيارات تسعير أبسط تساعد المستخدمين على اتخاذ القرار بسرعة.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135901" href="https://academy.hsoub.com/uploads/monthly_2023_09/06---Zoom-.png.24189b1d62f55aadfb1eb555fea62c0e.png" rel=""><img alt="06-تسعير-خدمات-Zoom-زوم.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135901" data-unique="jghhvw886" style="width: 700px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_09/06---Zoom-.thumb.png.d44774c6537f5627cf2a9a67e0d1e216.png"> </a>
</p>

<p>
	تقدم زوم أربعة خطط موزعة على النحو الآتي:
</p>

<ul>
	<li>
		أساسية
	</li>
	<li>
		متقدمة
	</li>
	<li>
		خطة الأعمال
	</li>
	<li>
		خطة المؤسسات
	</li>
</ul>

<p>
	لكن من خلال التدقيق نجد أن هذه الخطط هي فقط لاجتماعات زوم وأن هناك مجموعةً أخرى من الخطط للهواتف المحمولة وندوات الفيديو عبر الإنترنت والغرف. يضاف إلى ذلك خيارات تسعير منفصلة لكل من التعليم والرعاية الصحية عن بُعد والمطورين. لا شك بأن هذه المجموعة الكبيرة من الخيارات تسبب الحيرة لدى المستخدمين.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135897" href="https://academy.hsoub.com/uploads/monthly_2023_09/07---GoToMeeting-.png.13bfe2c809eeea4f9d2bb3db137f0e99.png" rel=""><img alt="07-تسعير-خدمات-GoToMeeting-جوتوميتنج.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135897" data-unique="lamymfwyj" style="width: 700px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_09/07---GoToMeeting-.thumb.png.f39d22a86de39830ad8b28e7c6ce2331.png"> </a>
</p>

<p>
	تتضمن صفحة التسعير في جوتوميتنج ثلاثة خيارات فقط، وهو ما يسهل على المستخدمين اتخاذ القرار حول الخطة المناسبة لمتطلباتهم.
</p>

<h2>
	رعب فاكوي
</h2>

<p>
	نشأ مفهوم رعب فاكوي في العصر الفكتوري (1837-1901)، وهو يعني <strong>الخوف من الفراغ</strong>. في ذلك الوقت كان ينظَر بازدراء إلى المساحات البيضاء في الأعمال الفنية، وكان الفنانون يخشون ترك أي مساحة فارغة، ويتبين من اللوحات المعقدة والأشكال المزخرفة والمنحوتات والنقوش المتشابكة أن المبدعين في الماضي كان لزامًا عليهم أن يملؤوا كل شبر من مساحة عملهم، كما لو كان ترك أي مساحة فارغة مؤشرًا على الكسل. في المقابل فإن التصميم العصري يدعو إلى البساطة، وبالنسبة لتصميم تجربة المستخدم فإن الأقل هو الأفضل، إذ تؤدي الواجهة المليئة بخيارات متعددة إلى إرباك المستخدمين.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135890" href="https://academy.hsoub.com/uploads/monthly_2023_09/08---.png.7f937ce68cfa230e7ac9cc82ad21d2bb.png" rel=""><img alt="08-بساطة-واجهة-جوجل.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135890" data-unique="96xvg2ro8" style="width: 800px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_09/08---.thumb.png.78b9c4f53bb69ab5d940dc5fbbfb7d60.png"> </a>
</p>

<p>
	يحتوي محرك بحث جوجل على حقل واحد فقط يتمركز في الواجهة، ورغم وجود روابط أخرى على الشاشة وزر لتسجيل الدخول، إلا أن الاستخدام السخي للمساحة البيضاء يركز انتباه المستخدم على الوظيفة الأساسية المتمثلة بالبحث.
</p>

<p>
	يأخذ الخوف من الفراغ معنى آخر في الواجهات ذات <strong>الحالات الفارغة</strong>، كما هو الحال في الواجهات التي تتطلب من المستخدمين إنشاء محتوى ومعالجته، مثل تطبيقات تحرير النصوص والصور، والتي من المرجح ألا تحتوي الشاشة الرئيسية فيها على أية بيانات.
</p>

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

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

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135894" href="https://academy.hsoub.com/uploads/monthly_2023_09/09----.png.3e43213b0851ec148c61bd16b7053451.png" rel=""><img alt="09-البريد الوارد-الخالي-في-ياهو.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135894" data-unique="p5i0oykkk" style="width: 550px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_09/09----.thumb.png.a25779a9903aa53037ef441e3313c308.png"> </a>
</p>

<p>
	يستخدم بريد ياهو رسوميات جذابة لإطلاع المستخدمين الجدد على الوظائف والميزات (على اليسار) وللاحتفال بخلو البريد الوارد عندما يعالج المستخدم جميع الرسائل ويؤرشفها (على اليمين).
</p>

<h2>
	ما هي مخاوف المستخدمين؟
</h2>

<p>
	الخوف عامل مهم جدًا في اتخاذ القرارات، والنقاط التي ذكرناها آنفًا ليست سوى بعض المخاوف العامة. هناك مشاعر أخرى قوية تؤثر على اتخاذ القرار، حيث تستغل تطبيقات التوصيل مثلًا الرغبة بالاستقلالية وحرية التنقل.
</p>

<p>
	يجب التركيز على مشاعر المستخدم عند إجراء مقابلات مع المستخدمين أو كتابة <a href="https://academy.hsoub.com/entrepreneurship/customer-care/5-%D8%A3%D8%B3%D8%A6%D9%84%D8%A9-%D9%8A%D8%AC%D8%A8-%D8%A3%D9%86-%D8%AA%D8%B7%D8%B1%D8%AD%D9%87%D8%A7-%D8%B9%D9%84%D9%89-%D8%B9%D9%85%D9%84%D8%A7%D8%A6%D9%83-%D9%81%D9%8A-%D8%A7%D8%B3%D8%AA%D8%B7%D9%84%D8%A7%D8%B9-%D8%A7%D9%84%D8%B1%D8%A3%D9%8A-r465/" rel="">أسئلة لاستطلاعات الرأي</a>، كما يجب فهم ما إذا كان الحل المطروح يسبب سيطرة مخاوف معينة على سلوك المستخدم. في حال الكشف عن وجود مثل هذه المخاوف، يمكن استخدم تقنيات مثل <a href="https://academy.hsoub.com/entrepreneurship/general/%D8%A7%D9%84%D9%84%D9%85%D8%A7%D8%B0%D8%A7%D8%AA-%D8%A7%D9%84%D8%AE%D9%85%D8%B3%D8%A9-the-5-whys-%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D8%A8%D8%B3%D9%8A%D8%B7%D8%A9-%D9%84%D9%81%D9%87%D9%85-%D8%A3%D9%8A-%D9%85%D8%B4%D9%83%D9%84%D8%A9-r149/" rel="">طريقة لماذا×5</a> للتحري عن الأسباب وتحديد درجة هذه المخاوف.
</p>

<p>
	إذا كانت القيمة المقترحة لمنتجك أو خدمتك لا تخاطب مخاوف الناس فهذا جانب إيجابي، لكن يمكنك الاستفادة من معرفتك للمخاوف في تصميم المنتجات والواجهات والعبارات الترويجية المصغرة والحملات التسويقية وسياسات التسعير. على سبيل المثال، تستفيد منصة ستيك stickK من مخاوف كره الخسارة لمساعدة المستخدمين على الإيفاء بالتزاماتهم، إذ يوقّع المستخدمون عقودًا مالية ويضعون أموالهم على المحك لتحفيزهم على تحقيق الأهداف التي وضعوها.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135900" href="https://academy.hsoub.com/uploads/monthly_2023_09/10--stickK-.png.9923f7f7de40517fa35b60702fb85ea3.png" rel=""><img alt="10-منصة-stickK-ستيك.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135900" data-unique="atpx48zwi" style="width: 700px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_09/10--stickK-.thumb.png.18f8f419d9639b363504cf0f2c2d22d7.png"> </a>
</p>

<p>
	عند وضع الأموال على المنصة، تعمل منصة ستيك للالتزام ومقرها الولايات المتحدة على تحفيز المستخدمين لتحقيق أهدافهم باستغلال خوفهم من الخسارة، مثل إنقاص الوزن أو الإقلاع عن التدخين أو غيرها من الأهداف التي قد يصعب على الناس الالتزام بها.
</p>

<h2>
	ما مدى أخلاقية استغلال المخاوف؟
</h2>

<p>
	في العديد من الأحيان نجد أن المشاريع التجارية والتصاميم لا تتماشى مع المعايير الأخلاقية، وقد درجت مع الزمن تسمية أنماط التصميم التي تستغل سلوكياتنا الفطرية <a href="https://academy.hsoub.com/design/user-experience/%D8%AE%D8%B7%D8%B1-%D8%A7%D9%84%D8%A3%D9%86%D9%85%D8%A7%D8%B7-%D8%A7%D9%84%D9%85%D8%B8%D9%84%D9%85%D8%A9-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r782/" rel="">بالأنماط المظلمة</a>.
</p>

<p>
	تُعَد <a href="https://academy.hsoub.com/marketing/social-media/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D9%88%D8%B3%D8%A7%D8%A6%D9%84-%D8%A7%D9%84%D8%AA%D9%88%D8%A7%D8%B5%D9%84-%D8%A7%D9%84%D8%A7%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%D9%8A-%D9%88%D8%A2%D9%84%D9%8A%D8%A9-%D8%B9%D9%85%D9%84%D9%87%D8%A7-r526/" rel="">وسائل التواصل الاجتماعي</a> من الأمثلة المباشرة للمشاريع والتصاميم الأكثر نجاحًا قياسًا بمدى تفاعل المستخدم واستخدام المنتج. تستفيد هذه المنصات من مخاوف كره الخسارة التي تحث المستخدمين على العودة إلى التطبيقات باستمرار، فأي إشعار من هذه التطبيقات يجعلنا نتساءل "ما الجديد؟ هل فاتني شيء ما؟".
</p>

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

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135895" href="https://academy.hsoub.com/uploads/monthly_2023_09/11---.png.f3dd76d50cfabc3c4e3c676291cdcf1e.png" rel=""><img alt="11-منصات-التواصل-الاجتماعي.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135895" data-unique="l1u60pkxj" style="width: 550px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_09/11---.thumb.png.66f557b0944c6a53bab2cf8f3475d5e1.png"> </a>
</p>

<p>
	نعيش في عالم فائق الترابط، وقد أصبح نشر المعلومات الحقيقية وكذلك المعلومات المضللة أسهل من أي وقت مضى.
</p>

<p>
	الحديث عن الجانب الأخلاقي لاستخدام أو إساءة استخدام خبرتنا بالسلوك البشري لا نهاية له، لكن الأهم هو أنه يتعين على المصممين إدراك قوة التصميم واستخدامها بحكمة.
</p>

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

<p>
	إساءة استخدام <a href="https://academy.hsoub.com/design/user-experience/%D9%86%D8%B5%D8%A7%D8%A6%D8%AD-%D9%85%D9%86-%D8%B9%D9%84%D9%85-%D8%A7%D9%84%D9%86%D9%81%D8%B3-%D8%A7%D9%84%D9%85%D8%B9%D8%B1%D9%81%D9%8A-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r750/" rel="">علم النفس البشري</a> لها حدود، فقد ساهمت الاحتجاجات العامة الهائلة بشأن قضايا الخصوصية ومخاوف إدمان الهواتف الذكية بدفع الحكومات والشركات إلى وضع تدابير وقائية؛ ففي عام 2018 مثلًا، طبقت المفوضية الأوروبية اللائحة العامة لحماية البيانات GDPR التي تنص على أن تكون التطبيقات الرقمية شفافة بشأن ماهية البيانات التي تجمعها وكيفية استخدامها واستئذان المستخدمين قبل جمعها.
</p>

<p>
	تقدم آبل لمستخدم الآيفون ملخصًا أسبوعيًا لعدد الساعات التي قضاها على الهاتف وتتيح إمكانية ضبط إعدادات ساعات العمل وأوقات النوم لمساعدة المستخدم على تقليل مصادر التشتت وتحسين الاسترخاء، وينبه إنستجرام المستخدمين من خلال رسالة "استطعت الوصول له بشكل كامل"، في حين يسمح يوتيوب للمستخدمين بإمكانية تفعيل خيار "تذكيري بالتوقف عن المشاهدة" للتخفيف من قضاء الوقت على التطبيق.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="135891" href="https://academy.hsoub.com/uploads/monthly_2023_09/12----.png.3cb56443bb6c63aff57b2a54df73711c.png" rel=""><img alt="12-تخفيف-إدمان-استخدام-التطبيقات.png" class="ipsImage ipsImage_thumbnailed" data-fileid="135891" data-ratio="58.00" data-unique="jx12w718g" style="width: 700px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_09/12----.thumb.png.08b1751d8d074ff6e53b97d5c7d3b3ce.png"></a>
</p>

<p>
	تنطبق مقولة "لا يمكنك خداع جميع الناس طوال الوقت" على المشاريع التي تستغل علم النفس البشري لصالحها، فقد أدى الوعي العام بخطر إدمان الهواتف الذكية إلى إدخال شركات مثل آبل وفيسبوك وجوجل ميزاتٍ إلى منتجاتها للتخفيف من الأوقات التي يقضيها المستخدم على الشاشة. على اليسار: يقدم آيفون شاشة قفل مبسطة لإزالة الإشعارات. في الوسط: ينبه إنستجرام مستخدميه بأنهم شاهدوا منشورات الأيام الثلاثة السابقة مما يطمئنهم بأنهم لم يفوّتوا أي شيء. على اليمين: يوقف يوتيوب الفيديو لتذكير المستخدم بأنه وصل إلى حصته اليومية من استخدام التطبيق.
</p>

<p>
	ليس بالضرورة أن تكون المخاوف مصدر لاستغلال المستخدمين، فقد شاهدنا منتجات مثل ستيك استفادت من الدوافع السلوكية لتغيير المستخدمين بطريقة إيجابية.
</p>

<h2>
	الخلاصة
</h2>

<p>
	للخوف دور كبير في <a href="https://academy.hsoub.com/entrepreneurship/managementleadership/%D8%AA%D8%AD%D8%B3%D9%8A%D9%86-%D8%AC%D9%88%D8%AF%D8%A9-%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D8%A7%D8%AA%D8%AE%D8%A7%D8%B0-%D8%A7%D9%84%D9%82%D8%B1%D8%A7%D8%B1%D8%A7%D8%AA-r545/" rel="">اتخاذ القرار</a>، ويمكن الاستفادة من معارفنا حول مخاوف المستخدم في إنشاء تصاميم تحفز المستخدمين على اختيار المنتجات أو شرائها.
</p>

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

<p>
	يدفعنا تأثير الهبة إلى تقدير ممتلكاتنا بأكثر مما تستحق فعليًا، مما يمكّن المصممين من ربط المستخدمين عاطفيًا بمنتجاتهم. يرتبط رعب فاكوي بالخوف من الفراغ، ورغم أن البساطة محبذة في تصميم واجهة المستخدم، إلا أن المساحات الفارغة غير الملائمة يمكن أن تخيف المستخدمين الجدد.
</p>

<p>
	عند استخدام معرفتك حول المخاوف بشكل مناسب، فعندها يمكنك الاستفادة منها في إنشاء منتجات جذابة، إلا أن التهور في إساءة استخدام الميل السلوكي البشري يمكن أن يكون كارثيًا.
</p>

<p>
	يتمتع التصميم والمصممون بقوة هائلة يجب استخدامها بمسؤولية من خلال الالتزام بالمعايير الأخلاقية، من أجل توجيه المخاوف بطريقة إيجابية تساعد على جعل العالم مكانًا أفضل.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://www.interaction-design.org/literature/article/be-afraid-the-silent-role-of-fear-in-decision-making" rel="external nofollow">Be Afraid! The Silent Role of Fear in Decision Making</a> لصاحبته Kasturika.
</p>

<h2>
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/entrepreneurship/managementleadership/%D8%B7%D8%B1%D9%82-%D9%85%D8%B9%D8%A7%D9%84%D8%AC%D8%A9-%D8%A7%D9%84%D8%AF%D9%85%D8%A7%D8%BA-%D9%84%D9%84%D9%85%D8%B9%D9%84%D9%88%D9%85%D8%A7%D8%AA-%D9%84%D8%A7%D8%AA%D8%AE%D8%A7%D8%B0-%D8%A7%D9%84%D9%82%D8%B1%D8%A7%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D9%86%D8%B8%D8%A7%D9%85-%D8%A7%D9%84%D8%AA%D8%A3%D9%85%D9%84%D9%8A-%D9%88%D8%A7%D9%84%D9%86%D8%B8%D8%A7%D9%85-%D8%A7%D9%84%D8%A7%D9%86%D9%81%D8%B9%D8%A7%D9%84%D9%8A-r543/" rel="">طرق معالجة الدماغ للمعلومات لاتخاذ القرارات: النظام التأملي والنظام الانفعالي</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%B9%D9%88%D8%A7%D9%85%D9%84-%D8%A7%D9%84%D9%85%D8%A4%D8%AB%D8%B1%D8%A9-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r776/" rel="">العوامل المؤثرة في تجربة المستخدم</a>
	</li>
	<li>
		النسخة العربية الكاملة لكتاب <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">مدخل إلى تجربة المستخدم (User Experience - UX)</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">841</guid><pubDate>Sun, 01 Oct 2023 14:05:04 +0000</pubDate></item><item><title>&#x627;&#x644;&#x627;&#x633;&#x62A;&#x62E;&#x62F;&#x627;&#x645; &#x627;&#x644;&#x623;&#x62E;&#x644;&#x627;&#x642;&#x64A; &#x644;&#x644;&#x62A;&#x644;&#x639;&#x64A;&#x628; &#x641;&#x64A; &#x62A;&#x635;&#x645;&#x64A;&#x645; &#x627;&#x644;&#x645;&#x646;&#x62A;&#x62C;&#x627;&#x62A;</title><link>https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%A7%D9%84%D8%A3%D8%AE%D9%84%D8%A7%D9%82%D9%8A-%D9%84%D9%84%D8%AA%D9%84%D8%B9%D9%8A%D8%A8-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-r840/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2023_08/-----.png.32f1f6ab6661e69363ae5824878a5b89.png" /></p>
<p>
	<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AA%D9%84%D8%B9%D9%8A%D8%A8-gamification-%D9%85%D8%B2%D8%AC-%D8%A7%D9%84%D8%B9%D9%85%D9%84-%D8%A8%D8%A7%D9%84%D9%84%D8%B9%D8%A8-r763/" rel="">التلعيب</a> هو أداة مؤثرة تعزز من تفاعل المستخدمين عند استخدامها في تصميم المنتج، مع ذلك قد تسبب الضرر إذا لم تخضع للفحص والرقابة. وعلى هذا الأساس، يمكن للمصممين إنشاء منتجات تحقق التوازن بين سلامة المستخدم ومتطلبات العميل من خلال الالتزام بحسن النوايا واتباع المعايير الأخلاقية.
</p>

<p>
	يعتمد استخدام التلعيب في التصميم على تقديم المكافآت لتوجيه <span ipsnoautolink="true">سلوك المستخدم</span>، ومن الأمثلة البسيطة على ذلك نذكر استخدام مقاييس التقدم مثل لوحات الصدارة أو الأوسمة. مع ذلك، التلعيب الحقيقي في التصميم له علاقة أعمق بعلم النفس السلوكي، ولا يقتصر على مجرد عملات يجمعها اللاعب كما هو الحال في لعبة ماريو كارت. ومع أن التلعيب يُعَد أداةً رائعةً لتعزيز <a href="https://academy.hsoub.com/entrepreneurship/ecommerce/%D9%83%D9%8A%D9%81-%D9%8A%D8%B3%D8%A7%D8%B9%D8%AF%D9%83-%D9%82%D9%8A%D8%A7%D8%B3-%D8%AA%D9%81%D8%A7%D8%B9%D9%84-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D9%8A%D9%86-%D8%B9%D9%84%D9%89-%D8%AE%D9%81%D8%B6-%D9%85%D8%B9%D8%AF%D9%84%D8%A7%D8%AA-%D9%86%D9%81%D9%88%D8%B1%D9%87%D9%85-r852/" rel="">تفاعل المستخدم</a> ومعدلات التحويل، إلا أنها سلاح ذو حدين.
</p>

<p>
	يتضمن التلعيب في المنتجات إنشاء دورة مكافآت تغمر الدماغ بالدوبامين، وهو ناقل عصبي يساعد الدماغ على ربط سلوكيات معينة بالشعور بالرضا، حيث ينتج الدوبامين طبيعيًا استجابةً للمواقف المختلفة في الحياة اليومية من لعب وتعلم، لكن إذا أُسيء استخدام دورة المكافآت أو عُدِّل عليها دون مراعاة التوازن الصحيح، فقد يسبب ذلك إدمان الناس على المنتجات التي تتضمن التلعيب.
</p>

<p>
	يحاول بعض المصممين الابتعاد عن عرض التلعيب كحلّ أولي للعملاء وأصحاب المشاريع، بسبب تأثيره قصير الأجل للميزات الجديدة وإمكانية إلحاقه الضرر بالمستخدمين.
</p>

<p>
	إذًا كيف يمكن للمصممين تحقيق الإيرادات مع الحفاظ على <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">تجربة مستخدم</a> صحية؟ ليست هناك طريقة مباشرة، لكن تقع على عاتق المصمم مسؤولية خاصة في الدفاع عن سلامة المستخدم تحت شعار حماية صحة المستهلك، ولو كان ذلك أحيانًا على حساب متطلبات العميل.
</p>

<h2>
	كيف يستفيد الدماغ من التلعيب
</h2>

<p>
	التلعيب مرغوب من قِبل كل من أصحاب المشاريع والمستخدمين، فهو يوجه <a href="https://academy.hsoub.com/marketing/performance-marketing/analytics/%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%85%D8%A7%D9%8A%D9%83%D8%B1%D9%88%D8%B3%D9%88%D9%81%D8%AA-%D9%83%D9%84%D8%A7%D8%B1%D9%8A%D8%AA%D9%8A-microsoft-clarity-%D9%84%D9%81%D9%87%D9%85-%D8%B3%D9%84%D9%88%D9%83-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D9%8A%D9%86-r608/" rel="">سلوك المستخدم</a> دون ملاحظته، وفيما يلي بعض الأساليب التي يؤثر بها على الدماغ:
</p>

<h3>
	تحسين التركيز
</h3>

<p>
	بيّنت إحدى الدراسات عام 2016 أن استخدام منتج تعليمي مزود بالتلعيب قد ساعد على إلغاء تنشيط مناطق الدماغ التي تشتت الأفكار، أي أن التركيز يصبح أكبر عندما نشعر بأننا نلعب لعبةً فقط.
</p>

<h3>
	المساعدة على التعلم
</h3>

<p>
	أظهرت دراسة مهمة عام 1998 أن الألعاب تغمر الدماغ بالدوبامين الذي يؤثر على منطقة الحُصَين من الدماغ، والتي تساهم بدورها بشكل رئيسي في الذاكرة والتعلم. باختصار، يبسّط الدوبامين التعلم ويجعله أكثر متعة.
</p>

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

<p>
	يؤثر التلعيب أيضًا على ميلنا للتعلم من خلال الدعم الإيجابي، إذ يقول مصمم المنتجات جيتيس ماركيفيشيوس:
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		"لقد ثبت في علم النفس أن إعطاء ملاحظات إيجابية أفضل من إعطاء ملاحظات سلبية، لذا فإن جميع التطبيقات تعتمد المبادئ نفسها: الإعجاب والمشاركة وما شابه ذلك".
	</p>
</blockquote>

<h3>
	تعزيز التفاعل والارتباط
</h3>

<p>
	يؤدي الحماس الذي تحصل عليه من هذه الدفعة من الدوبامين والنواقل العصبية الأخرى إلى دخولك في دورة التفاعل والارتباط، ويحصل الأمر كما يلي:
</p>

<ol>
	<li>
		تواجه التحدي.
	</li>
	<li>
		تتغلب عليه وتحقق الهدف.
	</li>
	<li>
		تحصل على جائزة.
	</li>
	<li>
		يراودك شعور رائع.
	</li>
	<li>
		تحتاج إلى المزيد من المشاعر الإيجابية فتطلب تحديًا جديدًا.
	</li>
</ol>

<p>
	في هذا المكان تحديدًا، يمكن أن يسير التصميم المتضمن للتعليب في الاتجاه الخاطئ.
</p>

<h2>
	زيادة الارتباط أم زيادة الإدمان؟
</h2>

<p>
	إستراتيجيات التلعيب الأكثر تحفيزًا لتفاعل المستخدم هي في الوقت نفسه أكثر إحداثًا للإدمان، إذ تحاول هذه التقنيات التلعيبية غير المشروعة (الأساليب المخادعة Black Hat) أن تُفقِد المستخدم السيطرة من خلال ترسيخ الحيرة والقلق.
</p>

<p>
	على سبيل المثال، ترسل بعض المتاجر الإلكترونية بريدًا إلكترونيًا يتضمن العروض في أيام التخفيضات الكبيرة مع ساعة للعد التنازلي في أعلى رسالة البريد الإلكتروني (الشعور بفوات الأوان)، ومربع يجب مسحه لمعرفة نسبة الحسم التي حصلت عليها بما يحاكي أسلوب امسح واربح (الفضول)، وحساب كمية المال الذي ستخسره إذا لم تتفاعل (الخسارة والتدارُك).
</p>

<p>
	إذا كان البريد الوارد لديك مليئًا بهذا النوع من الرسائل، فلا بد أنها تسبب لك الإرهاق وربما ترتب عليك الديون، فالتصميم الفعال قد يجعلك تتصرف عكس مصلحتك، أما التصميم الجيد فيعتمد في التلعيب على الأساليب السليمة White Hat للاستفادة من أهدافك وتفضيلاتك مع تشجيع التوازن في الحياة.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="133695" href="https://academy.hsoub.com/uploads/monthly_2023_08/02-----.png.d79465ecc468b182b587e28a902df975.png" rel=""><img alt="02-دوافع-القبعة-البيضاء-والقبعة-السوداء.png" class="ipsImage ipsImage_thumbnailed" data-fileid="133695" data-unique="hegdwgme1" src="https://academy.hsoub.com/uploads/monthly_2023_08/02-----.thumb.png.69f76d759bf9be0e4edbd78dfcd4ccd3.png"> </a>
</p>

<p>
	تحث دوافع القبعة السوداء المستخدمين على اتخاذ إجراء لكنها قد تسبب الإرهاق على المدى الطويل.
</p>

<h2>
	أفضل الممارسات للمصمم الأخلاقي
</h2>

<p>
	يمكن للمصمم الأخلاقي وأصحاب المشروع التجاري جني ثمار التلعيب من خلال ضمان أن تعود تجربة المستخدم بالفائدة على المستخدمين، وهو ما يمكن تحقيقه من خلال ما يلي:
</p>

<h3>
	اربط المحفزات السلوكية بفوائد حقيقية
</h3>

<p>
	يصبح التلعيب غير أخلاقي عندما يفقد المستخدم السيطرة على سلوكه أو لا يتلقى فوائد حقيقية مقابل وقته واهتمامه. وأحد أساليب تحقيق التوازن بين مصلحة المشروع التجاري ومصلحة المستهلك هو تصميم منتجات تتمحور حول <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AA%D9%84%D8%B9%D9%8A%D8%A8-gamification-%D8%A7%D9%84%D8%AF%D9%88%D8%A7%D9%81%D8%B9-r767/" rel="">الدوافع الجوهرية للمستخدمين</a>.
</p>

<p>
	تركز أساليب القبعة البيضاء للتلعيب في تجربة المستخدم على تمكين المستخدم وتعزيز شعوره بالمعنى والإنجاز والترابط، مما يُنشئ بدوره علاقة أكثر صحية واستدامة بين المستهلك <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">والمنتَج</a>. على سبيل المثال، فاز الأمريكي كيفين ريتشاردسون عام 2010 بمسابقة تصميم سويدية تتضمن تحدي المتسابقين لجعل التغييرات الاجتماعية الإيجابية ممتعة، حيث اقترح ريتشاردسون برنامجًا للأمان على الطرقات يُدخِل تلقائيًا السائقين الذين لا يتجاوزون حدود السرعة في قرعة اليانصيب. وفي وقت لاحق من ذلك العام، طبقت شركة فولكس فاغن الممولة للمسابقة هذه الفكرة على شارع متعدد المسارات، مما ساهم في خفض متوسط السرعة من 32 كم/سا إلى 25 كم/سا.
</p>

<p>
	في هذا المثا،ل يتجلى تصميم القبعة البيضاء بأبهى صوره، فقد أعطى فرصةً للمشاركين بتغيير سلوكهم مقابل فائدة حقيقية تعزز لديهم شعور التمكين (كسب المال) والبطولة (المساهمة في سلامة المجتمع).
</p>

<h3>
	استخدم محفزات القبعة السوداء باعتدال
</h3>

<p>
	مع أن تصميم القبعة البيضاء يعزز المشاعر الإيجابية لدى المستخدم، إلا أنه لا يحفزه أحيانًا لاتخاذ إجراء، وهنا تكمن مشكلته. ولهذا السبب فإن أساليب القبعة السوداء في التلعيب يمكن أن تكون مفيدةً في اللحظات المحورية من <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF-%D8%AE%D8%B1%D8%A7%D8%A6%D8%B7-%D8%B1%D8%AD%D9%84%D8%A9-%D8%A7%D9%84%D8%B9%D9%85%D9%8A%D9%84-r772/" rel="">رحلة المستخدم</a>.
</p>

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

<p>
	على سبيل المثال، قد يقدّم برنامج العضوية في جمعية خيرية ما أوسمةً لقاء التبرع أو حضور المناسبات. هنا سيكون جمع الأوسمة بمثابة محفز على الشعور بالإنجاز وإضفاء معنى بطولي، لكن في حال بقيت بعض المقاعد التي لم تتمكن الجمعية من بيعها لحفل قادم، فيمكن اللجوء إلى دوافع القبعة السوداء الأساسية مثل فوات الأوان للضغط على الناس من أجل شراء بطاقات، نظرًا لكون هذا الشراء يصب في دوافع القبعة البيضاء الأساسية (البطولة والمناشدة).
</p>

<h3>
	النوايا الحسنة غير كافية
</h3>

<p>
	نتائج تصميم القبعة البيضاء ليست دائمًا حميدة، تمامًا الأمر مع استخدام أساليب القبعة السوداء باعتدال الذي لا يُعَد دائمًا غير أخلاقي. على سبيل المثال، قد يرغب مصمم لتطبيق لياقة بدنية باستخدام دوافع القبعة البيضاء لتعزيز التفاعل، فيقرر تحفيز المستخدمين من خلال إضافة لوحة صدارة لقطع أكبر مسافة ممكنة أسبوعيًا على الدراجة. تبدو الفكرة جيدة إلى الآن، لكن في حال أصبح بعض المستخدمين مدمنين على الحفاظ على ترتيبهم على حساب صحتهم فعندها يبدأ التطبيق بتحفيز دوافع القبعة السوداء الأساسية مثل تجنب الخسارة.
</p>

<p>
	بمعنى آخر، لا يمكن التنبؤ بالتأثير المتبادل بين التصميم وعلم النفس، لذلك فإن النتائج لا تقل أهميةً عن النوايا عندما يتعلق الأمر ببناء علاقة صحية مع المستخدم.
</p>

<p>
	يقول أوليفر إيفيسوبولوس مصمم تجربة المستخدم ومؤسس تطبيق Filmshape: "إذا كانت الأخلاقيات تهدف إلى نفع المستخدمين قدر الإمكان مع التخلي أحيانًا عن جزء صغير من الأرباح لصالحهم، فأعتقد أن المصممين سيتمكنون من أداء دور رائع في تجارب التلعيب".
</p>

<p>
	وعن الشركات التي تزدهر اعتمادًا على إدمان المستخدمين، يقر إيفيسوبولوس بوجودها ويقول: "حضرت حوارًا لمنصة ألعاب معروفة عالميًا وكان المتحدث مدير تجربة مستخدم، وبالحديث عن تفاعل اللاعبين لأقصى وقت ممكن خلال الاختبار، سألت عما إذا كان هناك أي احتياطات تتعلق بالصحة الجسدية والنفسية للاعبين، فقال أنه لا يعلم بوجود أي منها".
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="133694" href="https://academy.hsoub.com/uploads/monthly_2023_08/03-------.png.74358b5b1d680fba3f415aabe594fc35.png" rel=""><img alt="03-توفيق-المصمم-بين-أهداف-العميل-واحتياجات-المستخدم.png" class="ipsImage ipsImage_thumbnailed" data-fileid="133694" data-ratio="54.67" data-unique="ilps811uj" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_08/03-------.thumb.png.70fbb9ed9f7aae6b052cd20867473765.png"></a>
</p>

<p>
	يجب أن يبحث المصمم الأخلاقي عن الأرضية المشتركة التي تجمع بين أهداف العميل واحتياجات المستخدم.
</p>

<h3>
	اعرف مستخدميك
</h3>

<p>
	إذا كانت مقاييس تفاعل المستخدم التي يراقبها العميل تعتمد على <a href="https://academy.hsoub.com/entrepreneurship/business/%D9%83%D9%84-%D9%85%D8%A7-%D8%AA%D9%88%D8%AF-%D9%85%D8%B9%D8%B1%D9%81%D8%AA%D9%87-%D8%B9%D9%86-%D9%85%D8%A4%D8%B4%D8%B1%D8%A7%D8%AA-%D9%82%D9%8A%D8%A7%D8%B3-%D8%A7%D9%84%D8%A3%D8%AF%D8%A7%D8%A1-kpis-r1003/" rel="">مؤشرات أداء رئيسية KPIs</a> عشوائية مثل عدد مرات فتح المستخدم للتطبيق، فمن المرجح ألا يشجع تصميمك على سلوك مُجدٍ أو مفيد، لذا يجب أن يتعاون المصمم مع العميل على وضع مؤشرات أداء رئيسية تعكس سلوك المستخدم وأهدافه واقعيًا.
</p>

<p>
	يقول إدوارد مور Edward Moore مصمم تجربة المستخدم والمستشار في التلعيب وخبير الواقع الافتراضي والواقع المعزز VR/AR:
</p>

<blockquote class="ipsQuote" data-gramm="false" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<div class="ipsQuote_contents ipsClearfix" data-gramm="false">
		<p>
			"استثمر الوقت في أبحاث المستخدمين وادرس دوافعهم الحقيقية على المستوى النفسي. ما السلوكيات التي تحاول تشجيعها؟ وما السلوكيات التي تناسبهم؟ وأي نوع من حلقات الملاحظات (التغذية الراجعة) فعالة وأيها غير فعالة لمشروعك؟"
		</p>
	</div>
</blockquote>

<p>
	يؤكد مور أنه بمجرد أن تحدد العادات التي ترغب بتشجيعها، يمكنك البدء بتعيين الأهداف وبناء آلية التغذية الراجعة في تجربة المستخدم.
</p>

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

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

<p>
	بعد تصميم هذه التصورات، يمكنك تجريبها على المستخدمين للتأكد من ملاءمتها لأهدافهم ودوافعهم بالشكل الذي تتوقعه.
</p>

<h3>
	راقب الآثار السلبية
</h3>

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

<p>
	يحذّر أوليس من صعوبة التأكد من أنك تحفز فقط السلوكيات المفيدة لكل من المشروع والمستخدم، وتعود هذه الصعوبة لثلاثة تحديات: اختيار السلوكيات التي يجب تشجيعها، وتحديد كيفية قياس هذه السلوكيات، وضمان أن المقياس الذي تتبعه يرتبط بشكل موثوق بالسلوكيات التي اخترتها.
</p>

<p>
	على سبيل المثال، إذا كان متجرك الإلكتروني يكافئ المستخدمين على إضافة مراجعاتهم للمنتجات، فقد يتجهون إلى كتابة مراجعاتهم حول منتجات لم يشتروها.
</p>

<p>
	يقول أوليس:
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		"من الصعوبة بمكان قياس الشيء الذي تريده بدلًا من شيء ينوب عن الذي تريده".
	</p>
</blockquote>

<p>
	<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AA%D9%84%D8%B9%D9%8A%D8%A8-gamification-%D8%A7%D9%84%D8%A5%D8%AF%D8%A7%D8%B1%D8%A9-%D9%88%D8%A7%D9%84%D9%85%D8%B1%D8%A7%D9%82%D8%A8%D8%A9-%D9%88%D8%A7%D9%84%D9%82%D9%8A%D8%A7%D8%B3-r769/" rel="">المراقبة والتكرار</a> هي الطريقة الوحيدة لضمان استفادة كل من الشركات والمستخدمين من التلعيب في المنتجات، ويجب أن تتضمن الأبحاث المستمرة نوعين من العناصر: نوعية (المقابلات أو استطلاعات المستخدمين) وكمية (التوجهات السائدة في البيانات السلوكية).
</p>

<p>
	إذا وجدت أن التلعيب في تجربة التسوق يجعل المستخدمين محدودي الدخل ينفقون أمولًا لا يملكونها، فيمكنك تعديله لجعله أقل إدمانًا؛ وإذا وجدت أن تطبيق اللياقة البدنية يجعل بعض المستخدمين يقيدون أنفسهم بعادات غذائية قاسية، فيمكنك الاستعاضة عن عداد السعرات الحرارية بعنصر يقيس الوارد الغذائي بصورة أكثر عمومية.
</p>

<h3>
	ضع حدود للتفاعل
</h3>

<p>
	قد يؤدي التعليب غير المراقَب مع الزمن إلى إرهاق المستخدم، لذا فإن وضع حد للتفاعل عندما يصبح مهددًا لصحة المستخدم وسلامته يُعَد من الممارسات الجيدة.
</p>

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

<p>
	عندما تتوقع أن تؤدي متطلبات العميل إلى عواقب سيئة أو خطيرة على المستخدمين، فعليك أن تتراجع. إذا لم يكن العميل مهتمًا بالحدود الأخلاقية، فيمكنك طرحها مجددًا كوسيلة لتحسين سمعة علامته التجارية وبناء قاعدة صحية من المستخدمين لمشروعه على المدى الطويل. تذكر أن كسب ثقة العميل أهم بكثير من الاحتفاظ به.
</p>

<h2>
	التلعيب غير الأخلاقي في تهديد
</h2>

<p>
	المستخدمون المدمنون يدرّون الأرباح، لذا فمن الصعب على التصميم الذي تقوده الأخلاقيات الفوز في النزال، لكن الجانب الإيجابي للمصممين الذين يهتمون بمصلحة المستخدم هو تزايد وعي المستخدمين وتمييزهم.
</p>

<p>
	مع استمرار تسليط الإعلام الضوء على تجارب المستخدم المتلاعبة، قد يبدأ المستخدمون بالاستغناء عنها لصالح المنتجات والتطبيقات والخدمات التلعيبية الأعلى قيمة التي تشجع نمط الحياة الصحي أو على الأقل تحد من الأنماط غير الصحية.
</p>

<p>
	هذه المطالبات المتزايدة <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AA%D9%84%D8%B9%D9%8A%D8%A8-gamification-%D8%A7%D9%84%D8%B6%D9%88%D8%A7%D8%A8%D8%B7-%D8%A7%D9%84%D9%82%D8%A7%D9%86%D9%88%D9%86%D9%8A%D8%A9-%D9%88%D8%A7%D9%84%D8%A3%D8%AE%D9%84%D8%A7%D9%82%D9%8A%D8%A9-r770/" rel="">بالمسؤوليات الأخلاقية</a> تدعو أيضًا المصممين لإعادة التفكير بكيفية الموازنة بين متطلبات العميل وسلامة المجتمع عند دمج التلعيب في تصميم المنتجات.
</p>

<h2>
	مفاهيم أساسية
</h2>

<ul>
	<li>
		<strong>كيف تجعل المنتج تلعيبيًا؟</strong> لتلعيب المنتجات، يلجأ المصممون إلى استخدام محفزات على مبدأ الألعاب للحث على التفاعل، وقد يكون ذلك من خلال إضافة الأوسمة أو لوحات الصدارة أو العملات أو غيرها من مقاييس التقدم والمكافآت.
	</li>
	<li>
		<strong>ما هي تقنيات التلعيب؟</strong> <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AA%D9%84%D8%B9%D9%8A%D8%A8-gamification-%D8%A7%D9%84%D8%AA%D9%82%D9%86%D9%8A%D8%A7%D8%AA-r768/" rel="">التقنيات</a> هي العنصر الذي يحفز المستخدمين للتفاعل مع المنتج مقابل الشعور بالمتعة أو الإنجاز أو التأثير الاجتماعي أو جوائز خارجية، مثل لوحات الصدارة وأشرطة التقدم وأوسمة الإنجازات.
	</li>
	<li>
		<strong>ما فوائد التلعيب؟</strong> تساعد إستراتيجيات التلعيب على التركيز وتسهل التعلم وتحسن التفاعل مع المنتج أو مع المجتمع.
	</li>
</ul>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://www.toptal.com/designers/gamification-design/meaningful-gamification-in-product-design" rel="external nofollow">How Product Designers Can Use Gamification for Good</a> لصاحبه Alexandre Brito.
</p>

<h2>
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AA%D9%84%D8%B9%D9%8A%D8%A8-gamification-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D8%AA%D9%85%D8%AD%D9%88%D8%B1-%D8%AD%D9%88%D9%84-%D8%A7%D9%84%D9%84%D8%A7%D8%B9%D8%A8-r764/" rel="">التلعيب Gamification: التصميم المتمحور حول اللاعب</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AA%D9%84%D8%B9%D9%8A%D8%A8-gamification-%D8%A7%D9%84%D8%A5%D8%AF%D8%A7%D8%B1%D8%A9-%D9%88%D8%A7%D9%84%D9%85%D8%B1%D8%A7%D9%82%D8%A8%D8%A9-%D9%88%D8%A7%D9%84%D9%82%D9%8A%D8%A7%D8%B3-r769/" rel="">التلعيب Gamification: الإدارة والمراقبة والقياس</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AA%D9%84%D8%B9%D9%8A%D8%A8-gamification-%D8%A7%D9%84%D8%AA%D9%82%D9%86%D9%8A%D8%A7%D8%AA-r768/" rel="">التلعيب Gamification: التقنيات</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AA%D9%84%D8%B9%D9%8A%D8%A8-gamification-%D8%A3%D9%85%D8%AB%D9%84%D8%A9-%D8%B9%D9%86-%D8%A7%D9%84%D8%AA%D9%84%D8%B9%D9%8A%D8%A8-%D9%81%D9%8A-%D8%A7%D9%84%D9%85%D8%A4%D8%B3%D8%B3%D8%A7%D8%AA-r771/" rel="">التلعيب Gamification: أمثلة عن التلعيب في المؤسسات</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">840</guid><pubDate>Fri, 15 Sep 2023 14:00:01 +0000</pubDate></item><item><title>&#x643;&#x64A;&#x641;&#x64A;&#x629; &#x627;&#x62E;&#x62A;&#x628;&#x627;&#x631; &#x62A;&#x635;&#x645;&#x64A;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645; UX</title><link>https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A7%D8%AE%D8%AA%D8%A8%D8%A7%D8%B1-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r839/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2023_08/-----UX.png.589632b201cb78812ca8077260102ac1.png" /></p>
<p>
	تزداد أهمية اختبار <a href="https://academy.hsoub.com/design/user-experience/%D9%86%D9%82%D8%B7%D8%A9-%D8%A7%D9%84%D8%AA%D8%AD%D9%88%D9%84-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r783/" rel="">تصميم تجربة المستخدم UX</a> يومًا بعد يوم، فهو يتيح لك إمكانية معرفة مدى نجاح تصميمك، وما إذا كان يناسب المستخدمين أم لا؛ كما أنه يساعدك على معرفة المشكلات التي قد تواجه المستخدمين وحلها، إضافةً إلى اختبار جوانب أخرى من منتجك أو خدمتك.
</p>

<h2>
	الخطوة الأولى: تحديد المشكلة
</h2>

<p>
	قبل البدء في البحث عن حلول لمشكلات <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">منتجك</a>، يجب عليك تحديد ماهية المشكلات وأسبابها، ومن ثم تحديد أهدافك، لتستمر في التركيز عليها. لا تشتت انتباهك بأهداف الآخرين أو بأهدافك الداخلية الأخرى، بل ركز في هذه المرحلة على النقاط المهمة وتأكد من توافقها مع احتياجات مستخدمي منتجك.
</p>

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

<h2>
	الخطوة الثانية: تحديد النطاق
</h2>

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

<p>
	يجب أن تحدد أهداف المشروع وغاياته، وذلك من خلال الإجابة عن الأسئلة التالية:
</p>

<ul>
	<li>
		ما الذي تأمل في تحقيقه من خلال هذا التصميم؟
	</li>
	<li>
		ما هي طموحات المستخدمين؟
	</li>
	<li>
		ما هي أهداف المطورين؟
	</li>
	<li>
		ما هي أهداف أصحاب العمل، مثل مديري الشركة؟
	</li>
	<li>
		ما الذي سيحدث عند اكتمال المشروع أو عدم اكتماله؟
	</li>
	<li>
		كم من الوقت سيستغرق حتى يكتمل الهدف؟ على سبيل المثال، ما هو تاريخ الإصدار؟
	</li>
</ul>

<p>
	يجب الإجابة عن هذه الأسئلة مبكرًا حتى يتمكن كل مشارك في هذا المشروع -بما في ذلك المصممون- من فهم سبب عملهم على شيء محدد في تلك الفترة.
</p>

<h2>
	الخطوة الثالثة: تطوير فرضية
</h2>

<p>
	لديك فكرة رائعة عن منتج أو خدمة، لكنك تحتاج إلى معرفة كيفية عملها! تتمثل الخطوة الأولى لاختبار تصميم تجربة المستخدم الذي أنشأته في تحديد المشكلة التي تحاول حلها، والتي يمكن أن تتمثل في: "كيف أجعل موقعي الإلكتروني أكثر سهولةً للمستخدمين؟"، أو أن تكون "كيف أجعل الناس مهتمين بالتبرع بالمال؟". بمجرد تحديد السؤال الذي يحتاج إلى إجابة، فإنه بإمكانك تطوير فرضية تجيب عن هذا السؤال، ومن ثم اختبارها عن طريق إنشاء نماذج أولية مبنية على نتائج بحثك.
</p>

<p>
	عندما تصمم <a href="https://academy.hsoub.com/freelance/productivity/%D8%A7%D9%84%D9%81%D9%88%D8%A7%D8%A6%D8%AF-%D8%A7%D9%84%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D9%84%D8%A8%D9%86%D8%A7%D8%A1-%D8%A7%D9%84%D9%86%D9%85%D8%A7%D8%B0%D8%AC-%D8%A7%D9%84%D8%A3%D9%88%D9%84%D9%8A%D8%A9-r236/" rel="">النماذج الأولية</a> وتختبرها مع المستخدمين، اجمع التعليقات على هذه النماذج حتى تتمكن من تحسينها، وسنتحدث بتفصيل أكبر عن النماذج الأولية أدناه.
</p>

<h2>
	الخطوة الرابعة: تصميم نموذج أولي
</h2>

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

<p>
	من ناحية أخرى، إذا كنت تنشئ موقعًا تفاعليًا يوضح للناس كيفية نمو شعرهم مرةً أخرى بعد العلاج الكيميائي، فربما يكون من المنطقي أن تبدأ من نقطة الصفر عوضًا عن استخدام منصة شخص آخر.
</p>

<p>
	أفضل طريقة تستخدمها الشركات عادةً لتصميم تطبيقات الهواتف المحمولة هي تصميم نماذج أولية باستخدام الأدوات المختلفة، مثل أداة <a href="https://academy.hsoub.com/design/user-interface/%D8%AE%D8%B7%D9%88%D8%A7%D8%AA-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-%D9%85%D9%86-%D8%A7%D9%84%D8%B5%D9%81%D8%B1-%D9%88%D9%81%D9%82-%D8%A7%D9%84%D9%85%D8%B9%D8%A7%D9%8A%D9%8A%D8%B1-%D8%A7%D9%84%D8%B5%D8%AD%D9%8A%D8%AD%D8%A9-%D8%A8%D8%A7%D8%B3%D8%AA%D8%B9%D9%85%D8%A7%D9%84-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-%D8%B1%D8%B3%D9%85-%D8%A7%D9%84%D8%A5%D8%B7%D8%A7%D8%B1%D8%A7%D8%AA-balsamiq-r535/" rel="">بالسميك Balsamiq</a> أو أداة OmniGraffle، ومن ثم الانتقال إلى بناء التصميمات المرئية باستخدام سكتش Sketch أو فيجما Figma حالما يبدو كل شيء جيدًا بما فيه الكفاية للانتقال إلى هذه المرحلة.
</p>

<h2>
	الخطوة الخامسة: إجراء اختبار قابلية الاستخدام
</h2>

<p>
	يُعَد <a href="https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D8%AC%D8%B1%D8%A7%D8%A1-%D8%A7%D8%AE%D8%AA%D8%A8%D8%A7%D8%B1-%D9%82%D8%A7%D8%A8%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%BA%D9%8A%D8%B1-%D8%A7%D9%84%D9%85%D8%B1%D8%A7%D9%82%D8%A8-unmoderated-usability-testing-r789/" rel="">اختبار قابلية الاستخدام</a> هو الجزء الأهم في أي مشروع، إذ يحتوي على <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">تصميم تجربة المستخدم</a>، ويمكنك من خلاله اكتشاف ما سيفعله المستخدمون بمنتجك وكيف يشعرون به.
</p>

<p>
	يجب أن يركز اختبار قابلية الاستخدام على أمر واحد في كل مرة، وهو الشيء الذي يجب اختباره بصورة ضرورية للمشروع، أي أنه يجب عليك أن تسأل نفسك في كل مرة: "ما هو أهم شيء يجب أن أختبره في هذه المرحلة؟".
</p>

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

<h2>
	جمع التعليقات على النماذج الأولية
</h2>

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

<p>
	أولًا وقبل أي شيء، احرص على أن تكون منفتحًا بشأن ما يقوله الناس عن تجربتهم مع منتجك. لا تفترض أن الجميع سيحبون كل شيء عن منتجك، لذا حاول ألا تنتقد بشدة التعليقات الواردة من الآخرين على <a href="https://academy.hsoub.com/marketing/social-media/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D9%88%D8%B3%D8%A7%D8%A6%D9%84-%D8%A7%D9%84%D8%AA%D9%88%D8%A7%D8%B5%D9%84-%D8%A7%D9%84%D8%A7%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%D9%8A-%D9%88%D8%A2%D9%84%D9%8A%D8%A9-%D8%B9%D9%85%D9%84%D9%87%D8%A7-r526/" rel="">وسائل التواصل الاجتماعي</a>، أو في أي مكان آخر ما لم تكن موجهة إليك شخصيًا.
</p>

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

<p>
	هناك طريقة أكثر فاعليةً لاختبار تصميماتك، وذلك من خلال إنشاء نموذج أولي وإجراء اختبارات قابلية الاستخدام مع مستخدمين حقيقيين وجمع التعليقات على نماذجك الأولية.
</p>

<p>
	النموذج الأولي هو الخطوة الأولى في عملية اختبار تصميمك، إذ يساعدك على تحديد أي مشكلات يحتمل وجودها في تصميمك، ويتيح لك إمكانية إصلاحها قبل الانتقال إلى مراحل اختبار أخرى، مثل <a href="https://academy.hsoub.com/marketing/inbound-marketing/%D9%83%D9%8A%D9%81-%D8%AA%D8%AC%D8%B1%D9%8A-%D8%A7%D8%AE%D8%AA%D8%A8%D8%A7%D8%B1-ab-tests-%D8%A8%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-%D8%B5%D8%AD%D9%8A%D8%AD%D8%A9-r253/" rel="">اختبار A/B</a>. ويمكنك استخدام أدوات مختلفة لبناء النماذج الأولية، مثل أداة Axure أو أداة Balsamiq Mockups، فهي أدوات سهلة الاستخدام وسريعة ومعقولة التكلفة.
</p>

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

<h2>
	في الختام
</h2>

<p>
	على الرغم من أنه ليس من السهل إنشاء تصميم لمنتج ما، إلا أن الأمر يستحق ذلك العناء، وهذا لأن التصميم الجيد سيساعد مستخدمي منتجك ويزيد من تفاعلهم مع علامتك التجارية. وأخيرًا، نأمل أن يساعدك هذا المقال على فهم كيفية اختبار تصميم تطبيقات الهواتف المحمولة والتحقق من صحة أفكارك قبل تحويلها إلى منتج فعلي.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://hackernoon.com/how-to-test-ux-design-ux-problem-validation-and-user-testing" rel="external nofollow">How to Test UX Design: UX Problem, Validation &amp; User Testing</a> لصاحبه Keith David.
</p>

<h2>
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r813/" rel="">الدليل الشامل لتصميم تجربة المستخدم UX</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A3%D9%81%D8%B6%D9%84-%D8%AE%D9%85%D8%B3-%D8%B7%D8%B1%D9%82-%D8%A7%D8%AE%D8%AA%D8%A8%D8%A7%D8%B1-%D9%84%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r385/" rel="">أفضل خمس طرق اختبار للمستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D8%AE%D8%AA%D8%A8%D8%A7%D8%B1%D8%A7%D8%AA-%D8%A3%D8%A8-ab-test-%D9%81%D9%8A-%D9%85%D8%AC%D8%A7%D9%84-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r261/" rel="">اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%B1%D8%B3%D9%85-%D9%85%D8%AE%D8%B7%D8%B7-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-%D8%A8%D8%AE%D8%B7%D9%88%D8%A7%D8%AA-%D8%B3%D9%87%D9%84%D8%A9-r815/" rel="">رسم مخطط لتصميم تجربة المستخدم UX بخطوات سهلة</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">839</guid><pubDate>Fri, 01 Sep 2023 14:00:00 +0000</pubDate></item><item><title>&#x623;&#x647;&#x645; &#x627;&#x62A;&#x62C;&#x627;&#x647;&#x627;&#x62A; &#x62A;&#x635;&#x645;&#x64A;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645; UX &#x648;&#x627;&#x644;&#x62A;&#x64A; &#x64A;&#x62C;&#x628; &#x645;&#x62A;&#x627;&#x628;&#x639;&#x62A;&#x647;&#x627;</title><link>https://academy.hsoub.com/design/user-experience/%D8%A3%D9%87%D9%85-%D8%A7%D8%AA%D8%AC%D8%A7%D9%87%D8%A7%D8%AA-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-%D9%88%D8%A7%D9%84%D8%AA%D9%8A-%D9%8A%D8%AC%D8%A8-%D9%85%D8%AA%D8%A7%D8%A8%D8%B9%D8%AA%D9%87%D8%A7-r837/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2023_08/-----UX---.png.915ebc411e3d8bf01426302bfceff1ff.png" /></p>
<p>
	إذا راقبت العالم الرقمي من حولك عن كثب، فستلاحظ أن تصميمات تجربة المستخدم UX تتغير باستمرار بعد كل تحديث مهم، فعلى سبيل المثال، كانت واجهة نظام التشغيل أندرويد Android بسيطةً جدًا عند إطلاقه لأول مرة، ولكن على مدار العقد الماضي، شهدت الواجهة قدرًا كبيرًا من التطوير.
</p>

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

<p>
	سنتناول في هذا المقال بعض الاتجاهات المهمة في تصميم تجربة المستخدم UX، والتي يجب متابعتها والاهتمام بها لعام 2022، ولكن قبل ذلك، دعنا نناقش أهمية تصميم تجربة المستخدم.
</p>

<h1>
	ما أهمية تصميم تجربة المستخدم UX؟
</h1>

<p>
	تختلف رسائل التصميم اختلافًا كبيرًا بناءً على كيفية تفسير الأفراد لها، ويصبح الأمر أكثر صعوبةً عندما يتعلق <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-r149/" rel="">بتجربة المستخدم</a>، إذا يجب على سبيل المثال ملاحظة تأثير زر تطبيق معين على المستخدم. لماذا اختاروا الضغط على زر "موافق" للتمرير إلى الصفحة التالية؟ لماذا أغلقوا التطبيق؟ لماذا تخطوا لوحة التحكم؟ عندما تفكر في كل هذه الأشياء، فستدرك بسرعة أن <a href="https://academy.hsoub.com/design/user-experience/%D8%A8%D8%B9%D8%B6-%D8%A7%D9%84%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%A7%D9%84%D8%AA%D9%88%D8%AC%D9%8A%D9%87%D9%8A%D8%A9-%D9%84%D9%84%D8%A8%D8%A7%D8%AD%D8%AB%D9%8A%D9%86-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r735/" rel="">تصميم تجربة المستخدم</a> مهم في مثل هذه الحالات.
</p>

<p>
	يبني المستخدمون تصوراتهم الشخصية حول <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">منتجك</a> بناءً على ما يشاهدونه من تصميم تجربة المستخدم، إضافةً إلى أن تصميم تجربة المستخدم هو العامل الرئيسي في زيادة عدد زوار موقعك الإلكتروني وزيادة التحويلات.
</p>

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

<p>
	تتجلى أهمية التصميم الجيد لتجربة المستخدم في مساعدة المستخدمين على التنقل في تطبيقك وتنفيذ النشاط المقصود الذي تريده الشركة. ووفقًا للإحصائيات، يحكم أكثر من 75% من الأشخاص على <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%A7%D9%84%D8%B9%D9%84%D8%A7%D9%85%D8%A9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A%D8%A9-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-%D9%81%D9%8A-%D9%82%D8%B1%D8%A7%D8%B1-%D8%A7%D9%84%D8%B4%D8%B1%D8%A7%D8%A1-%D9%85%D9%83%D9%88%D9%86%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%84%D8%A7%D9%85%D8%A9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A%D8%A9-r486/" rel="">العلامة التجارية</a> بناءً على تصميمها، لذا فإن سمعة علامتك التجارية تعتمد بالدرجة الأولى على جودة تصميمك، إضافةً إلى الرسالة التي تحاول نقلها إلى المستخدمين، وتذكر أن التصميم يرتبط ارتباطًا وثيقًا بالتواصل مع المستخدمين، فهما يكملان بعضهما البعض.
</p>

<h2>
	بعض الاتجاهات المهمة في تصميم تجربة المستخدم UX
</h2>

<p>
	جمعنا لك فيما يلي بعض اتجاهات تصميم تجربة المستخدم، والتي يجب عليك مراعاتها في تصميماتك، إذ يمكن لهذه الاتجاهات أن تقدم تجربةً مميزةً للمستخدمين وتزيد من ولائهم لتطبيقك أو موقعك الإلكتروني، وإليك أدناه 5 اتجاهات مهمة لعام 2022.
</p>

<h3>
	الواقع الافتراضي VR والواقع المعزز AR
</h3>

<p>
	لقد تطور الواقع الافتراضي VR والواقع المعزز AR إلى ما هو أبعد من إدراجهما في الخطط المستقبلية، فقد أصبحا اليوم جزءًا مهمًا من المنتجات الرقمية، كما أصبح هذا التقدم أحد أحدث اتجاهات تجربة المستخدم UX، ومن المتوقع أن يبقى كذلك في المستقبل.
</p>

<p>
	مع مرور الوقت، لم يَعُد الواقع المعزز مقتصرًا على الألعاب الإلكترونية، بل أصبح يجتاح الصناعات الأخرى ويفرض أجنحته وسيطرته عليها، حيث تشتمل تطبيقات الواقع المعزز في يومنا هذا على تطبيقات البيع بالتجزئة والسفر وصناعة السيارات والتعليم والرعاية الصحية؛ إضافةً إلى <a href="https://academy.hsoub.com/marketing/social-media/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D9%88%D8%B3%D8%A7%D8%A6%D9%84-%D8%A7%D9%84%D8%AA%D9%88%D8%A7%D8%B5%D9%84-%D8%A7%D9%84%D8%A7%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%D9%8A-%D9%88%D8%A2%D9%84%D9%8A%D8%A9-%D8%B9%D9%85%D9%84%D9%87%D8%A7-r526/" rel="">منصات التواصل الاجتماعي</a> مثل إنستجرام Instagram وسناب شات Snapchat.
</p>

<p>
	ومن الأمثلة التي يمكن طرحها حول علامات تجارية اهتمت في الواقع الافتراضي VR والواقع المعزز AR نذكر شركة IKEA، التي أنشأت تطبيقًا باسم IKEA Place، إذ يدور هذا التطبيق حول مفهوم الواقع المعزز. إلى جانب ذلك، لطالما كانت منصة سناب شات Snapchat رائدةً في تجارب الواقع الافتراضي والواقع المعزز، فالفلاتر والتأثيرات التي تراها في هذه المنصة ما هي إلا نتائج التصميم الجيد لتجربة المستخدم.
</p>

<h3>
	التقديم الفعال للمعلومات أثناء التمرير السريع
</h3>

<p>
	يجب أن تتمكن من توصيل رسالتك بفعالية إلى المستخدم عندما يمرر عبر صفحتك، إذ يجب أن تكون المعلومات مرئيةً أثناء قيام المستخدم بالتمرير عبر الصفحة، بحيث تقدم للمستخدم تجربةً يحصل فيها على معظم المعلومات مع عدم الشعور بالثقل بكثرة المحتوى من جميع الجوانب.
</p>

<p>
	بصفتك مصممًا لتجربة المستخدم، يمكنك استخدام الرسوم المتحركة والعناصر المرئية لكتابة النصوص، وذلك بغية تقديم معلومات في فترة قصيرة عندما يقرر المستخدم التمرير للأسفل بسرعة. وفي إحدى الاستبيانات، فضّل 64% من المشاركين العروض التقديمية المرئية على العروض التقليدية العادية.
</p>

<h3>
	إمكانية الوصول
</h3>

<p>
	تتبنى الشركات مبدأ الشمولية وتسعى جاهدةً إلى تحسين تجربة المستخدم للجميع. كثيرًا ما يواجه الأشخاص ذوو المشاكل البصرية وذوو الاحتياجات الخاصة تحديات عديدةً عند استخدام تطبيقات مختلفة، لذا يجب أن تأخذ احتياجاتهم في الحسبان عند تصميم منتجك، وذلك من خلال اتخاذ التدابير المناسبة للنص والخلفية وغيرها.
</p>

<p>
	فعلى سبيل المثال، يعاني بعض الأشخاص من رؤية النصوص الصغيرة بسبب ضعف في بصرهم، لذا من المهم أن تحرص على اختيار ألوان متباينة وأن تترك فراغات معقولة بين النصوص والخلفية، مما يحسن من تجربة الاستخدام. إضافةً إلى ذلك، يجب أن تتيح للمستخدمين إمكانية تخصيص شاشاتهم. احرص على أن تفهم المزيد حول الخطوط والطباعة، واستكشف كيفية جذب الجماهير المختلفة.
</p>

<h3>
	شاشات بلا حدود
</h3>

<p>
	يتكيف تصميم تجربة المستخدم الناجح مع <a href="https://academy.hsoub.com/design/user-experience/%D8%B9%D8%B4%D8%B1-%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%B1%D8%A6%D9%8A%D8%B3%D9%8A%D8%A9-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D9%87%D9%88%D8%A7%D8%AA%D9%81-%D8%A7%D9%84%D8%B0%D9%83%D9%8A%D8%A9-r315/" rel="">تصميم الهواتف الذكية</a>، ونظرًا لأن الهواتف المحمولة أصبحت أكثر إحكامًا في التصميم، فيجب أن يتناسب تصميم التطبيق مع شاشة الهواتف المحمولة، لذا ضع في الحسبان شاشة هاتف آيفون iPhone الصغيرة وتصميمات الهواتف الأخرى المثقبة من الأعلى لفتحة الكاميرا، كما تُعَد نسبة العرض إلى الارتفاع ودقة التصميم مهمة أيضًا.
</p>

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

<h3>
	مصادقة سهلة للمدفوعات عبر الإنترنت
</h3>

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

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

<h2>
	في الختام
</h2>

<p>
	احرص على دمج اتجاهات تصميم تجربة المستخدم المذكورة أعلاه في تطبيقاتك ومواقعك الإلكترونية الحالية أو المستقبلية، وتذكر أن المصمم الناجح هو الذي يضع تجربة المستخدم في مقدمة اهتماماته، ويسعى إلى أن تكون أولًا قبل أي تقنية، فهي أساس أي <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D8%A5%D9%84%D9%89-%D9%85%D9%81%D9%87%D9%88%D9%85-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-%D8%A7%D9%84%D8%B1%D9%82%D9%85%D9%8A%D8%A9-digital-products/" rel="">منتج رقمي</a>، كما أنها العامل الرئيسي الذي يحدد كيفية تفاعل المستخدمين مع تطبيقك أو موقعك الإلكتروني، والآن، حان الوقت لتوسيع نطاق عملك وتقديم تجربة مستخدم تفاعلية.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://hackernoon.com/top-5-ux-design-trends-to-keep-an-eye-on" rel="external nofollow">Top 5 UX Design Trends to Keep an Eye On</a> لصاحبه Iftikhar Ali.
</p>

<h2>
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-interface/%D9%85%D8%B3%D8%AA%D9%82%D8%A8%D9%84-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ui-%D8%A7%D9%84%D8%AC%D9%8A%D9%84-%D8%A7%D9%84%D9%82%D8%A7%D8%AF%D9%85-%D9%85%D9%86-%D8%A3%D8%AF%D9%88%D8%A7%D8%AA-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r792/" rel="">مستقبل تصميم واجهة المستخدم UI: الجيل القادم من أدوات تصميم واجهة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%88%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ui-ux-r831/" rel="">تصميم واجهة المستخدم وتجربة المستخدم UI / UX</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-interface/%D8%A3%D9%81%D8%B6%D9%84-%D8%A7%D9%84%D9%86%D8%B5%D8%A7%D8%A6%D8%AD-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r818/" rel="">أفضل النصائح لتصميم واجهة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-interface/%D9%88%D8%A7%D8%AC%D9%87%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D8%A7%EF%BB%B7%D9%83%D8%AB%D8%B1-%D8%B4%D9%8A%D9%88%D8%B9%D8%A7-r737/" rel="">واجهات المستخدم اﻷكثر شيوعا</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">837</guid><pubDate>Tue, 15 Aug 2023 14:00:00 +0000</pubDate></item><item><title>&#x62F;&#x644;&#x64A;&#x644;&#x643; &#x627;&#x644;&#x634;&#x627;&#x645;&#x644; &#x62E;&#x637;&#x648;&#x629; &#x628;&#x62E;&#x637;&#x648;&#x629; &#x644;&#x627;&#x62D;&#x62A;&#x631;&#x627;&#x641; &#x62A;&#x635;&#x645;&#x64A;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645; UX</title><link>https://academy.hsoub.com/design/user-experience/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D8%AE%D8%B7%D9%88%D8%A9-%D8%A8%D8%AE%D8%B7%D9%88%D8%A9-%D9%84%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r836/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2023_08/-------.png.36b046cc78dba6a73fb5caf61956cecb.png" /></p>
<p>
	يتمثل دور مصمم تجربة المستخدم UX في إنشاء منتجات توفر تجربةً جيدةً للمستخدم، لذا يجب على مصممي تجربة المستخدم UX أن يمتلكوا فهمًا عميقًا لكيفية تفاعل المستخدمين مع المنتجات، حيث يمكنهم استخدام هذه المعرفة لتصميم منتجات ممتعة وسهلة الاستخدام.
</p>

<p>
	وعلى الرغم من وجود العديد من الطرائق المختلفة التي يمكن من خلالها الحصول على وظيفة في تصميم تجربة المستخدم UX، إلا أن هناك بعض الخطوات الأساسية التي يجب على الجميع اتباعها، وإليك فيما يلي بعض الخطوات السريعة:
</p>

<ol>
	<li>
		تتمثل الخطوة الأولى في فهم ماهية <a href="https://academy.hsoub.com/design/user-experience/%D8%A8%D8%B9%D8%B6-%D8%A7%D9%84%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%A7%D9%84%D8%AA%D9%88%D8%AC%D9%8A%D9%87%D9%8A%D8%A9-%D9%84%D9%84%D8%A8%D8%A7%D8%AD%D8%AB%D9%8A%D9%86-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r735/" rel="">تصميم تجربة المستخدم</a> وما الذي تتضمنه، وبمجرد أن تفهم الأساسيات جيدًا، يمكنك أن تختص في مجال معين، فقد ترغب مثلًا في التركيز على تصميم المواقع الإلكترونية، أو قد تميل إلى التخصص في تصميم تطبيقات الأجهزة المحمولة.
	</li>
	<li>
		الخطوة الثانية هي البدء في العمل على مشاريع حقيقية، لأنها ستمنحك فرصة خوض تجارب عملية، وهو أمر ضروري لمن يريد أن يصبح مصممًا لتجربة المستخدم.
	</li>
	<li>
		الخطوة التالية هي بناء <a href="https://academy.hsoub.com/freelance/personal-branding/27-%D8%B4%D9%8A%D8%A6%D8%A7-%D9%8A%D8%AC%D8%A8-%D8%A3%D9%86-%D8%AA%D8%B6%D9%8A%D9%81%D9%87%D8%A7-%D8%A5%D9%84%D9%89-%D9%85%D8%B9%D8%B1%D8%B6-%D8%A3%D8%B9%D9%85%D8%A7%D9%84%D9%83-r92/" rel="">معرض أعمالك</a>. وتُعَد هذه الخطوة ضروريةً عند التقدم إلى وظيفة مصمم تجربة المستخدم، إذ يمكنك من خلالها تضمين بعض من أفضل أعمالك، سواءً كانت هذه الأعمال من التدريبات التي خضتها، أو من المشاريع الشخصية التي عملت عليها. احرص أيضًا على شرح الخطوات العملية التي خضتها والطريقة التي كنت تفكر بها، مما يساعد <a href="https://academy.hsoub.com/marketing/social-media/%D9%83%D9%8A%D9%81-%D8%AA%D9%88%D9%84%D8%AF-%D8%A7%D9%84%D8%B9%D9%85%D9%84%D8%A7%D8%A1-%D8%A7%D9%84%D9%85%D8%AD%D8%AA%D9%85%D9%84%D9%8A%D9%86-%D8%A8%D8%A8%D8%B3%D8%A7%D8%B7%D8%A9-%D8%B9%D9%86-%D8%B7%D8%B1%D9%8A%D9%82-%D8%A7%D9%84%D8%A5%D8%B5%D8%BA%D8%A7%D8%A1-%D8%A5%D9%84%D9%89-%D8%AC%D9%85%D9%87%D9%88%D8%B1%D9%83-r153/" rel="">العملاء المحتملين</a> على رؤية قدراتك الإبداعية في تنفيذ المشاريع.
	</li>
	<li>
		أخيرًا، احرص على أن تبقى قريبًا من مجتمع مصممي تجربة المستخدم، وذلك من خلال حضور الأحداث واللقاءات وورشات العمل. يمكنك أن تتواصل أيضًا مع المصممين الذين تعجبك أعمالهم، إذ سيمكّنك بناء العلاقات مع المصممين الآخرين من معرفة المزيد عن مجال تصميم تجربة المستخدم، كما تُعَد المعارف والعلاقات أفضل طريقة للحصول على وظيفة أحلامك.
	</li>
</ol>

<h2>
	من هو مصمم تجربة المستخدم UX؟
</h2>

<p>
	مصمم تجربة المستخدم UX هو الشخص الذي يفكر في كيفية تفاعل المستخدمين مع منتج أو خدمة ما، ويصمم المنتج بطريقة تساعد على تحسين تلك التجربة، ويتضمن ذلك تصميم كل شيء، بدءًا من <a href="https://academy.hsoub.com/marketing/search-engine-optimisation/%D8%A7%D9%84%D8%A3%D8%AE%D8%B7%D8%A7%D8%A1-%D8%A7%D9%84%D8%B4%D8%A7%D8%A6%D8%B9%D8%A9-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A%D8%A9-%D9%88%D8%A7%D9%84%D8%AA%D9%8A-%D8%AA%D8%B6%D8%B1-%D8%A8%D8%AA%D8%AD%D8%B3%D9%8A%D9%86-%D9%85%D8%AD%D8%B1%D9%83%D8%A7%D8%AA-%D8%A7%D9%84%D8%A8%D8%AD%D8%AB-r644/" rel="">تصميم المواقع الإلكترونية</a> إلى الأزرار الموجودة على جهاز التحكم عن بُعد، ويمكن القول بأن مصمم UX الجيد هو المصمم الذي يأخذ احتياجات المستخدم في الحسبان ويوفر له تجربةً ممتعةً وسهلة الاستخدام.
</p>

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

<div class="banner-container ipsBox ipsPadding">
	<div class="inner-banner-container">
		<p class="banner-heading">
			دورة تطوير واجهات المستخدم
		</p>

		<p class="banner-subtitle">
			ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة
		</p>

		<div>
			<a class="ipsButton ipsButton_large ipsButton_primary ipsButton_important" href="https://academy.hsoub.com/learn/front-end-web-development/" rel="">اشترك الآن</a>
		</div>
	</div>

	<div class="banner-img">
		<img alt="دورة تطوير واجهات المستخدم" src="https://academy.hsoub.com/learn/assets/images/courses/front-end-web-development.png">
	</div>
</div>

<h2>
	الخطوات التي تحتاجها لاحتراف تصميم تجربة المستخدم UX
</h2>

<p>
	يجب على كل شخص يفكر في العمل في تصميم <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r813/" rel="">تجربة المستخدم</a> أن يركز على نقطة انطلاق أساسية، بحيث يسأل نفسه حول خدمات تصميم تجربة المستخدم التي يرغب في تقديمها؛ أي هل تريد التركيز على تصميم المواقع الإلكترونية؟ أم ترغب في العمل في تصميم تطبيقات الأجهزة المحمولة؟ وهل أنت مهتم بالتصميم لصناعات معينة، مثل التجارة الإلكترونية أو الرعاية الصحية؟
</p>

<p>
	عندما تتمكن من تحديد نوع خدمات تصميم تصميم تجربة المستخدم التي ترغب في تقديمها، يمكنك أن تبدأ البحث عن المهارات والخبرات المطلوبة للمجال الذي اخترته. فعلى سبيل المثال، يحتاج المهتمون بتصميم المواقع الإلكترونية إلى التعرف على أفضل ممارسات تجربة المستخدم، بينما يحتاج المهتمون بتصميم تطبيقات الأجهزة المحمولة إلى أن يكونوا على دراية بأحدث اتجاهات <a href="https://academy.hsoub.com/design/user-experience/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%88%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ui-ux-r831/" rel="">تصميم واجهة المستخدم</a>، لذا يصعب على مصممي تجربة المستخدم البدء في تطوير مهاراتهم وخبراتهم ما لم يتمكنوا من تحديد المجال الذي يرغبون في العمل به.
</p>

<h3>
	الخطوة الأولى: تحديد الهدف
</h3>

<p>
	لكي تصبح مصممًا ناجحًا لتجربة المستخدم، من المهم أن تكون لديك دوافع وأهداف واضحة. اسأل نفسك عن الأسباب التي تدفعك إلى العمل في هذه المهنة، وما الذي تأمل في تحقيقه. من المهم أيضًا أن يكون لديك فهم قوي لمجال تصميم تجربة المستخدم والمهارات المطلوبة.
</p>

<p>
	ستساعدك معرفة الشركات أو الصناعات التي تريد العمل بها على تركيز جهودك، ومن المهم أيضًا أن تكون واقعيًا بشأن أرباحك المستقبلية المحتملة، وأخيرًا يمكنك زيادة فرصك في أن تصبح مصممًا ناجحًا لتجربة المستخدم من خلال تحديد أهداف قابلة للتحقيق والحفاظ على تركيز مستمر.
</p>

<h3>
	الخطوة الثانية: ابدأ بالأساسيات
</h3>

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

<p>
	ومن أفضل الكتب التي تتحدث عن أساسيات تصميم تجربة المستخدم، يمكن الإشارة إلى كتاب "<a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">مدخل إلى تجربة المستخدم</a>" إذ يتناول الكتاب في محاوره كل ما يحتاج إليه الراغب في دخول عالم تصميم تجربة المستخدم.
</p>

<h3>
	الخطوة الثالثة: متابعة الدورات التدريبية
</h3>

<p>
	على الرغم من عدم وجود طريقة محددة تجعلك خبيرًا في تصميم تجربة المستخدم، إلا أن متابعة الدورات التعليمية تُعَد واحدةً من الطرق الأساسية التي يمكنك من خلالها تطوير مهاراتك وخبراتك في تصميم تجربة المستخدم، ونيل المعرفة التي تحتاجها للبدء في هذا المجال الشيق.
</p>

<h3>
	الخطوة الرابعة: إتقان الأدوات اللازمة
</h3>

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

<ul>
	<li>
		يُعَد سكتش Sketch أداةً رائعةً لرسم أفكار التصميم الأولية بسرعة.
	</li>
	<li>
		يُعَد <a href="https://academy.hsoub.com/design/graphic/photoshop/%D9%85%D9%82%D8%AF%D9%85%D8%A9-%D8%A5%D9%84%D9%89-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D8%AC-%D8%A3%D8%AF%D9%88%D8%A8%D9%8A-%D9%81%D9%88%D8%AA%D9%88%D8%B4%D9%88%D8%A8-adobe-photoshop-r541/" rel="">برنامج أدوبي فوتوشوب Adobe Photoshop</a> ضروريًا لتصميم نماذج ورسوميات تفصيلية.
	</li>
	<li>
		يُعَد <a href="https://academy.hsoub.com/design/illustration/adobe-illustrator/%D9%85%D9%82%D8%AF%D9%85%D8%A9-%D8%A5%D9%84%D9%89-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D8%AC-%D8%A3%D8%AF%D9%88%D8%A8%D9%8A-%D8%A5%D9%84%D9%8A%D8%B3%D8%AA%D8%B1%D9%8A%D8%AA%D9%88%D8%B1-adobe-illustrator-%D9%88%D8%A7%D9%84%D8%AA%D8%B9%D8%B1%D9%81-%D8%B9%D9%84%D9%89-%D9%88%D8%A7%D8%AC%D9%87%D8%AA%D9%87-r542/" rel="">برنامج أدوبي إليستريتور Adobe Illustrator</a> مثاليًا لتصميم الشعارات والرموز والرسومات الموجهة.
	</li>
	<li>
		يُعَد Mockplus أداةً رائعةً لتصميم النماذج واختبارها بسرعة.
	</li>
	<li>
		يُعَد Mockplus iDoc أداةً أساسيةً للتعاون مع المصممين والمطورين الآخرين في مشاريع التصميم.
	</li>
</ul>

<h3>
	الخطوة الخامسة: تدرب أكثر
</h3>

<p>
	بصفتك مصممًا ناجحًا لتجربة المستخدم، فمن المهم أن تطور مهاراتك باستمرار وترتقي بمستواك المهني، ومن أفضل الأساليب التي تساعدك على تحقيق ذلك هو الحصول على بعض الخبرة من خلال التدرب وخوض التجارب الواقعية، فعلى الرغم من أنه يمكن للكتب والدورات التدريبية عبر الإنترنت أن تعلمك <a href="https://academy.hsoub.com/design/graphic/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D8%AC%D8%B1%D8%A7%D9%81%D9%8A%D9%83%D9%8A-%D8%A7%D9%84%D8%AC%D8%B2%D8%A1-%D8%A7%D9%84%D8%AB%D8%A7%D9%86%D9%8A-%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-r102/" rel="">مبادئ التصميم</a> وتمنحك أساسًا جيدًا للانطلاق من خلالها، لكنك لن تستطيع الوصول إلى مستوى الاحتراف في تصميم تجربة المستخدم ما لم تُشَمِّر عن ساعديك وتبدأ في العمل الحقيقي من خلال تنفيذ بعض المشاريع الواقعية.
</p>

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

<h2>
	في الختام
</h2>

<p>
	لكي تصبح مصممًا ناجحًا لتجربة المستخدم UX، يجب أن يكون لديك المزيج الصحيح من المهارات الشخصية والعملية، فمن ناحية المهارات العملية، يجب أن تكون بارعًا في استخدام أدوات التخطيط ورسم النماذج الأولية، مثل برنامج سكتش Sketch وبرنامج Adobe XD، كما يُفترض أن تكون قادرًا على استخدام أدوات التحليل المختلفة لتقيس مدى نجاح تصميماتك؛ أما من ناحية المهارات الشخصية، فأنت بحاجة إلى أن تكون قادرًا على التواصل بفاعلية مع كل من العملاء وأعضاء الفريق الآخرين.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://hackernoon.com/step-by-step-guide-to-become-a-ux-designer" rel="external nofollow">Step by Step Guide to Become a UX Designer</a> لصاحبه Rachel May.
</p>

<h2>
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%88%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ui-ux-r831/" rel="">تصميم واجهة المستخدم وتجربة المستخدم UI / UX</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-interface/%D8%A3%D9%81%D8%B6%D9%84-%D8%A7%D9%84%D9%86%D8%B5%D8%A7%D8%A6%D8%AD-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r818/" rel="">أفضل النصائح لتصميم واجهة المستخدم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-interface/%D9%88%D8%A7%D8%AC%D9%87%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D8%A7%EF%BB%B7%D9%83%D8%AB%D8%B1-%D8%B4%D9%8A%D9%88%D8%B9%D8%A7-r737/" rel="">واجهات المستخدم اﻷكثر شيوعا</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-interface/%D9%85%D8%B3%D8%AA%D9%82%D8%A8%D9%84-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ui-%D8%A7%D9%84%D8%AC%D9%8A%D9%84-%D8%A7%D9%84%D9%82%D8%A7%D8%AF%D9%85-%D9%85%D9%86-%D8%A3%D8%AF%D9%88%D8%A7%D8%AA-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r792/" rel="">مستقبل تصميم واجهة المستخدم UI: الجيل القادم من أدوات تصميم واجهة المستخدم</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">836</guid><pubDate>Tue, 01 Aug 2023 14:01:00 +0000</pubDate></item><item><title>&#x633;&#x64A;&#x627;&#x642; &#x627;&#x644;&#x627;&#x633;&#x62A;&#x62E;&#x62F;&#x627;&#x645; &#x644;&#x644;&#x647;&#x648;&#x627;&#x62A;&#x641; &#x627;&#x644;&#x645;&#x62D;&#x645;&#x648;&#x644;&#x629;</title><link>https://academy.hsoub.com/design/user-experience/%D8%B3%D9%8A%D8%A7%D9%82-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%84%D9%84%D9%87%D9%88%D8%A7%D8%AA%D9%81-%D8%A7%D9%84%D9%85%D8%AD%D9%85%D9%88%D9%84%D8%A9-r835/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2023_05/---.png.8bfe49dd70c82a2eddb23fae7176f0af.png" /></p>
<p>
	قبل أن تتعمق في أساليب تصميم تطبيقات الهواتف المحمولة، أنت بحاجة إلى فهم مستخدمي الهواتف المحمولة وخصائصهم الفريدة، فإذا فهمت الكيفية التي يتفاعل بها المستخدمون مع هواتفهم -بما في ذلك العوامل الاجتماعية والعاطفية والمادية والثقافية-، فعندها يمكنك تقديم تجربة مستخدم أفضل.
</p>

<p>
	سنلقي نظرةً في هذا المقال على بعض قواعد التصميم التي يمكن أن تساعدك على تطوير تطبيقك والحصول على ثقة واعتماد المستخدمين.
</p>

<p>
	كما تعلم، يختلف سياق استخدام الهاتف المحمول بين شخص وآخر، كما تختلف طريقة استخدامهم للهاتف المحمول عن طريقة استخدامهم للحاسوب، فعادةً ما يستخدم الناس حواسيبهم وهم جالسون على مكاتبهم أو أسرتهم، حيث يغلب عليهم وضع الاهتمام والتركيز؛ وعلى النقيض من ذلك، لا يهتم الأشخاص تمامًا بهواتفهم الذكية، لأنهم يستخدمونها أثناء المشي أو الحركة أو الانشغال بأمور أخرى.
</p>

<p>
	على سبيل المثال، قد يستخدم الناس هواتفهم الذكية في تقاطع طرق صاخب للبحث عن سيارة أجرة قريبة، كما قد يستخدمون هواتفهم الذكية للاستماع إلى الموسيقى أثناء الركض وممارسة الرياضة في الحديقة، أو ربما يستخدمون هواتفهم الذكية لتصفح آخر المنشورات في حساباتهم على <a href="https://academy.hsoub.com/marketing/social-media/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D9%88%D8%B3%D8%A7%D8%A6%D9%84-%D8%A7%D9%84%D8%AA%D9%88%D8%A7%D8%B5%D9%84-%D8%A7%D9%84%D8%A7%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%D9%8A-%D9%88%D8%A2%D9%84%D9%8A%D8%A9-%D8%B9%D9%85%D9%84%D9%87%D8%A7-r526/" rel="">منصات التواصل الاجتماعي</a> أثناء انتظار وجباتهم في المطعم. إذا أمعنت النظر في كل حالة من الحالات السابقة، فستدرك أنه لا يمكن أن نتوقع من المستخدمين أن يكونوا منتبهين دائمًا إلى هواتفهم المحمولة، لأنهم عادةً ما يستخدمونها بالتزامن مع أداء نشاط آخر.
</p>

<p>
	يقول لوكي فروبلوفسكي Luke Wroblewski مدير المنتج في شركة جوجل Google:
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		"يستخدم الأشخاص هواتفهم الذكية في العديد من الأماكن المختلفة، لذا فإنهم قد يضطروا في الكثير من الأحيان إلى استخدام هواتفهم بيد واحدة وبتركيز منخفض، نظرًا لانشغالهم بأمور أخرى؛ لذا يجب على تصميمات الأجهزة المحمولة الفعالة أن تأخذ هذه الأمور بالحسبان وأن تهدف إلى تحسينها".
	</p>
</blockquote>

<h2>
	ما العوامل التي تؤثر على سياق الاستخدام؟
</h2>

<p>
	عند التفكير في سياق الاستخدام، يجب أن تُؤخذ العوامل التالية في الحسبان:
</p>

<ul>
	<li>
		<strong>العوامل البيئية</strong>: مثل الضوضاء والإضاءة والمساحة التي يُستَخدم فيها شيء ما والخصوصية ونحو ذلك.
	</li>
	<li>
		<strong>العوامل الثقافية</strong>: تتضمن هذه العوامل كلًا من العادات والتقاليد والأنظمة والقوانين والتعاليم الدينية والمبادئ الأخلاقية.
	</li>
	<li>
		<strong>العوامل الخاصة</strong>: يتضمن ذلك تحليل حالات الاستخدام الفريدة والتفاعلات على أساس الجنس والعرق والعمر والإعاقة، إضافةً إلى الحالات الاجتماعية والاقتصادية وغير ذلك.
	</li>
	<li>
		<strong>نشاط المستخدمين ومدى انشغالهم</strong>: يجب أن تركز على وضعية المستخدمين وحالتهم، أي إذا كانوا يمشون في الطرقات أو يقودون دراجاتهم أو سياراتهم، أو إذا كانوا يعملون في وظائفهم، أو يقومون بمهام متعددة، كما يجب أن تأخذ في الحسبان أي أجهزة أخرى يستخدمونها.
	</li>
	<li>
		<strong>العوامل الاجتماعية</strong>: يجب أن تراعي وجود أشخاص حولهم يتفاعلون معهم، إضافةً إلى الأمور التي يهتم بها الأشخاص على المستوى الاجتماعي، مثل السمعة والفضائح والإحراج.
	</li>
	<li>
		<strong>العوامل العاطفية</strong>: يجب أن تطرح أسئلةً من قبيل هل يشعر المستخدم بالسعادة؟ هل هو محبط؟ هل هو منزعج من شيء ما؟ هل هو قلق أو متوتر؟ هل يفكر في المشكلة بطريقة مختلفة بسبب شيء آخر يحدث الآن أو حدث في الماضي؟ بمعنى آخر، يجب أن تراعي مزاج المستخدمين وحالتهم العاطفية.
	</li>
	<li>
		<strong>الأهداف</strong>: يجب أن تطرح أسئلةً مثل: ما النتائج التي يبحث عنها المستخدمون؟ ما الذي يريدون تحقيقه؟ كيف يفكرون في المشكلة التي يحاولون حلها؟
	</li>
	<li>
		<strong>الحمل المعرفي</strong>: يجب أن تطرح أسئلةً مثل: ما مدى انتباه المستخدمين؟ هل هو مستمر أم متقطع؟ ما الذي يدور في أذهانهم؟ هل يحتاجون إلى التركيز على مهمة أخرى؟ أو الاعتماد على الذاكرة؟ أو اتخاذ قرارات أخرى في نفس الوقت؟ هل لديهم أي قيود زمنية؟
	</li>
	<li>
		<strong>أداء المهمة</strong>: يجب أن تطرح أسئلةً مثل: ما الذي يتعين عليهم فعله؟ مثل إجراء المكالمات أو إرسال الرسائل وما إلى ذلك. كيف يبدو <a href="https://academy.hsoub.com/entrepreneurship/customer-care/%D9%85%D8%B9%D9%86%D9%89-%D9%86%D8%AC%D8%A7%D8%AD-%D8%A7%D9%84%D8%B9%D9%85%D9%8A%D9%84-%D9%88%D9%85%D8%AF%D9%89-%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87-r1013/" rel="">نجاح المستخدم</a> ورضاه عن المهمة؟
	</li>
	<li>
		<strong>معلومات جهاز المستخدم</strong>: ويشمل ذلك <a href="https://academy.hsoub.com/files/24-%D8%A3%D9%86%D8%B8%D9%85%D8%A9-%D8%A7%D9%84%D8%AA%D8%B4%D8%BA%D9%8A%D9%84-%D9%84%D9%84%D9%85%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D9%86/" rel="">نظام التشغيل</a> ومواصفات الجهاز وإمكانياته ونحو ذلك.
	</li>
	<li>
		<strong>شبكة الاتصال</strong>: مثل سرعة <a href="https://academy.hsoub.com/devops/networking/%D8%A2%D9%84%D9%8A%D8%A9-%D8%B9%D9%85%D9%84-%D8%B4%D8%A8%D9%83%D8%A9-%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA-r571/" rel="">شبكة الإنترنت</a> ومدى ثباتها وموثوقيتها.
	</li>
</ul>

<h2>
	نموذج سياقي لاستخدام الأجهزة المحمولة يتجاوز مكان المستخدم
</h2>

<p>
	يقترح ويتني هيس Whitney Hess مصمم هواتف HCI ومستشار في <a href="https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81-%D8%AA%D8%B5%D8%A8%D8%AD-%D9%85%D8%B5%D9%85%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux%D8%9F-r807/" rel="">تجربة المستخدم UX</a> نموذجًا أوسع لسياق <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A-%D9%84%D8%B3%D9%87%D9%88%D9%84%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D8%A3%D8%AC%D9%87%D8%B2%D8%A9-%D8%A7%D9%84%D9%85%D8%AD%D9%85%D9%88%D9%84%D8%A9-r822/" rel="">استخدام الأجهزة المحمولة</a> وتسلسلًا هرميًا يربط الهاتف المحمول بالأجهزة الأخرى المتاحة للمستخدم، فعوضًا عن النظر إلى الأجهزة حسب المكان الذي يتواجد فيه المستخدم (يستخدم الهاتف المحمول أثناء التنقل، ويستخدم الحاسوب أثناء جلوسه على المكتب، ويستخدم الجهاز اللوحي عندما يكون في رحلة)، فإننا ننظر إلى الأجهزة من منظور ما يريد المستخدم تحقيقه.
</p>

<p>
	يقول ويتني هيس Whitney Hess:
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		"السياق هو الملك، لم يَعُد بإمكان النظام الأساسي أن يفترض السياق المادي للاستخدام، أي أنه لم يَعُد بالإمكان معرفة مكان الأشخاص خلال استخدامهم الأجهزة المحمولة. لقد اعتدت النظر إلى الأجهزة المحمولة على أنها غير محددة الموقع، وعوضًا عن ذلك، اعتمدت على ربط كل جهاز بالغرض الذي يُستَخدم لأجله، فعلى سبيل المثال، يستخدم الأشخاص هواتفهم الذكية للتحقق من شيء سريع، ويستخدمون الأجهزة اللوحية للانغماس في مواضيع أكثر تعقيدًا؛ بينما يستخدمون حواسيبهم لإدارة أعمالهم وأنشطتهم التجارية. سيؤدي هذا التحول من السياق الموضوعي إلى السياق الذاتي إلى إعادة تشكيل الطريقة التي نصمم بها التجارب عبر مختلف الأجهزة المُستَخدمة".
	</p>
</blockquote>

<p>
	يلخص هذا النموذج الفرق بين الأجهزة، إذ تُستخدَم الهواتف الذكية لإنجاز مهام سريعة ومختصرة، حيث يمكنك تصفح إحدى منصات التواصل الاجتماعي، وترك تعليق على المنشورات التي تعجبك، أو البحث عن عنوان ما أو قراءة بريدك الإلكتروني، ولكنك لا ترغب عادةً في إنجاز مهام معقدة بواسطة هاتفك المحمول.
</p>

<p>
	يُعَد الجهاز اللوحي جهازًا ترفيهيًا في الدرجة الأولى، ومع ذلك فهو يحتوي على بعض سياق الاستخدام المؤسسي، ويوفر فرصةً للانغماس في تجربة دون أن تصبح تفاعليةً بطريقة مفرطة.
</p>

<p>
	أخيرًا، السياق الأساسي التقليدي للحاسوب المكتبي أو الحاسوب المحمول هو استخدامه لإدارة الأعمال والمهام المعقدة عبر شبكة الإنترنت أو خارجها.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126928" href="https://academy.hsoub.com/uploads/monthly_2023_05/01---------.png.8daf777393408d83245533c5e7726e14.png" rel=""><img alt="01-رسم-توضيحي-يمثل-أهداف-المستخدمين-عند-استخدام-الأجهزة-المختلفة.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126928" data-ratio="85.35" data-unique="3cy3q9nd7" style="width: 500px; height: auto;" width="703" src="https://academy.hsoub.com/uploads/monthly_2023_05/01---------.thumb.png.34e462e9b1de32b495d15b8163a9ccb3.png"></a>
</p>

<p>
	يعتمد هذا النموذج السياقي على نوايا المستخدم بدلًا من موقعه الفعلي، وعلى الرغم من أنه قد يكون هناك بعض الاختلافات بين أغراض استخدام كل جهاز بين الأشخاص، إلا أن الهدف الرئيسي لاستخدام كل جهاز واضح.
</p>

<h2>
	كيف تحدد سياق الاستخدام؟
</h2>

<p>
	كلمة السر في تحديد سياق الاستخدام هو البحث، إذ يتخطى استخدام الهواتف الذكية عدة حواجز، فالناس يختلفون في القدرات الجسدية والمعرفية واللغة والثقافة والحدود الجغرافية؛ فعلى سبيل المثال لا الحصر، مثلما لا يناسب حجم واحد جميع الأجهزة، فإن إستراتيجية <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-r149/" rel="">تجربة المستخدم</a> الواحدة لا تخدم جميع المجتمعات.
</p>

<p>
	يجب أن تراعي في تصميمك المجتمع أو المستخدمين المنسيين، أي الفئة التي عادةً ما يتجاهلها المصممون أو ينسونها في تصميمهم، حيث يجب أن تسأل نفسك على سبيل المثال: ما الذي يحتاجه المستخدمون المكفوفون للتنقل في صفحتك بسهولة؟ وكيف يمكن منحهم <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">تجربة مستخدم</a> مناسبة؟
</p>

<p>
	تحتوي الأجهزة التي تعمل بنظام أندرويد Android ونظام IOS على قارئات شاشة مدمجة، مما يسهل على المكفوفين التفاعل مع الهواتف الذكية، لذا تذكر أنه سيكون لديك مستخدمون مكفوفون يعتمدون على خدمة VoiceOver في نظام iOS أو خدمة TalkBack على نظام Android للتفاعل مع الحلول التي تقدمها في تصميمك. وستساعدك الدراسات الميدانية على فهم ما يفعله المستخدمون الآخرون، ومعرفة تحدياتهم والطرائق التي يواجهون من خلالها هذه التحديات.
</p>

<p>
	هل تعلم أن المستخدمين المكفوفين يستخدمون تطبيقًا مخصصًا للخرائط؟ إن تطبيق Seeing Eye GPS الموجود على يسار الصورة المرفقة أدناه هو تطبيق GPS للأجهزة التي تعمل بأنظمة IOS، إذ يمكن الوصول من خلاله إلى جميع مزايا التنقل النموذجية، إضافةً إلى مزايا خاصة بالمستخدمين المكفوفين؛ كما يساعد تطبيق Evelity الموجود على يمين الصورة للتنقل في الأماكن الداخلية، مثل الملاعب والمؤتمرات والحفلات الموسيقية وغيرها، فهو يساعد على تحديد المسارات عبر نظام تحديد المواقع العالمي GPS للأشخاص المكفوفين.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126927" href="https://academy.hsoub.com/uploads/monthly_2023_05/02----Seeing-Eye--Evelity.png.bae83425a6477c078cdf80cc2a4231da.png" rel=""><img alt="02-لقطات-من-تطبيق-Seeing-Eye-وتطبيق-Evelity.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126927" data-unique="fdjwrh0hk" style="width: 700px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_05/02----Seeing-Eye--Evelity.thumb.png.3c565fc6ff06d95de1e75e7d0c4a453e.png"> </a>
</p>

<p>
	حالة أخرى يجب عليك مراعاتها، وهي إذا كنت تستهدف بتطبيقك مجتمعًا غير مجتمعك المحلي، إذ تحتاج في هذه الحالة إلى فهم العوامل الثقافية للمجتمع المستهدف، مثل الفروقات الوطنية والإقليمية والاحتياجات والقيود والفرص الثقافية لجمهورك، أي يجب أن تلائم تطبيقك مع الوطن المستهدف.
</p>

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

<p>
	إحدى الأمثلة التي يمكن تقديمها حول ملاءمة التصميمات مع جمهور البلد المستهدف هي عروض سيارات شركة أوبر، والتي صُمِّمت بحيث تناسب الأسواق المحلية، إذ يمكن مثلًا للمستخدمين في الهند حجز مركبة ذات ثلاث عجلات كما هو موضح على يمين الصورة أدناه؛ في حين أن هذه المركبة غير متوفرة في إصدار التطبيق الخاص بالولايات المتحدة كما هو موضح على يسار الصورة.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126929" href="https://academy.hsoub.com/uploads/monthly_2023_05/03----.png.d25709e7fdf478ec91181f94174ed5a6.png" rel=""><img alt="03-لقطات-من-تطبيق-أوبر.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126929" data-ratio="56.33" data-unique="iw7vtxjp6" style="width: 700px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/03----.thumb.png.ef149c6eef5eb274ff9621ba1a166f00.png"></a>
</p>

<h2>
	الخلاصة
</h2>

<p>
	يُعَد سياق الاستخدام للهواتف المحمولة ضروريًا للحصول على تجربة مستخدمة مناسبة، إذ يتغير سياق استخدام الهاتف المحمول <a href="https://academy.hsoub.com/entrepreneurship/ecommerce/%D9%83%D9%8A%D9%81-%D9%8A%D8%B3%D8%A7%D8%B9%D8%AF%D9%83-%D9%82%D9%8A%D8%A7%D8%B3-%D8%AA%D9%81%D8%A7%D8%B9%D9%84-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D9%8A%D9%86-%D8%B9%D9%84%D9%89-%D8%AE%D9%81%D8%B6-%D9%85%D8%B9%D8%AF%D9%84%D8%A7%D8%AA-%D9%86%D9%81%D9%88%D8%B1%D9%87%D9%85-r852/" rel="">وطريقة التفاعل</a> معه باختلاف العوامل المادية والاجتماعية والعاطفية والثقافية، لذا من المهم أن تعرف القيود والأسباب والظروف الزمانية والمكانية التي يتفاعل من خلالها المستخدمون مع تطبيقك، أو المحتوى الذي تقدمه عبر الهواتف المحمولة، إذ يمكن لهذه المعلومات أن تمنحك توجيهًا لتصميم منتجاتك وتقديم تجربة مستخدم رائعة.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://www.interaction-design.org/literature/article/the-context-of-mobile-usage-the-big-picture" rel="external nofollow">Context of Use for Mobile</a>.
</p>

<h2>
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%84%D9%84%D9%87%D9%88%D8%A7%D8%AA%D9%81-%D8%A7%D9%84%D9%85%D8%AD%D9%85%D9%88%D9%84%D8%A9-%D9%88%D8%AA%D9%88%D9%82%D8%B9%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D9%8A%D9%86-r524/" rel="">تجربة المستخدم للهواتف المحمولة وتوقعات المستخدمين</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D9%85%D9%85%D8%A7%D8%B1%D8%B3%D8%A7%D8%AA-%D9%88%D8%AA%D8%AD%D8%AF%D9%8A%D8%A7%D8%AA-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%84%D9%84%D8%A3%D8%AC%D9%87%D8%B2%D8%A9-%D8%A7%D9%84%D9%85%D8%AD%D9%85%D9%88%D9%84%D8%A9-r830/" rel="">ممارسات وتحديات تصميم تجربة المستخدم للأجهزة المحمولة</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A-%D9%84%D8%B3%D9%87%D9%88%D9%84%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D8%A3%D8%AC%D9%87%D8%B2%D8%A9-%D8%A7%D9%84%D9%85%D8%AD%D9%85%D9%88%D9%84%D8%A9-r822/" rel="">الدليل الأساسي لسهولة الاستخدام على الأجهزة المحمولة</a>
	</li>
	<li>
		النسخة الكاملة لكتاب <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">مدخل إلى تجربة المستخدم (User Experience - UX)</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">835</guid><pubDate>Sat, 29 Jul 2023 14:00:00 +0000</pubDate></item><item><title>&#x62A;&#x62D;&#x633;&#x64A;&#x646; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x62A;&#x62C;&#x627;&#x631;&#x629; &#x627;&#x644;&#x625;&#x644;&#x643;&#x62A;&#x631;&#x648;&#x646;&#x64A;&#x629; &#x639;&#x628;&#x631; &#x627;&#x644;&#x647;&#x648;&#x627;&#x62A;&#x641; &#x627;&#x644;&#x645;&#x62D;&#x645;&#x648;&#x644;&#x629;</title><link>https://academy.hsoub.com/design/user-experience/%D8%AA%D8%AD%D8%B3%D9%8A%D9%86-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D8%A9-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A%D8%A9-%D8%B9%D8%A8%D8%B1-%D8%A7%D9%84%D9%87%D9%88%D8%A7%D8%AA%D9%81-%D8%A7%D9%84%D9%85%D8%AD%D9%85%D9%88%D9%84%D8%A9-r833/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2023_05/------.png.c1e52f60dae13c57a6ada59b89f5cc93.png" /></p>
<p>
	أدى النمو الهائل للتجارة الإلكترونية إلى ظهور الحاجة الماسة لتكيف <a href="https://academy.hsoub.com/entrepreneurship/ecommerce/%D8%A3%D9%86%D9%88%D8%A7%D8%B9-%D8%A7%D9%84%D9%85%D8%AA%D8%A7%D8%AC%D8%B1-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A%D8%A9-%D9%88%D9%86%D9%85%D8%A7%D8%B0%D8%AC-%D8%A5%D9%8A%D8%B1%D8%A7%D8%AF%D8%A7%D8%AA%D9%87%D8%A7-r733/" rel="">المتاجر الإلكترونية</a> مع تجربة الاستخدام عبر الهواتف المحمولة. سنشرح في هذا المقال الجوانب العديدة التي تساعد على نجاح تجربة التجارة الإلكترونية عبر الهواتف المحمولة.
</p>

<p>
	ظهر مصطلح "التجارة عبر الهواتف المحمولة" قبل نحو 20 عامًا بواسطة كيفن دافي Kevin Duffey عندما اقترح استخدام الهاتف المحمول كمتجر يمكن أن يوضع في جيب العميل. وبالنظر إلى القيود التقنية في ذلك الوقت، لم يكن من السهل أن تتخيل أننا سنتمكن يومًا ما من استكشاف البضائع ومراجعتها وشرائها بسهولة، من خلال جهاز صغير لا يتعدى حجمه قبضة اليد ويمكن يُوضع في جيب السروال.
</p>

<p>
	يقول جويل أندرسون Joel Anderson الرئيس التنفيذي لشركة وول مارت Walmart:
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		لست أبالغ في كلامي عندما أتحدث عن مدى تأثير الهواتف المحمولة في كيفية تفاعلنا مع المستهلكين، لقد كان علينا مراعاة هذه التغيرات ومواكبتها.
	</p>
</blockquote>

<p>
	تُعَد التجارة الإلكترونية عبر الهواتف المحمولة حاليًا الشريحة الأكبر بين شرائح السوق العملاق عبر الإنترنت، حيث وصلت قيمتها إلى حوالي 700 مليار دولار أمريكي، <a href="https://www.bigcommerce.com/press/releases/bigcommerce-survey-shows-americans-consider-online-shopping-essential/" rel="external nofollow">وقد أجرى أكثر من 80% من الأمريكيين</a> عمليات شراء في الشهر الماضي عبر الإنترنت، في حين كان الرقم قبل ثلاث سنوات 11.6% فقط.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126673" href="https://academy.hsoub.com/uploads/monthly_2023_05/01-----.png.2af89f52c977f21edfc6e72e79e59ef6.png" rel=""><img alt="01-إحصائيات-التسوق-عبر-الهواتف-المحمولة.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126673" data-ratio="53.67" data-unique="rxqfszwpb" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/01-----.thumb.png.aff0955710240c47ce5687b4df808b45.png"></a>
</p>

<p>
	على الرغم من أرقام المبيعات المرتفعة، لكن ما يزال أكثر من 60% من المستخدمين يشعرون بالقلق حيال اختراق معلوماتهم المالية عند استخدام الهاتف المحمول. ومع ذلك، يُعَد <a href="https://academy.hsoub.com/entrepreneurship/general/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D9%83%D8%A7%D9%85%D9%84-%D9%84%D9%82%D9%8A%D8%A7%D8%B3-%D8%B1%D8%B6%D8%A7-%D8%A7%D9%84%D8%B9%D9%85%D9%84%D8%A7%D8%A1-r195/" rel="">رضا العملاء</a> مرتفعًا إلى حد ما، حيث حصلت المتاجر الإلكترونية العملاقة -مثل أمازون Amazon وآبل Apple- على تصنيف رضا يزيد عن 80%.
</p>

<p style="text-align: center;">
	<img alt="02-شراء-الأحذية-من-متجر-نايك-Nike.gif" class="ipsImage ipsImage_thumbnailed" data-fileid="126685" data-ratio="75.00" data-unique="95s14lk6r" width="800" src="https://academy.hsoub.com/uploads/monthly_2023_05/02------Nike.gif.1b15f4331ca157691b522fe7e2b18bc6.gif">
</p>

<p>
	إليك فيما يلي بعض الممارسات الجيدة لتحسين تجربة التجارة الإلكترونية عبر الهواتف المحمولة.
</p>

<h2>
	دعم الإيماءات المشهورة
</h2>

<p>
	الناس معتادون على استخدام بعض إيماءات اللمس المشهورة، فهم يعرفون أنه يمكن تكبير الصورة من خلال النقر المزدوج على الشاشة أو من خلال الضغط بإصبعي السبابة والإبهام على الشاشة والتقريب بينهما.
</p>

<p>
	وجد معهد Baymard خلال <a href="https://baymard.com/research/mcommerce-usability" rel="external nofollow">دراسته لقابلية استخدام المتاجر الإلكترونية</a> عبر الهواتف المحمولة أن المتسوقين يبحثون عن إمكانية فحص <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">المنتج</a> بدقة، لأنهم عادةً ما يكونوا قلقين حول التفاصيل الصغيرة، لذا فالمستخدمون الذين كانوا مهتمين بشراء منتج ما ولم يتمكنوا من استكشافه من خلال التكبير، لم يشعروا بالراحة في شرائه وغالبًا لم يكملوا عملية البيع.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126680" href="https://academy.hsoub.com/uploads/monthly_2023_05/03------Overstock.png.7f00311395e72a848dddc94f9339c1b2.png" rel=""><img alt="03-تكبير-صور-المنتج-في-تطبيق-Overstock.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126680" data-unique="ihd7cnro6" src="https://academy.hsoub.com/uploads/monthly_2023_05/03------Overstock.thumb.png.8b11fd46152c24f16dcd1132aaa9eb9d.png"> </a>
</p>

<p>
	من المثير للدهشة أنه من بين أعلى 50 تطبيقًا ربحًا للتجارة الإلكترونية عبر الأجهزة المحمولة، <a href="https://baymard.com/mcommerce-usability/benchmark/mobile-site-reviews" rel="external nofollow">يدعم أكثر من 60% من هذه التطبيقات</a> إيماءات التكبير والتصغير، مما يشير إلى أهمية دعم إيماءات التكبير والتصغير في تطبيقات التجارة الإلكترونية على الهواتف المحمولة، وبالنظر إلى الحجم الصغير لشاشة الهواتف المحمولة، فهذه تُعَد مشكلةً خاصةً بالنظام الأساسي.
</p>

<p>
	على هذا الأساس، سيؤدي دعم واحدة على الأقل من هذه المزايا إلى وضع التطبيق في قائمة أفضل 50% من تطبيقات التجارة الإلكترونية.
</p>

<p>
	فيما يلي عاملين أساسيين يجب أخذهما في الحسبان عند تصميم تطبيقات التجارة الإلكترونية:
</p>

<ul>
	<li>
		الابتعاد عن إضافة الصور بدقة منخفضة، لأن ذلك يوازي إضافة الصور دون إمكانية التكبير، حيث يهتم المستخدمون برؤية تفاصيل المنتج بوضوح ويحتاجون إلى صور عالية الدقة للقيام بذلك. ويُعَد خيار تكبير صورة منخفضة الجودة عديم الفائدة، لأنه لا يسمح للمستخدم برؤية التفاصيل.
	</li>
	<li>
		اكتشف معهد Baymard أن 50% من التطبيقات لا توضح للمستخدمين بأنهم يستطيعون تكبير صورة المنتج من خلال النقر المزدوج عليها، وهذا خطأ شائع، حيث يجب إرشاد المستخدمين إلى إمكانية تكبير حجم الصورة. وعلى الرغم من أن هذه الإيماءات معروفة لمعظم مستخدمي الهواتف المحمولة، إلا أنه ينبغي تذكيرهم بها.
	</li>
</ul>

<h2>
	توفير ميزة "حفظ" لعربة التسوق
</h2>

<p>
	كما ذكرنا سابقًا، يُعَد الحجم الصغير لشاشة الهواتف المحمولة بمنزلة عقبة أساسية لتطبيقات التجارة الإلكترونية، فقد لاحظ معهد Baymard أن <a href="https://baymard.com/blog/ecommerce-checkout-usability-report-and-benchmark" rel="external nofollow">أكثر من 61% من مستخدمي الهواتف المحمولة</a> يستخدمون في الغالب حواسيبهم المكتبية لإكمال عمليات شراء بدلًا من هواتفهم المحمولة.
</p>

<p>
	تقلل ميزة "حفظ عربة التسوق" من عدد حالات التخلي عن سلة التسوق وتمكّن المتسوقين من حفظ العناصر لإكمال عملية شرائها في أي وقت لاحق. تتيح ميزة "حفظ عربة التسوق" للعملاء إمكانية مواصلة التسوق دون الحاجة إلى البحث عن المنتج المطلوب عند عودتهم، وهي ميزة سيستفيد منها 55% من المتسوقين حسب <a href="http://www.emarketer.com/Article/Retailers-Rethink-Shopping-Cart-Abandonment/1009645http://www.emarketer.com/Article/Retailers-Rethink-Shopping-Cart-Abandonment/1009645" rel="external nofollow">إحدى الإحصائيات</a>.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126686" href="https://academy.hsoub.com/uploads/monthly_2023_05/04--------.png.48e201d4587cc7707ebecdc731fce920.png" rel=""><img alt="04-ميزة-حفظ-عربات-التسوق-في-تطبيقات-التجارة-الإلكترونية.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126686" data-ratio="60.78" data-unique="o1rb856wt" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/04--------.thumb.png.87b4f7641f9c4f2b66618ea40a5bb290.png"></a>
</p>

<p>
	إليك بعض الإستراتيجيات الخاصة بعربات التسوق والتي تساعد على الاحتفاظ بالعملاء:
</p>

<ol>
	<li>
		اجعل عربة التسوق مثل قائمة للمنتجات المفضلة لدى المستخدم، وذلك عن طريق حفظ العناصر المضافة في سلة التسوق.
	</li>
	<li>
		أنشئ خيارًا يتيح للمتسوقين تلقي رسائل البريد الإلكتروني بالعناصر المحفوظة.
	</li>
	<li>
		ذكّر المستخدمين بإمكانية استخدام حاسوبهم المكتبي لإتمام <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%B4%D8%B1%D8%A7%D8%A1-r641/" rel="">عملية الشراء</a>.
	</li>
</ol>

<h2>
	استخدام نماذج ذات اسم ووصف واضحين
</h2>

<p>
	من الأمور الأخرى التي يجب الاهتمام بها عند تصميم تطبيقات التجارة الإلكترونية هي تصميم نماذج معلومات تساعد على تحسين <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-r149/" rel="">تجربة المستخدم</a>، وذلك من خلال السماح للمستخدمين بإكمال النماذج في أسرع وقت ممكن.
</p>

<p>
	فيما يلي أفضل الممارسات التي تساعد على تسهيل استخدام نماذج تطبيقات الهواتف المحمولة:
</p>

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

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126677" href="https://academy.hsoub.com/uploads/monthly_2023_05/05------.png.cc8748db81b452a0640a10a554a6ea29.png" rel=""><img alt="05-النماذج-المُسمَّاة-في-تطبيقات-التجارة-الإلكترونية.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126677" data-ratio="60.78" data-unique="zduvfgjrr" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/05------.thumb.png.5d98f9ef2329292b6f20258e0310a707.png"></a>
</p>

<h2>
	توفير ميزة الاقتراحات التلقائية والكشف التلقائي
</h2>

<p>
	الغرض الرئيسي من الاقتراح التلقائي هو تسهيل عملية ملء النماذج عند المستخدمين، إذ يتنبأ الاقتراح التلقائي بعبارات البحث الشائعة ويساعد المتسوقين في العثور على المنتجات بسهولة أكبر.
</p>

<p>
	يمكن تحسين قابلية استخدام الهواتف المحمولة عند استخدام الكشف التلقائي لنوع بطاقة الائتمان، مما يساعد على تبسيط عمليات الشراء من خلال تقديم ملاحظات فورية لأنواع البطاقات المدعومة، إذ تعمل أتمتة أكبر عدد ممكن من عمليات إدخال البيانات على تحسين تجربة المستخدم ولها أثر إيجابي واضح في <a href="https://academy.hsoub.com/marketing/sales/12-%D9%82%D8%A7%D8%B9%D8%AF%D8%A9-%D8%A8%D8%B3%D9%8A%D8%B7%D8%A9-%D9%84%D8%AA%D8%AD%D8%B3%D9%8A%D9%86-%D9%85%D8%B9%D8%AF%D9%84%D8%A7%D8%AA-%D8%A7%D9%84%D8%AA%D8%AD%D9%88%D9%8A%D9%84-%D8%A5%D9%84%D9%89-%D9%85%D9%88%D8%A7%D9%82%D8%B9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D8%A9-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A%D8%A9-r399/" rel="">معدلات التحويل</a>.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126682" href="https://academy.hsoub.com/uploads/monthly_2023_05/06------Esty--Toys_R_Us--.png.3cb70a913bd6f170d758fc5b9050262b.png" rel=""><img alt="06-البحث-باستخدام-الاقتراحات-في-تطبيق-Esty-وتطبيق-Toys_R_Us-للتجارة-الإلكترونية.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126682" data-ratio="60.78" data-unique="rho2h1s9k" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/06------Esty--Toys_R_Us--.thumb.png.a7e1746a9e6fdf0ecc5eb8cd4e9a3fd9.png"></a>
</p>

<p>
	تُعَد ميزة التحقق من صحة إدخال البيانات من أفضل الممارسات في تصميم تجربة المستخدم للهواتف المحمولة، إذ يتسبب نقص الأداء السريع في إحباط كبير للمتسوقين، ويمكن المساعدة في ذلك من خلال تزويد المستخدمين بتعليقات مباشرة حول تقدمهم، ولا سيّما عندما يرتكبون خطأً غير مقصود، مما يتيح لهم إمكانية تعديل أخطائهم على الفور، الأمر الذي يساعد على تحسين <a href="https://academy.hsoub.com/design/user-experience/%D9%82%D8%A7%D8%A8%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r728/" rel="">قابلية الاستخدام</a>.
</p>

<h2>
	استخدام التفاعلات الدقيقة
</h2>

<p>
	التفاعلات الدقيقة هي تفاصيل في صفحة المنتج تهدف إلى إنجاز مهمة واحدة مع تحسين عملية التعرف على المنتج، فالإعجاب بالمنتج وتقييمه واختيار لونه وحجمه والتمرير للأسفل لتحديث البيانات، كلها تُعَد أمثلةً على التفاعلات الدقيقة.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="gif" data-fileid="126683" href="https://academy.hsoub.com/uploads/monthly_2023_05/07-----Gronland.gif.5594be97c5e0669a998cc8d5a375b2ff.gif" rel=""><img alt="07-التفاعلات-الدقيقة-في-تطبيق-Gronland.gif" class="ipsImage ipsImage_thumbnailed" data-fileid="126683" data-unique="2h9blqun2" src="https://academy.hsoub.com/uploads/monthly_2023_05/07-----Gronland.gif.5594be97c5e0669a998cc8d5a375b2ff.gif"> </a>
</p>

<p>
	تلعب التفاعلات الدقيقة دورًا مهمًا في عملية تحسين تجربة المستخدم على تطبيقات <a href="https://academy.hsoub.com/entrepreneurship/ecommerce/%D9%88%D8%A7%D9%82%D8%B9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D8%A9-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A%D8%A9-%D9%81%D9%8A-%D8%A7%D9%84%D8%B9%D8%A7%D9%84%D9%85-%D8%A7%D9%84%D8%B9%D8%B1%D8%A8%D9%8A-%D9%88%D8%A7%D9%84%D8%B9%D9%88%D8%A7%D9%85%D9%84-%D8%A7%D9%84%D9%85%D8%A4%D8%AB%D8%B1%D8%A9-%D9%81%D9%8A%D9%87%D8%A7-r765/" rel="">التجارة الإلكترونية</a>، ويمكن استخدام التفاعلات الدقيقة من أجل:
</p>

<ul>
	<li>
		توجيه المستخدم عبر التطبيق بطريقة سلسة.
	</li>
	<li>
		بناء الثقة مع المستخدم والتخفيف من قلقه، وتعزيز راحته النفسية من خلال التفاعلات السهلة والطبيعية.
	</li>
	<li>
		تجنب الأخطاء المستقبلية وتقديم ملاحظات فورية للمستخدمين بناءً على الأنشطة التي أكملوها.
	</li>
	<li>
		تحسين تفاعل المستخدم مع التطبيق من خلال الرد على الإشعارات.
	</li>
</ul>

<h2>
	توفير تفاعل سهل وملائم للإبهام
</h2>

<p>
	من الجوانب المهمة التي يجب مراعاتها عند تصميم تجربة المستخدم هي الوضعيات الشائعة التي يمسك بها الأشخاص هواتفهم المحمولة.
</p>

<p>
	في عام 2013، بحث ستيفن هوبر Steven Hoober حول الكيفية التي يمسك بها الأشخاص هواتفهم المحمولة، ولاحظ ثلاثة أنماط سلوكية رئيسية يجب أن تُراعى في <a href="https://academy.hsoub.com/design/user-experience/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r709/" rel="">تصميم تجربة المستخدم</a> للهواتف المحمولة، فحسب الصورة المرفقة، تُعَد المنطقة الخضراء المكان المفضل للتفاعل عند المستخدمين، تليها المنطقة الصفراء التي يمكن التفاعل معها مع شيء من الصعوبة، أما المنطقة الحمراء فهي الأصعب للتفاعل، والتي يجب تجنب وضع أي عناصر مهمة فيها.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126678" href="https://academy.hsoub.com/uploads/monthly_2023_05/08------.png.3fe9bf9c416eeed10b6140eb7207ff3d.png" rel=""><img alt="08-تقسيم-الشاشة-حسب-سهولة-التفاعل-معها.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126678" data-unique="af9azusic" src="https://academy.hsoub.com/uploads/monthly_2023_05/08------.thumb.png.d8c56993d1e241b4cb30fdc1a320b3a5.png"> </a>
</p>

<p>
	يساعد تصميم الواجهات مع الكيفية التي يمسك بها الأشخاص هواتفهم على زيادة راحة المستخدمين والتقليل من قلقهم. تتعدد أنواع الأجهزة المحمولة وتختلف فيما بينها بالأحجام، لكن يبقى نطاق الإبهام متشابهًا فيما بينها، لذلك، يُعَد التصميم حول منطقة الإبهام جانبًا مهمًا من جوانب تصميم تجربة المستخدم، وفيما يلي بعض فوائده:
</p>

<ul>
	<li>
		يحل المشكلات المحتملة أثناء التنقل والاستكشاف.
	</li>
	<li>
		يحسّن التفاعل من خلال استيعاب الإيماءات ومناطق وصول الأصابع.
	</li>
	<li>
		يزيد من معدلات التحويل ويحسن قابلية الاستخدام من خلال وضع العناصر المهمة في مناطق يسهل الوصول إليها.
	</li>
</ul>

<h3>
	منح المستخدم مشاعر الطمأنينة والأمان
</h3>

<p>
	تُعَد مخاوف المستخدمين إحدى أكبر المشكلات التي يمكن أن تعترض عمليات الشراء على تطبيقات التجارة الإلكترونية، ومن ذلك تأتي قيمة وأهمية إخبار المستخدمين بأن جميع معاملاتهم آمنة على التطبيق.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126679" href="https://academy.hsoub.com/uploads/monthly_2023_05/09------.png.26d994b3e4a05b494058a872c6360bd8.png" rel=""><img alt="09-مظاهر-الأمان-في-تطبيقات-التجارة-الإلكترونية.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126679" data-ratio="60.78" data-unique="pr9f81xp8" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/09------.thumb.png.26a5ee6ace7f77edc4b13a4dbbcc633c.png"></a>
</p>

<p>
	إليك فيما يلي بعض أساليب تصميم تجربة المستخدم، والتي تساعد على تقليل قلق المستخدمين ومنحهم شعورًا بالأمان:
</p>

<ul>
	<li>
		اجعل تسميات الأزرار موحيةً وواضحةً إلى المكان الذي سيتجه إليه المتسوقون. ستساعد بعض الكلمات على تعزيز الراحة النفسية لدى لمستخدمين، مثل كلمة "آمن" و"مشفر".
	</li>
	<li>
		استخدم رمز القفل ليتأكد المتسوقون من أن معاملاتهم آمنة.
	</li>
	<li>
		استخدم شارات الثقة التي يتيحها موفرو الأمان مثل McAfee Secure و Norton، مما يساعد المستخدمين على إدراك موقعك الإلكتروني بطريقة إيجابية (حسب دراسة معهد Baymard).
	</li>
	<li>
		تطبيق مبادئ <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%B9%D9%84%D9%85-%D9%86%D9%81%D8%B3-%D8%A7%D9%84%D8%A3%D9%84%D9%88%D8%A7%D9%86-%D9%81%D9%8A-%D8%A7%D9%84%D8%AA%D8%B3%D9%88%D9%8A%D9%82-%D9%88%D8%A8%D9%86%D8%A7%D8%A1-%D8%A7%D9%84%D8%B9%D9%84%D8%A7%D9%85%D8%A7%D8%AA-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D9%8A%D8%A9-r549/" rel="">علم نفس الألوان</a> في التصميم، إذ تساعد الألوان المناسبة على توطيد العلاقة مع المستخدمين. تتضمن هذه المبادئ ألوانًا موجهةً للجمهور وملائمةً للجنس.
	</li>
</ul>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2023_05/10-------.png.33e0e08979459c9c12762b034172e5a4.png" data-fileid="126675" data-fileext="png" rel=""><img class="ipsImage ipsImage_thumbnailed" data-fileid="126675" data-ratio="60.78" data-unique="02htzj9lz" width="900" alt="10-أمثلة-عن-الأزرار-في-تطبيقات-التجارة-الإلكترونية.png" src="https://academy.hsoub.com/uploads/monthly_2023_05/10-------.thumb.png.fa82d0db2f44f9c47400544c63182769.png"></a>
</p>

<h3>
	تحسين تجربة البحث
</h3>

<p>
	يستخدم المتسوقون مواقع وتطبيقات التجارة الإلكترونية على الأجهزة المحمولة لاستكشاف المنتجات وشرائها، ومن هنا تنبع أهمية البحث المصمم جيدًا للتطبيقات التجارية، وفيما يلي بعض النصائح المهمة لتحسين تجربة البحث عبر التطبيق:
</p>

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

<p>
	من الجوانب المهمة التي يجب مراعاتها عند تصميم نماذج البحث هي أن أهميتها تكمن في المراحل الأولى فقط من تفاعل المستخدم مع التطبيق، فعادةً ما يبحث المستخدمون في التطبيق في بداية رحلة التسوق، لذا يكفي عرض نماذج البحث في بداية رحلة عملية الشراء، وقد يؤدي عرضها في المراحل المتقدمة إلى الإضرار بتجربة المستخدم، فعلى سبيل المثال، لن يكون البحث مفيدًا في مرحلة الدفع، وستتمثل وظيفته في تشتيت انتباه المستخدمين، وبالتالي قد يتخلون عن إتمام عملية الشراء.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126676" href="https://academy.hsoub.com/uploads/monthly_2023_05/11------.png.5200a075fe255988a85ea016bd1f9950.png" rel=""><img alt="11-نماذج-البحث-في-تطبيقات-التجارة-الإلكترونية.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126676" data-ratio="60.78" data-unique="fzuetn8mr" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/11------.thumb.png.216368d3ff5acf0cbc6c7359b6214cc3.png"></a>
</p>

<h3>
	توفير عملية دفع سهلة وسريعة
</h3>

<p>
	أظهرت الدراسات أن مرحلة الدفع هي الجزء الأكثر إرهاقًا للمستخدمين في عمليات الشراء عبر الإنترنت، وتوصل معهد Baymard من خلال <a href="https://baymard.com/blog/ecommerce-checkout-usability-report-and-benchmark" rel="external nofollow">دراسة قام بها</a> إلى أن 35% من المستخدمين تخلوا عن سلة التسوق بسبب شرط إنشاء حساب قبل الشراء. لذا من المهم تصميم عملية دفع سهلة وسريعة لا تشترط على المتسوقين التسجيل أولًا للتقليل من معدلات التخلي عن إتمام عمليات الشراء.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126681" href="https://academy.hsoub.com/uploads/monthly_2023_05/12-------.png.2d0928d5d48f24fa43c3b9e12ea8e780.png" rel=""><img alt="12-تسلسل-عملية-الدفع-في-تطبيقات-التجارة-الإلكترونية.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126681" data-ratio="60.78" data-unique="yoql4rz6h" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/12-------.thumb.png.49c37a82b3ce17cf52ac4ff25df90dbf.png"></a>
</p>

<p>
	توصلت <a href="https://baymard.com/blog/mobile-checkout" rel="external nofollow">دراسات قابلية الاستخدام</a> إلى أن أكثر من 60% من المستخدمين واجهوا صعوبةً في العثور على خيار الدفع كضيف، أي دفع ثمن المنتج دون الاضطرار إلى تسجيل الدخول، لذلك يجب أن يكون خيار الدفع كضيف مرئيًا بوضوح ويسهل الوصول إليه.
</p>

<p style="text-align: center;">
	<img alt="13-تسلسل-عملية-الشراء-في-تطبيقات-التجارة-الإلكترونية.gif" class="ipsImage ipsImage_thumbnailed" data-fileid="126672" data-ratio="75.00" data-unique="41eg7niev" width="800" src="https://academy.hsoub.com/uploads/monthly_2023_05/13-------.gif.59b4fe42783113072a2625d79f600976.gif">
</p>

<p>
	فيما يلي بعض الاقتراحات لتحسين عملية الدفع في المتاجر الإلكترونية:
</p>

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

<h2>
	ملخص الإستراتيجيات الرئيسية لتحسين تجربة التجارة الإلكترونية عبر الهواتف المحمولة
</h2>

<p>
	يمكن توضيح النقاط الأساسية الاستراتيجيات لتحسين تجربة التجارة الإلكترونية عبر الهواتف المحمولة في ما يلي:
</p>

<ul>
	<li>
		تسهيل عمليات الدفع وتسجيل الدخول.
	</li>
	<li>
		منح المستخدم شعورًا بالثقة والأمان من خلال عرض الرموز والشارات والشهادات المناسبة.
	</li>
	<li>
		توفير تفاعلات مصممة حول المناطق الملائمة للإبهام.
	</li>
	<li>
		تحسين عملية التنقل.
	</li>
	<li>
		توفير البحث السريع والتصفية السهلة للمنتجات.
	</li>
	<li>
		فهم العلاقة المباشرة بين زيادة قلق وإجهاد المستخدمين وبين انخفاض معدلات التحويل.
	</li>
	<li>
		دعم إيماءات التكبير لصور المنتجات.
	</li>
</ul>

<h2>
	في الختام
</h2>

<p>
	تُظهر الاتجاهات الحديثة تطورًا سريعًا لسوق التجارة الإلكترونية عبر الهواتف المحمولة، والتي أتاحت للبائعين العديد من الفوائد والأرباح، ولكن هذه الفوائد مشروطة بمدى قدرة البائعين على تطبيق الممارسات والمعايير التي تساعد على تحسين تجربة التجارة الإلكترونية عبر الهواتف المحمولة.
</p>

<p style="text-align: center;">
	<img alt="14-سهولة-الاستخدام-في-تطبيقات-التجارة-الإلكترونية.gif" class="ipsImage ipsImage_thumbnailed" data-fileid="126674" data-ratio="75.00" data-unique="e06o4s098" width="800" src="https://academy.hsoub.com/uploads/monthly_2023_05/14------.gif.d9b1bf4427b6aa9ec621496f9c746497.gif">
</p>

<p>
	يميل المتسوقون نحو التطبيقات الجميلة والمصممة جيدًا، والتي تتصف بقدرتها على التكيف مع سلوكيات المستخدمين ورغباتهم، وعلى الرغم من أن اختلاف التطبيقات فيما بينها من ناحية الطموحات والأهداف، ولكن تبقى المبادئ الأساسية الموضحة في مقالنا هذا ضروريةً لتصميم تطبيقات تجارية ناجحة على الهواتف المحمولة.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://www.toptal.com/designers/ux/ecommerce-ux-mobile-experience" rel="external nofollow">E-commerce UX for the Mobile Experience</a> لصاحبه Stelian Subotin.
</p>

<h2>
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-%D9%84%D9%84%D9%87%D9%88%D8%A7%D8%AA%D9%81-%D8%A7%D9%84%D9%85%D8%AD%D9%85%D9%88%D9%84%D8%A9-r829/" rel="">مبادئ تصميم تجربة المستخدم UX للهواتف المحمولة</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D8%B6%D8%A7%D9%81%D8%A9-%D8%AA%D9%81%D8%A7%D8%B9%D9%84%D8%A7%D8%AA-%D8%B5%D8%BA%D9%8A%D8%B1%D8%A9-%D8%AA%D8%AD%D8%B3%D9%86-%D9%85%D9%86-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D9%85%D9%88%D8%A7%D9%82%D8%B9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D8%A9-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A%D8%A9-r821/" rel="">كيفية إضافة تفاعلات صغيرة تحسن من تجربة مواقع التجارة الإلكترونية</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D9%85%D9%85%D8%A7%D8%B1%D8%B3%D8%A7%D8%AA-%D9%88%D8%AA%D8%AD%D8%AF%D9%8A%D8%A7%D8%AA-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%84%D9%84%D8%A3%D8%AC%D9%87%D8%B2%D8%A9-%D8%A7%D9%84%D9%85%D8%AD%D9%85%D9%88%D9%84%D8%A9-r830/" rel="">ممارسات وتحديات تصميم تجربة المستخدم للأجهزة المحمولة</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/entrepreneurship/ecommerce/%D9%84%D9%85%D8%A7%D8%B0%D8%A7-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D8%A9-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A%D8%A9-%D9%88%D9%85%D8%A7-%D8%A7%D9%84%D9%81%D8%B1%D8%B5-%D9%88%D8%A7%D9%84%D8%AA%D8%AD%D8%AF%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D8%AA%D9%8A-%D8%B3%D8%AA%D9%88%D8%A7%D8%AC%D9%87%D9%86%D8%A7-%D8%B9%D9%86%D8%AF-%D8%AF%D8%AE%D9%88%D9%84%D9%86%D8%A7-%D9%84%D9%84%D8%B3%D9%88%D9%82%D8%9F-r732/" rel="">لماذا التجارة الإلكترونية وما الفرص والتحديات التي ستواجهنا عند دخولنا للسوق؟</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/entrepreneurship/ecommerce/%D9%88%D8%A7%D9%82%D8%B9-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D8%A9-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A%D8%A9-%D9%81%D9%8A-%D8%A7%D9%84%D8%B9%D8%A7%D9%84%D9%85-%D8%A7%D9%84%D8%B9%D8%B1%D8%A8%D9%8A-%D9%88%D8%A7%D9%84%D8%B9%D9%88%D8%A7%D9%85%D9%84-%D8%A7%D9%84%D9%85%D8%A4%D8%AB%D8%B1%D8%A9-%D9%81%D9%8A%D9%87%D8%A7-r765/" rel="">واقع التجارة الإلكترونية في العالم العربي والعوامل المؤثرة فيها</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">833</guid><pubDate>Thu, 15 Jun 2023 14:00:00 +0000</pubDate></item><item><title>&#x645;&#x642;&#x627;&#x631;&#x646;&#x629; &#x628;&#x64A;&#x646; &#x62A;&#x637;&#x628;&#x64A;&#x642;&#x64A; Adobe XD &#x648; Sketch &#x644;&#x62A;&#x635;&#x645;&#x64A;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645;</title><link>https://academy.hsoub.com/design/user-experience/%D9%85%D9%82%D8%A7%D8%B1%D9%86%D8%A9-%D8%A8%D9%8A%D9%86-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D9%8A-adobe-xd-%D9%88-sketch-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r832/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2023_05/------Adobe-XD--Sketch---.png.0d0e7ceb1f34bed41c8e253257070e96.png" /></p>
<p>
	بعد مرور سنوات عديدة دون وجود أداة مخصصة لتصميم تجربة المستخدم UX، والساحة محتلة من قبل برامج متنوعة، مثل برنامج سكتش Sketch وبرنامج InVision وبرنامج فيجما Figma، بدأت شركة أدوبي Adobe رحلتها في تطوير برنامج أدوبي إكس دي Adobe XD. سنقدم في هذا المقال لمحةً سريعةً حول برنامج أدوبي إكس دي Adobe XD مع إجراء موازنة بينه وبين برنامج سكتش Sketch، والذي يُعَد الخيار الأكثر شهرةً في السوق.
</p>

<p>
	يحتاج مصممو <a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-r149/" rel="">تجربة المستخدم UX</a> إلى الكثير من الأدوات لإكمال مراحل العمل العديدة، مثل البحث والتصميم وإنشاء <a href="https://academy.hsoub.com/freelance/productivity/%D8%A7%D9%84%D9%81%D9%88%D8%A7%D8%A6%D8%AF-%D8%A7%D9%84%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D9%84%D8%A8%D9%86%D8%A7%D8%A1-%D8%A7%D9%84%D9%86%D9%85%D8%A7%D8%B0%D8%AC-%D8%A7%D9%84%D8%A3%D9%88%D9%84%D9%8A%D8%A9-r236/" rel="">النماذج الأولية</a> والتسليم. إذا كنت تنجز عملك على جهاز حاسوب، فمن المحتمل أن تطاردك الإشارة المستمرة إلى Sketch، وهو محرر رسومات شعاعية Vector مشهور وبسيط، مع عدد لا يُحصى من المكونات الإضافية المفيدة التي أصبحت بسرعة معيارًا صناعيًا، ولكنها متوفرة فقط على <a href="https://academy.hsoub.com/files/24-%D8%A3%D9%86%D8%B8%D9%85%D8%A9-%D8%A7%D9%84%D8%AA%D8%B4%D8%BA%D9%8A%D9%84-%D9%84%D9%84%D9%85%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D9%86/" rel="">نظام التشغيل</a> ماك أو إس macOS، هذا يعني أنه ما لم يكن لديك جهاز آبل Apple، فلن تتمكن من استخدام البرنامج، لكن الخبر السعيد أن شركة أدوبي Adobe أصدرت منافس قوي لبرنامج سكتش Sketch وهو برنامج أدوبي إكس دي Adobe XD.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126663" href="https://academy.hsoub.com/uploads/monthly_2023_05/01--------Adobe-XD.png.bb266e7c62c5ea7279b722ff2b7dddf9.png" rel=""><img alt="01-واجهة-المستخدم-في-برنامج-أدوبي-إكس-دي-Adobe-XD.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126663" data-ratio="57.67" data-unique="8mza55w47" style="width: 750px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/01--------Adobe-XD.thumb.png.536e59ed9ae0621952718d91e5b4c020.png"></a>
</p>

<p style="text-align: center;">
	أدوبي إكس دي Adobe XD
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="126664" href="https://academy.hsoub.com/uploads/monthly_2023_05/02------Sketch.png.88a04b27fb5fc2312f933cfc79402a35.png" rel=""><img alt="02-واجهة-المستخدم-في-برنامج-سكتش-Sketch.png" class="ipsImage ipsImage_thumbnailed" data-fileid="126664" data-unique="n0xj1s8ro" style="width: 750px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_05/02------Sketch.thumb.png.d22a4818bbcb66fc8be0f182ae78dc66.png"> </a>
</p>

<p style="text-align: center;">
	سكتش Sketch
</p>

<h2>
	ما هو برنامج أدوبي إكس دي Adobe XD؟
</h2>

<p>
	برنامج Adobe Experience Design CC، والذي يُختصر باسم برنامج أدوبي إكس دي Adobe XD، هو محرر رسومات شعاعية vector خفيف الوزن وأداة نماذج أولية، حيث أعلنت عنه شركة أدوبي عام 2015 باسم Project Comet. أُطلق البرنامج في مارس 2016 وهو الآن في المرحلة التجريبية، ويتلقى تحديثات كل شهر تقريبًا.
</p>

<p>
	فيما مضى، كانت أدوبي Adobe تعمل على إضافة مزايا لمصممي تجربة المستخدم على أدواتهم المثبتة، مثل <a href="https://academy.hsoub.com/design/graphic/photoshop/%D9%85%D9%82%D8%AF%D9%85%D8%A9-%D8%A5%D9%84%D9%89-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D8%AC-%D8%A3%D8%AF%D9%88%D8%A8%D9%8A-%D9%81%D9%88%D8%AA%D9%88%D8%B4%D9%88%D8%A8-adobe-photoshop-r541/" rel="">برنامج أدوبي فوتوشوب Adobe Photoshop</a> وبرنامج <a href="https://academy.hsoub.com/design/illustration/adobe-illustrator/%D9%85%D9%82%D8%AF%D9%85%D8%A9-%D8%A5%D9%84%D9%89-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D8%AC-%D8%A3%D8%AF%D9%88%D8%A8%D9%8A-%D8%A5%D9%84%D9%8A%D8%B3%D8%AA%D8%B1%D9%8A%D8%AA%D9%88%D8%B1-adobe-illustrator-%D9%88%D8%A7%D9%84%D8%AA%D8%B9%D8%B1%D9%81-%D8%B9%D9%84%D9%89-%D9%88%D8%A7%D8%AC%D9%87%D8%AA%D9%87-r542/" rel="">أدوبي إليستريتور Adobe Illustrator</a> وعلى الرغم من أن كلاهما من البرامج الرائعة، لكنهما ذات حجم كبير ولم يُصمما لهذا النوع من الوظائف.
</p>

<p>
	على مر السنين، ولا سيّما بعد إهمال أدوبي لأداة النماذج الأولية Adobe Fireworks عام 2013، شعر الكثير من مصممي تجربة المستخدم أن حزمة برامج Creative Cloud لا تتوافق مع <a href="https://academy.hsoub.com/marketing/sales/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D9%84%D8%AF%D8%B1%D8%A7%D8%B3%D8%A9-%D8%A7%D8%AD%D8%AA%D9%8A%D8%A7%D8%AC%D8%A7%D8%AA-%D9%88%D8%B1%D8%BA%D8%A8%D8%A7%D8%AA-%D8%B2%D8%A8%D8%A7%D8%A6%D9%86%D9%83-%D8%AD%D8%AA%D9%89-%D8%AA%D8%B2%D9%8A%D8%AF-%D9%85%D8%A8%D9%8A%D8%B9%D8%A7%D8%AA%D9%83-%D9%88%D8%A7%D9%84%D8%A3%D8%B1%D8%A8%D8%A7%D8%AD-r73/" rel="">احتياجات السوق</a>، وهذا ما دفع الكثير منهم إلى التوجه إلى برنامج سكتش Sketch في حال كان لديهم جهاز يعمل على نظام ماك أو إس macOS.
</p>

<p>
	كانت استجابة أدوبي لهذا النزوح الجماعي متأخرةً بعض الشيء، حيث كان قد مضى حينها على إطلاق شركة Bohemian Coding لبرنامج سكتش Sketch حوالي 6 سنوات كاملة، لكن ربما كان الأمر يستحق تلك المدة المنتظرة، ولا سيّما إذا كنت مقيدًا باستخدام أدوات أقل ملاءمةً على حاسوبك. دعونا نتعرف أكثر على برنامج أدوبي Adobe XD ونجري موازنةً سريعة بينه وبين برنامج سكتش Sketch.
</p>

<div class="banner-container ipsBox ipsPadding">
	<div class="inner-banner-container">
		<p class="banner-heading">
			دورة تطوير واجهات المستخدم
		</p>

		<p class="banner-subtitle">
			ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة
		</p>

		<div>
			<a class="ipsButton ipsButton_large ipsButton_primary ipsButton_important" href="https://academy.hsoub.com/learn/front-end-web-development/" rel="">اشترك الآن</a>
		</div>
	</div>

	<div class="banner-img">
		<img alt="دورة تطوير واجهات المستخدم" src="https://academy.hsoub.com/learn/assets/images/courses/front-end-web-development.png">
	</div>
</div>

<h2>
	واجهة المستخدم والمزايا الحصرية في أدوبي إكس دي Adobe XD
</h2>

<p>
	عند فتح <a href="https://academy.hsoub.com/design/graphic/%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-adobe-xd-%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86-%D9%81%D9%8A-%D8%B9%D8%A7%D9%84%D9%85-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-r548/" rel="">برنامج أدوبي إكس دي Adobe XD</a>، سيكون الانطباع الأول أن واجهة المستخدم مألوفة جدًا، سواءً لمستخدمي برنامج سكتش Sketch أو لمحبي برامج أدوبي Adobe لفترة طويلة. ابتعدت أدوبي Adobe في تصميمها عن الأزرار والقوائم القاتمة كما هو الحال مع برامج Creative Cloud، واختارت تقديم أفضل التصاميم الممكنة.
</p>

<p>
	على عكس برنامج سكتش Sketch، سترى مجموعة الأدوات على الجانب الأيسر من الشاشة، ولكن سترى القوائم الطويلة والخصائص الديناميكية على اليمين، كما هو الحال في سكتش Sketch. يُعَد برنامج أدوبي إكس دي سهل الاستخدام وسهل التعلم، بغض النظر عن الأداة التي كنت تستخدمها سابقًا، وإليك فيما يلي بعض المزايا الحصرية في أدوبي إكس دي Adobe XD.
</p>

<h3>
	التكرار الشبكي Repeat Grid
</h3>

<p>
	يحتوي برنامج أدوبي إكس دي Adobe XD على مجموعة من المزايا الفريدة، ومن جملتها أداة التكرار الشبكي Repeat Grid، والتي تتيح لك استنساخ مجموعة من الكائنات، مثل بطاقة التصميم المادي Material Design card مع بيانات متغيرة ومسافات شكلية بين النسخ.
</p>

<h3>
	النماذج الأولية
</h3>

<p>
	يتيح لك برنامج أدوبي إكس دي إمكانية إنشاء نموذج أولي تفاعلي دون الحاجة إلى مكونات إضافية خارجية، على عكس برنامج سكتش Sketch الذي يحتاج إلى مكونات إضافية. يتيح محرر النماذج الأولية للمصممين إمكانية توصيل المناطق التفاعلية بصريًا بشاشات أخرى باستخدام أدوات الربط وإعدادات التوصيل.
</p>

<p>
	عندما يكون النموذج الأولي التفاعلي جاهزًا، يمكنك نشره ومشاركته مع الآخرين، إذ يمكن عرضه على الإنترنت أو باستخدام تطبيق Adobe XD للهواتف المحمولة. ومع ذلك، لا تدعم النماذج الأولية في XD الإيماءات أو الأقسام الثابتة مثل الرؤوس حتى الآن، وهو أمر متاح في InVision وأدوات النماذج الأولية الأخرى التي ترتبط ببرنامج سكتش Sketch.
</p>

<h3>
	لوحة الأصول Assets panel
</h3>

<p>
	في تحديث أغسطس 2017، أضافت أدوبي لوحة الأصول Assets، وهي طريقة ذكية تساعد على إنشاء دليل نمط تفاعلي من خلال اختيار الألوان والخطوط والرموز. عندما تقوم بتغيير شيء ما في لوحة الأصول، سيتبع ذلك تغييرًا في كل عناصر الأصل في عملك الفني. يحتوي سكتش أيضًا على ميزة تغيير الألوان وأنماط الخطوط والرموز، ولكن توجد كل واحدة منها في لوحة خاصة بها.
</p>

<p>
	أعلنت أدوبي عن بعض المزايا التي تتوفر مستقبلًا، من بينها ميزة تهدف إلى توسيع لوحة الأصول، مما يسمح للمصمم بنشر دليل نمط المشروع مع الخطوط والألوان والأصول القابلة للتنزيل، إضافةً إلى النموذج الأولي التفاعلي وميزة الفحص، والتي تساعد المطور على استكشاف العناصر الموجودة داخل النموذج الأولي، وهو ما يسمى بـ "التسليم للمطورين" وهو ممكن بالفعل في سكتش باستخدام مكونات إضافية مثل Zeplin.
</p>

<p>
	هناك ميزة مستقبلية أخرى يتم التجهيز لها، وهي إمكانية التعاون بين المصممين داخل برنامج XD، وهو شيء يشبه ميزة التعاون الموجودة على مستندات جوجل ومتاحة بالفعل على أدوات تصميم UX الأخرى مثل Figma.
</p>

<h2>
	برنامج سكتش Sketch وملحقاته مقابل برنامج أدوبي إكس دي Adobe XD
</h2>

<table>
	<thead>
		<tr>
			<th>
				المزايا
			</th>
			<th>
				أدوبي إكس دي Adobe XD
			</th>
			<th>
				سكتش Sketch
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				الرسومات الموجهة أو الشعاعية Vector
			</td>
			<td>
				يدعم (وكذلك برنامج أدوبي إليستريتور Adobe Illustrator الموجود أساسًا ضمن حزمة برامج Creative Cloud)
			</td>
			<td>
				يدعم
			</td>
		</tr>
		<tr>
			<td>
				تحرير الصور المتقدم
			</td>
			<td>
				لا يدعم (ولكن يمكن ذلك من خلال برنامج أدوبي فوتوشوب Adobe Photoshop المتضمن في حزمة برامج Creative Cloud)
			</td>
			<td>
				لا يدعم
			</td>
		</tr>
		<tr>
			<td>
				حجمه خفيف
			</td>
			<td>
				نعم
			</td>
			<td>
				لا
			</td>
		</tr>
		<tr>
			<td>
				بناء النماذج الأولية
			</td>
			<td>
				يدعم
			</td>
			<td>
				لا يدعم (ولكنه متاح مع الملحقات الخارجية)
			</td>
		</tr>
		<tr>
			<td>
				تصدير الأصول
			</td>
			<td>
				يدعم
			</td>
			<td>
				يدعم
			</td>
		</tr>
		<tr>
			<td>
				الرموز والأنماط
			</td>
			<td>
				يدعم
			</td>
			<td>
				يدعم
			</td>
		</tr>
		<tr>
			<td>
				التكرار الشبكي Repeat grid
			</td>
			<td>
				يدعم
			</td>
			<td>
				لا يدعم
			</td>
		</tr>
		<tr>
			<td>
				شبكة المستندات Document grid
			</td>
			<td>
				يدعم
			</td>
			<td>
				يدعم (مع الأعمدة والمزيد من الخيارات)
			</td>
		</tr>
		<tr>
			<td>
				الملحقات
			</td>
			<td>
				ليس لديه ملحقات
			</td>
			<td>
				لديه ملحقات
			</td>
		</tr>
		<tr>
			<td>
				التعاون مع فريق العمل
			</td>
			<td>
				لا يتيح ذلك، لكن أُعلن عنها كميزة مستقبلية
			</td>
			<td>
				لا يتيح ذلك، ولكنها متوفرة مع المكونات الإضافية.
			</td>
		</tr>
		<tr>
			<td>
				نسخة ماك آو إس macOS
			</td>
			<td>
				متوفر
			</td>
			<td>
				متوفر
			</td>
		</tr>
		<tr>
			<td>
				نسخة ويندوز Windows
			</td>
			<td>
				متوفر مع ويندوز 10 أو أعلى
			</td>
			<td>
				غير متوفر
			</td>
		</tr>
	</tbody>
</table>

<p>
	عندما تنظر إلى الصورة الأكبر، ستلاحظ أن أدوبي Adobe لا تطمح من خلال برنامج XD إلى الوصول إلى مستوى برنامج سكتش فحسب، بل إنها ترغب في الذهاب بعيدًا لتشمل مكوناته الإضافية التي تغطي كامل عملية <a href="https://academy.hsoub.com/design/user-experience/%D8%A8%D8%B9%D8%B6-%D8%A7%D9%84%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%A7%D9%84%D8%AA%D9%88%D8%AC%D9%8A%D9%87%D9%8A%D8%A9-%D9%84%D9%84%D8%A8%D8%A7%D8%AD%D8%AB%D9%8A%D9%86-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r735/" rel="">تصميم تجربة المستخدم</a>، من إنشاء النماذج الأولية وصولًا إلى مرحلة التسليم.
</p>

<h2>
	الخلاصة
</h2>

<p>
	يناسب برنامج أدوبي إكس دي Adobe XD بالدرجة الأولى مستخدمي نظام ويندوز Windows، حيث لا يمكنهم استخدام برنامج سكتش Sketch لأنه خاص بالحواسيب التي تعمل بنظام ماك أو إس macOS، كما يُعَد برنامج Adobe XD مناسبًا للمشتركين في حزمة برامج Adobe Creative Cloud، لأنهم لن يضطروا إلى دفع المزيد من المال مقابل استخدام البرنامج.
</p>

<p>
	في الواقع، هناك العديد من <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r813/" rel="">مصممي تجربة المستخدم</a> الذين ينتقلون من استخدام برنامج سكتش إلى برنامج أدوبي إكس دي، إما لأنهم مشتركون بالفعل في حزمة برامج Creative Cloud حتى على نظام macOS، أو لأنهم يعتقدون بتفوق مزايا برنامج أدوبي إكس دي على برنامج سكتش.
</p>

<p>
	إذا كنت من المستخدمين الخبراء لبرنامج سكتش، فستتمتع بواجهة أفضل عمومًا مع ميزات تصميم فريدة، ولكن سيتعين عليك التعامل مع بعض التحديات الحالية ونقص دعم المكونات الإضافية، وفي جميع الأحوال، إذا كان بإمكانك تجربة كلا البرنامجين فافعل، وشاركنا انطباعك عنهما.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://www.toptal.com/designers/ux/adobe-xd-vs-sketch-which-tool" rel="external nofollow">?Adobe XD vs. Sketch – Which UX Tool Is Right for You</a> لصاحبه Sérgio Estrella.
</p>

<h2>
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/graphic/%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-adobe-xd-%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86-%D9%81%D9%8A-%D8%B9%D8%A7%D9%84%D9%85-%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-r548/" rel="">دليل استخدام Adobe XD للمبتدئين في عالم التصميم</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-interface/%D9%86%D9%85%D8%A7%D8%B0%D8%AC-xd-%D8%A7%D9%84%D8%A3%D9%88%D9%84%D9%8A%D8%A9-%D8%B0%D8%A7%D8%AA-%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%A7%D8%AC%D9%8A%D8%A9-%D8%A7%D9%84%D9%81%D8%B9%D8%A7%D9%84%D8%A9-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-adobe-xd-r643/" rel="">نماذج XD الأولية ذات الإنتاجية الفعالة باستخدام Adobe XD</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/graphic/photoshop/%D8%B3%D9%83%D8%AA%D8%B4-%D9%85%D9%82%D8%A7%D8%A8%D9%84-%D9%81%D9%88%D8%AA%D9%88%D8%B4%D9%88%D8%A8-5-%D9%85%D8%B5%D9%85%D9%85%D9%8A%D9%86-%D8%AE%D8%A8%D8%B1%D8%A7%D8%A1-%D9%8A%D8%B4%D8%A7%D8%B1%D9%83%D9%88%D9%86%D9%83-%D8%A3%D9%81%D9%83%D8%A7%D8%B1%D9%87%D9%85-r484/" rel="">سكتش مقابل فوتوشوب: 5 مصممين خبراء يشاركونك أفكارهم</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">832</guid><pubDate>Thu, 01 Jun 2023 14:01:00 +0000</pubDate></item><item><title>&#x645;&#x645;&#x627;&#x631;&#x633;&#x627;&#x62A; &#x648;&#x62A;&#x62D;&#x62F;&#x64A;&#x627;&#x62A; &#x62A;&#x635;&#x645;&#x64A;&#x645; &#x62A;&#x62C;&#x631;&#x628;&#x629; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645; &#x644;&#x644;&#x623;&#x62C;&#x647;&#x632;&#x629; &#x627;&#x644;&#x645;&#x62D;&#x645;&#x648;&#x644;&#x629;</title><link>https://academy.hsoub.com/design/user-experience/%D9%85%D9%85%D8%A7%D8%B1%D8%B3%D8%A7%D8%AA-%D9%88%D8%AA%D8%AD%D8%AF%D9%8A%D8%A7%D8%AA-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D9%84%D9%84%D8%A3%D8%AC%D9%87%D8%B2%D8%A9-%D8%A7%D9%84%D9%85%D8%AD%D9%85%D9%88%D9%84%D8%A9-r830/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2023_05/---------.png.1f61ea89b506735dbd156d31f89affd7.png" /></p>
<p>
	يمكننا تحسين تجربة المستخدم وتطويرها من خلال اتباع بعض الممارسات الجيدة، إضافةً إلى فهم التحديات التي تواجه مصممي تجربة المستخدم وابتكار الحلول التي تساعد على تجاوز هذه التحديات. سنناقش في مقالنا هذا بعض الممارسات والتحديات المهمة في تصميم تجربة المستخدم للأجهزة المحمولة، علاوةً على كيفية إيجاد علاقة عمل قوية مع المطورين.
</p>

<h2>
	ما المقصود بتصميم تجربة المستخدم للأجهزة المحمولة؟
</h2>

<p>
	أشارت <a href="https://techcrunch.com/2018/11/22/thanksgiving-ecommerce-spend/" rel="external nofollow">مقالة حديثة على موقع TechCrunch</a> إلى أن التجارة الإلكترونية عبر الأجهزة المحمولة شكلت حوالي ثلث إجمالي المبيعات عبر الإنترنت خلال فترات الأعياد لعام 2018، ووفقًا لتقرير نُشر على موقع <a href="https://www.digitaltrends.com/mobile/5-billion-mobile-users/" rel="external nofollow">Digital Trends</a>، فإن 5 مليارات شخص حول العالم كان لديهم هواتف محمولة عام 2017، كما أعلنت جوجل Google في <a href="https://techcrunch.com/2018/12/19/google-says-mobile-first-indexing-is-now-used-for-over-half-the-web-pages-in-its-search-results/" rel="external nofollow">أحد تقاريرها</a> أنها تستخدم فهرسة الأجهزة المحمولة أولًا لأكثر من نصف <a href="https://academy.hsoub.com/marketing/search-engine-optimisation/%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D8%AA%D9%8A-%D8%AA%D8%AA%D8%A8%D8%B9%D9%87%D8%A7-%D9%85%D8%AD%D8%B1%D9%83%D8%A7%D8%AA-%D8%A7%D9%84%D8%A8%D8%AD%D8%AB-%D9%81%D9%8A-%D9%81%D9%87%D8%B1%D8%B3%D8%A9-%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-r647/" rel="">صفحات الويب في نتائج البحث</a>.
</p>

<p>
	يعتمد الأشخاص على أجهزتهم المحمولة يوميًا للتواصل و<a href="https://academy.hsoub.com/entrepreneurship/ecommerce/%D9%85%D9%86%D8%B5%D8%A7%D8%AA-%D8%A7%D9%84%D8%AA%D8%AC%D8%A7%D8%B1%D8%A9-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D8%B9%D8%B1%D8%A8%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D9%85%D9%82%D8%A7%D8%B1%D9%86%D8%A9-%D9%85%D8%B9-%D8%A7%D9%84%D9%85%D9%86%D8%B5%D8%A7%D8%AA-%D8%A7%D9%84%D8%A3%D8%AC%D9%86%D8%A8%D9%8A%D8%A9-r766/" rel="">التجارة الإلكترونية</a> وتصفح المحتوى والعمل، إضافةً إلى إجراء المعاملات المصرفية واستخدام خرائط جوجل لمعرفة الاتجاهات. علاوةً على ذلك، يستخدم الناس مجموعةً متنوعةً من الأجهزة المحمولة، مثل الهواتف المحمولة والساعات الذكية والأجهزة اللوحية والحواسيب المحمولة وغيرها.
</p>

<p>
	يشير <a href="https://academy.hsoub.com/design/user-experience/%D8%A8%D8%B9%D8%B6-%D8%A7%D9%84%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%A7%D9%84%D8%AA%D9%88%D8%AC%D9%8A%D9%87%D9%8A%D8%A9-%D9%84%D9%84%D8%A8%D8%A7%D8%AD%D8%AB%D9%8A%D9%86-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r735/" rel="">تصميم تجربة المستخدم</a> للأجهزة المحمولة إلى منح المستخدمين تجارب إيجابية أثناء استخدامهم للأجهزة المحمولة أو التطبيقات والخدمات التي تعمل على هذه الأجهزة. يركز تصميم تجربة المستخدم للأجهزة المحمولة على الكفاءة وقابلية الاكتشاف.
</p>

<p>
	بالنسبة لمصممي تجربة المستخدم، تمثل الاتجاهات الحديثة في تصميم الأجهزة المحمولة تحديات وفرص كبيرة، ومن ناحية أخرى، يجب علينا أن نأخذ في الحسبان تنوع الأجهزة والطرائق التي تُستخدم بها هذه الأجهزة، الأمر الذي يفتح لنا آفاقًا جديدةً من مجالات تصميم تجربة المستخدم، بغية تقديم تجارب إيجابية لجيل جديد من المستخدمين.
</p>

<h2>
	أفضل ممارسات تصميم تجربة المستخدم للأجهزة المحمولة
</h2>

<p>
	في الحقيقة، تُعَد مهنة <a href="https://academy.hsoub.com/design/user-experience/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r709/" rel="">تصميم تجربة المستخدم</a> للأجهزة المحمولة من المهن الصعبة، لأن هناك الكثير من الأشياء التي يتعين علينا أخذها في الحسبان، بما في ذلك القائمة المتزايدة للأجهزة المحمولة، وأساليب تفاعل الأشخاص معها، وحقيقة أن الأشخاص يبحثون عن تجارب سلسة وممتعة عبر جميع أنواع الأجهزة.
</p>

<h3>
	نصائح جوجل في تصميم تجربة المستخدم للأجهزة المحمولة
</h3>

<p>
	في عام 2015، نشرت جوجل Google <a href="https://developers.google.com/web/fundamentals/design-and-ux/principles/" rel="external nofollow">بعض الممارسات المهمة لتصميم تجربة المستخدم للأجهزة المحمولة</a> استنادًا إلى البحث الداخلي، وعملت جوجل مؤخرًا على تحديث هذه النصائح بهدف تحسينها. يمكن تنزيل جميع النصائح على شكل ملف PDF، والتي من الجيد الاحتفاظ بها في متناول اليد لأي مشروع تصميمي للأجهزة المحمولة.
</p>

<h3>
	إرشادات الواجهة البشرية من شركة Apple
</h3>

<p>
	من الموارد الرائعة الأخرى التي يجب أن تظل في متناول اليد هي <a href="https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/" rel="external nofollow">إرشادات الواجهة البشرية المقدمة من شركة آبل Apple</a> لتصميمات الأجهزة المحمولة، فهي إرشادات مهمة وسهلة القراءة وتتخللها أفضل الممارسات والنصائح في تصميم تجربة المستخدم للأجهزة المحمولة، إضافةً إلى أسلوب شركة آبل الخاص في مبادئ التصميم، لذا يمكن لمصممي الأجهزة المحمولة الاعتماد على هذه الإرشادات التي تُعَد مصدرًا رائعًا لتقديم تجارب مستخدم عالية الجودة.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="124432" href="https://academy.hsoub.com/uploads/monthly_2023_05/01-----.png.1d2b46364efbad28fe300790b867c29d.png" rel=""><img alt="01-إرشادات-الواجهة-البشرية-من-آبل.png" class="ipsImage ipsImage_thumbnailed" data-fileid="124432" data-ratio="53.67" data-unique="dbjes1igw" style="width: 600px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/01-----.thumb.png.e05dcbf7b2c42051b35b23db33be0228.png"></a>
</p>

<h3>
	ممارسات أخرى جيدة لتصميم تجربة المستخدم للأجهزة المحمولة
</h3>

<p>
	سنقدم فيما يلي بعض الممارسات المهمة في تصميم تجربة المستخدم للأجهزة المحمولة، والتي قد لا تكون معروفة جيدًا مثل ممارسات جوجل Google، ولكنها لا تقل أهميةً عنها، لذا ينبغي لمصممي تجارب الأجهزة أن يأخذوها في الحسبان، وإليك فيما يلي تلك الممارسات:
</p>

<ul>
	<li>
		<strong>أبحاث تجربة المستخدم</strong>: في مرحلة معينة، قد يرغب المصممون في العمل مباشرةً على تصميم نماذج العمل الحقيقية أو النماذج الأولية، لكن في الواقع، من الأفضل أن تُجرى <a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D8%A5%D8%AC%D8%B1%D8%A7%D8%A1-%D8%A3%D8%A8%D8%AD%D8%A7%D8%AB-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-r814/" rel="">أبحاث تجربة المستخدم</a> أولًا، فهي خطوة مهمة ولا يمكن التقليل من شأنها. تذكر دائمًا أن أفكارك ورؤيتك للعمل كمصمم قد تختلف كليًا عن رؤية ونظرة المستخدم، ومنه يجب أن تعتمد تجربة المستخدم الإيجابية على بحث متكامل يشمل جميع حالات تجربة المستخدم.
	</li>
	<li>
		<strong>التخلص من الفوضى</strong>: لقد عانينا جميعًا من التوتر الناجم عن ازدحام سطح المكتب، لذا تخيل تلك الفوضى وهي موجودة على جهاز محمول، حيث يمكن لكل زر أو صورة أو جزء من المحتوى أن يجعل الأشياء أكثر تعقيدًا. من الجيد التخلص من جميع الأشياء غير الضرورية في <a href="https://academy.hsoub.com/design/user-interface/%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ui-%D8%A7%D9%84%D8%AC%D9%8A%D8%AF%D8%A9-r804/" rel="">واجهة المستخدم</a> في الأجهزة المحمولة. اسعَ دائًا إلى تحقيق البساطة في تصميمك، ولكن ليس على حساب <a href="https://academy.hsoub.com/design/user-experience/%D9%82%D8%A7%D8%A8%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88%D8%A3%D9%87%D9%85%D9%8A%D8%AA%D9%87%D8%A7-%D9%81%D9%8A-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-r728/" rel="">قابلية الاستخدام</a> الجيدة.
	</li>
	<li>
		<strong>تحديد الأولويات</strong>: يميل المصممون إلى إضافة أكبر عدد ممكن من المزايا، فهم يشعرون أن التخلي عن ميزة ما يمكن أن يقلل من مستوى تجربة المستخدم، لكن الواقع عكس ذلك، حيث يجب على المصممين التركيز على المزايا المهمة بناءً على الأهداف الأساسية، كما يجب تحسين التصميم من خلال تحليل المزايا الأكثر استخدامًا، ثم بذل الجهد في جعل هذه المزايا بديهية وممتعة.
	</li>
	<li>
		<strong>أهداف اللمس</strong>: يمكن للمستخدمين أن يغضبوا ويبدأوا في ضرب أجهزتهم المحمولة عندما ينقرون على شيء ما ولا يستجيب، فقد وجدت <a href="http://touchlab.mit.edu/publications/2003_009.pdf" rel="external nofollow">دراسة أُجريت في معهد MIT للتكنولوجيا</a> أن معظم المستخدمين الغاضبين كانوا ينقرون على هدف لمس صغير جدًا، لذلك، احرص على ترك مسافة بين عناصر التحكم والأزرار والروابط وأي شيء يمثل هدفًا يمكن لمسه، ويجب ألا تقل هذه المسافة عن 7-10 مم، وهو متوسط عرض أطراف الأصابع. من الجيد أيضًا التأكد من وجود مسافات كافية بين عناصر واجهة المستخدم.
	</li>
	<li>
		<strong>كتابة النصوص بطريقة مفهومة</strong>: تعتمد معظم المهام التي يفعلها المستخدمون على استهلاك المحتوى، لذلك، احرص على اختيار <a href="https://academy.hsoub.com/design/general/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A5%D9%84%D9%89-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D8%AE%D8%B7%D9%88%D8%B7-r639/" rel="">أشكال خطوط</a> جيدة مع وضعها بأحجام مناسبة، مما يساعد على توفير تجربة سلسة عبر جميع أنواع الأجهزة المحمولة. يوصى باستخدام أحجام خطوط لا تقل عن 11 للتقليل من إجهاد عيون المستخدمين.
	</li>
	<li>
		<strong>إمكانية الوصول</strong>: يُعَد هذا الجانب من أكثر الجوانب التي يتجاهلها مصممو تجربة تجربة المستخدم، ولا سيّما مصممو تجربة المستخدم للأجهزة المحمولة، لذلك، يجب أن تضع نصب عينيك أن حوالي 15% من سكان العالم يعانون من أحد أشكال الإعاقة. في الصورة المرفقة مثال على إمكانية الوصول، إذ توفر شركة آبل Apple في أجهزتها المحمولة مزايا عديدة تحسن من إمكانية الوصول، مثل الاختصارات الصوتية والمساعدة على قراءة المحتوى.
	</li>
</ul>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="124431" href="https://academy.hsoub.com/uploads/monthly_2023_05/02-----.png.da073c8046f7309761ae5451343b478c.png" rel=""><img alt="02-تصميم-إمكانية-الوصول-في-آبل.png" class="ipsImage ipsImage_thumbnailed" data-fileid="124431" data-ratio="53.67" data-unique="69fgf2e11" style="width: 750px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/02-----.thumb.png.0cfb20cabd24453b89eda01adf131dfe.png"></a>
</p>

<h2>
	تحديات تصميم تجربة المستخدم للهواتف المحمولة
</h2>

<p>
	يهدف جميع مصممي تجربة المستخدم إلى تقديم تجارب ممتعة والوصول إلى تصميمات رائعة تحقق كلاً من قابلية الاكتشاف (وهي فهم المستخدم للإجراءات الممكنة) وفهم <a href="https://academy.hsoub.com/marketing/core-concepts-of-marketing/%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC-%D9%88%D8%A3%D9%86%D9%88%D8%A7%D8%B9%D9%87-r433/" rel="">المنتج</a> (أي الكيفية التي يُفترض من خلالها استخدام المنتج). تفرض الأجهزة المحمولة بعض التحديات لعملية تصميم تجربة المستخدم، وذلك بسبب الحجم الصغير للشاشة وإمكانية التنقل أثناء استخدام الأجهزة وطبيعة الأجواء التي تُستخدم فيها هذه الأجهزة، فضلًا عن الكثير من التحديات التي سنناقشها فيما يلي.
</p>

<h3>
	التخزين
</h3>

<p>
	عند التعامل مع تطبيقات الأجهزة المحمولة، يجب على المصممين أن يراعوا فكرة أنه ليس لدى جميع المستخدمين مساحة تخزين كبيرة. على النقيض من تطبيقات الويب، تستهلك تطبيقات الهواتف المحمولة مساحة تخزين مباشرة من ذاكرة الجهاز، وهذا ما يؤثر في تصميم تجربة المستخدم، حيث يفرض قيودًا محتملة على جودة الفيديو والصوت والصور التي يمكن استخدامها.
</p>

<p>
	يتوقع المستخدمون من مصممي تطبيقات الأجهزة المحمولة أن يراعوا قيود التخزين لديهم، لذا يجب عليك بصفتك مصممًا لتجربة المستخدم أن تأخذ قرارات صعبة فيما يجب الاحتفاظ به وما يجب حذفه من التطبيق، وفي حال أجبرت المستخدمين على اتخاذ هذه الخيارات، فسينعكس ذلك سلبًا على تجربة المستخدم.
</p>

<h3>
	الشاشات والتحكم
</h3>

<p>
	من التحديات الأخرى التي يجب مواجهتها في تصميم تجربة المستخدم هو حجم الشاشة وعناصر التحكم على الأجهزة المحمولة.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<p data-gramm="false">
		يتحدث جاكوب نيلسن Jakob Nielsen المستشار في قابلية الاستخدام حول شاشات الهواتف المحمولة الصغيرة قائلًا: "يمكن تشبيه القراءة من شاشات الهواتف المحمولة بالقراءة من الثقوب الصغيرة للأبواب، حيث تزيد عبء تحصيل المعرفة وتجعل الفهم ضعيفًا".
	</p>
</blockquote>

<p>
	أفضل طريقة للتعامل مع الشاشات وأدوات التحكم هي التخلص من أكبر قدر ممكن من الفوضى، حاول أن تعيد هيكلة المعلومات، وانتبه إلى مناطق وصول الإبهام، وقلل من عدد النقرات المطلوبة من المستخدم، ولا سيّما مع مواقع التجارة الإلكترونية، وانتبه إلى عملية تسجيل الدخول التي غالبًا ما تكون محبطة.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="124429" href="https://academy.hsoub.com/uploads/monthly_2023_05/03-----.png.9e9b7e5df6206ec475c32267cdc14097.png" rel=""><img alt="03-مناطق-وصول-الإبهام-على-الشاشة.png" class="ipsImage ipsImage_thumbnailed" data-fileid="124429" data-ratio="53.67" data-unique="nnl4fn8gj" style="width: 600px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/03-----.thumb.png.4c45ee4878d387eb1e4d79449929d9d7.png"></a>
</p>

<h3>
	تحديات البيئة
</h3>

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

<p>
	علاوةً على ذلك، يجب أن تأخذ العوامل المشتتة في الحسبان، لأنه غالبًا ما يستخدم الأشخاص هواتفهم المحمولة أو أجهزتهم اللوحية وهم في بيئة صاخبة أو مزدحمة تجعل من الصعب عليهم التركيز مع أجهزتهم. يجب أن تفكر في كيفية <a href="https://academy.hsoub.com/files/11-%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-user-experience-ux/" rel="">ضمان تجربة مستخدم جيدة</a> عندما تتنافس عوامل التشتيت على جذب انتباه المستخدم.
</p>

<h3>
	طريقة حمل الناس لأجهزتهم المحمولة
</h3>

<p>
	هناك تحدي آخر يجب على جميع المصممين أن يكونوا على قدر كافٍ من الوعي تجاهه، وهو الكيفية التي يمسك بها الأشخاص هواتفهم المحمولة، فوفقًا لبحث أجراه ستيفن هوبر Steven Hoober وذُكر في <a href="https://www.uxmatters.com/mt/archives/2017/05/design-for-fingers-touch-and-people-part-2.php" rel="external nofollow">الجزء الثاني من كتاب Design for Fingers, Touch, and People</a>، فقد اكتُشف أن الأشخاص يتفاعلون مع أجهزتهم المحمولة بطرق مختلفة اعتمادًا على كيفية حملهم لها، وهذا ما يؤثر على تصميم تجربة المستخدم.
</p>

<p>
	يحمل الناس أجهزتهم المحمولة بطرق متعددة ويغيرون أماكنهم من وقت إلى آخر، مما يؤدي إلى اختلاف الإصبع أو الأصابع التي يستخدمونها، كما تتأثر الكيفية التي يتفاعلون من خلالها مع واجهة المستخدم في تطبيقات الهواتف المحمولة، وإذا نظرت إلى الصورة أدناه، فستلاحظ أن المستخدمين يفضلون النقر على وسط الشاشة ولا يرغبون النقر فوق العناصر القريبة جدًا من حواف الشاشة، ولذلك، تؤثر الطريقة التي يحمل بها الأشخاص هواتفهم المحمولة على تصميم تجربة المستخدم.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="124428" href="https://academy.hsoub.com/uploads/monthly_2023_05/04-------.png.d9bd84a4379e630a6f431be8c0c19793.png" rel=""><img alt="04-الطريقة-التي-يحمل-بها-الأشخاص-هواتفهم-المحمولة.png" class="ipsImage ipsImage_thumbnailed" data-fileid="124428" data-ratio="58.67" data-unique="vg0b9c2pf" style="width: 650px; height: auto;" width="900" src="https://academy.hsoub.com/uploads/monthly_2023_05/04-------.thumb.png.cded156cf8162c5ed4605b7cb29f1ba9.png"></a>
</p>

<p>
	فيما يلي بعض النصائح الإضافية لتحسين تجربة المستخدم في الأجهزة المحمولة:
</p>

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

<h2>
	العمل مع المطورين
</h2>

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

<h3>
	نماذج العمل
</h3>

<p>
	عند إعداد النماذج وتسليمها، حاول أن تجعل أسماء الملفات بسيطة ومتسقة ووصفية، سيوفر ذلك على المطورين الكثير من الوقت والجهد. من الجيد أيضًا إنهاء جميع التعديلات على النماذج قبل مشاركتها مع المطورين حتى يتلقوا نسخة واحدة فقط من كل شاشة. نصيحة أخرى لتوفير الوقت، وهي اختبار جميع التفاعلات على النماذج الأولية حتى تعمل بنجاح فيما بعد. تُعَد أداة InVision وأداة Marvel من الأدوات الجيدة لمشاركة نماذج العمل مع المطورين.
</p>

<h3>
	النسخ
</h3>

<p>
	في بعض الحالات، يكون هناك الكثير من النسخ المختلفة عن النماذج الطبيعية والتي يجب مشاركتها مع المطورين، وفي الصورة التالية طريقة جيدة وبسيطة لمشاركة النماذج مع المطورين.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileext="png" data-fileid="124430" href="https://academy.hsoub.com/uploads/monthly_2023_05/05----.png.1ea251f28378a4922b8092442c7096fe.png" rel=""><img alt="05-تسليم-نماذج-التصميم-للمطورين.png" class="ipsImage ipsImage_thumbnailed" data-fileid="124430" data-unique="yn121t18j" style="width: 650px; height: auto;" src="https://academy.hsoub.com/uploads/monthly_2023_05/05----.thumb.png.200a1a0a561a5fbae9bca7ee46aad82f.png"> </a>
</p>

<p>
	كما رأينا أعلاه، يفيد "سياق الحالة" التي تشاركه مع المطورين على فهم الوقت الذي يجب أن تظهر فيها الرسالة للمستخدم أو تختفي. يجب أن يعلم المطور ما يجري حوله حتى لا يضطر إلى التخمين، حيث أن "الرسالة" هي النسخة الفعلية التي ستظهر للمستخدم. لا يرغب المطورون في أن يكونوا مؤلفي نصوص، ووظيفتك كمصمم هي أن تجعل الأمور سهلة عليهم قدر الإمكان.
</p>

<h3>
	التواصل مع المطورين
</h3>

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

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

<h2>
	الخلاصة
</h2>

<p>
	منذ بضع سنوات، وتحديدًا في عام 2016، حدث التغير الكبير في عالم الإنترنت، حيث تفوق عدد المستخدمين الذين يصلون إلى <a href="https://academy.hsoub.com/devops/networking/%D8%A2%D9%84%D9%8A%D8%A9-%D8%B9%D9%85%D9%84-%D8%B4%D8%A8%D9%83%D8%A9-%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA-r571/" rel="">شبكة الإنترنت</a> من خلال الأجهزة المحمولة على عدد المستخدمين الذي يصلون إلى الإنترنت من خلال الحاسوب المكتبي.
</p>

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

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://www.toptal.com/designers/mobile-ui/mobile-ux-design-principles" rel="external nofollow">Mobile UX Design Constraints, Best Practices, and Working With Developers</a> لصاحبه Shane Ketterman.
</p>

<h2>
	اقرأ أيضًا
</h2>

<ul>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-ux-%D9%84%D9%84%D9%87%D9%88%D8%A7%D8%AA%D9%81-%D8%A7%D9%84%D9%85%D8%AD%D9%85%D9%88%D9%84%D8%A9-r829/" rel="">مبادئ تصميم تجربة المستخدم UX للهواتف المحمولة</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-interface/%D9%85%D8%A7-%D8%A7%D9%84%D9%81%D8%B1%D9%82-%D8%A8%D9%8A%D9%86-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A%D8%A9-%D9%88%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A%D8%A9%D8%9F-r828/" rel="">ما الفرق بين تصميم المواقع الإلكترونية وتطوير المواقع الإلكترونية؟</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%B9%D8%B4%D8%B1-%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-%D8%B1%D8%A6%D9%8A%D8%B3%D9%8A%D8%A9-%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D9%87%D9%88%D8%A7%D8%AA%D9%81-%D8%A7%D9%84%D8%B0%D9%83%D9%8A%D8%A9-r315/" rel="">عشر مبادئ رئيسية لتصميم تجربة مستخدم على الهواتف الذكية</a>
	</li>
	<li>
		<a href="https://academy.hsoub.com/design/user-experience/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A-%D9%84%D8%B3%D9%87%D9%88%D9%84%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D8%A3%D8%AC%D9%87%D8%B2%D8%A9-%D8%A7%D9%84%D9%85%D8%AD%D9%85%D9%88%D9%84%D8%A9-r822/" rel="">الدليل الأساسي لسهولة الاستخدام على الأجهزة المحمولة</a>
	</li>
</ul>
]]></description><guid isPermaLink="false">830</guid><pubDate>Sat, 20 May 2023 14:00:00 +0000</pubDate></item></channel></rss>
