Aahfil.

الفرق بين UI و UX: شنو يحتاج نشاطك فعلاً

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

·7 دقيقة قراءة

الجواب المختصر

تصميم تجربة المستخدم (UX) يحدد الطريق اللي يمشيه العميل داخل تطبيقك أو موقعك: شنو يحتاج يسوي، بأي ترتيب، وشنو يصير لما شي يخرب. وتصميم واجهة المستخدم (UI) يحدد شكل كل خطوة: الترتيب، الخط، الألوان، الأزرار والكلام المكتوب عليها. التجربة تجاوب: هل يقدر العميل يوصل للي جاي علشانه؟ والواجهة تجاوب: هل يقدر يشوفه ويقراه ويثق فيه؟ ولما العملاء في الكويت يتركون تطبيق، السبب غالباً واحد من كل جهة متشابكين مع بعض، وعادة يكون أسوأ بالعربي من الإنجليزي.

هذا هو التعريف كله. باقي الدليل هو الجزء العملي: كيف تعرف أي جهة خربانة في منتجك، وليش العربي يخلي الحد بينهم مو واضح، وهل تحتاج متخصص واحد، أو اثنين، أو فريق يصمم الاثنين كشغل واحد. وإذا أنت عارف إنك تحتاج الشغل وتبي تشوف كيف نتعامل معاه، خدمة تصميم UI/UX عندنا تشرح الطريقة.

شكل تجربة المستخدم في نشاط حقيقي في الكويت

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

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

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

شكل الواجهة، وليش هي مو زينة

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

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

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

كيف تعرف أي وحدة خربانة في منتجك

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

وبعدين رتّب اللي شفته. المكان اللي يترددون فيه، مو عارفين شنو الخطوة الجاية أو وين يروحون، هذا UX: الطريق، ترتيب الخطوات، الخيار الناقص. والمكان اللي ما يقدرون يقرون أو يلقون فيه شي موجود على الشاشة، هذا UI: الحجم، التباين، التسمية، المكان. عميل يمر على رسوم التوصيل وما ينتبه لها مشكلة واجهة؛ وعميل ما يعرف الرسوم إلا في آخر خطوة مشكلة تجربة.

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

أعراض منتشرة في الكويت، مقسمة بين UI و UX

العملاء يعبّون السلة ويطلعون عند الدفع. غالباً التجربة أول: رسوم التوصيل تطلع متأخر، أو KNET مخبّى ورا خيار «بطاقة» عام، أو فشل الدفع يفضّي السلة. وأحياناً الواجهة بعد، لما يكون Apple Pay موجود تقنياً بس محطوط تحت لازم تنزل علشان تشوفه.

المندوبين يتصلون على العملاء يسألون عن الطريق. تجربة: مسار العنوان ما يطلب القطعة والجادة والدور ودبوس الخريطة بطريقة الناس فعلاً يكمّلونها. والحل في ترتيب الخانات وبنائها، مو في لونها.

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

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

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

ليش العربي يخلي الحد بين UI و UX مو واضح

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

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

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

تحتاج مصمم UX، ولا مصمم UI، ولا الاثنين؟

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

أغلب تطبيقات الكويت تحتاج الاثنين ينصلحون مع بعض، بالعربي والإنجليزي. إحنا نصمم المسار والشاشات كشغل واحد: البحث والمسارات في الأسبوع 1، المخططات الأولية والواجهة في الأسبوع 2، والحالات واللغتين ومكتبة المكونات والتسليم في الأسبوع 3. النطاق المحدد ياخذ أسبوعين إلى ثلاثة أسابيع من توقيع البريف لين التسليم، والتكلفة تعتمد على شنو ينحسب؛ ودليلنا عن تكلفة تصميم UI/UX في الكويت يشرح العوامل.

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

وين تروح بعدها

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

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

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

الأسئلة الشائعة

شنو الفرق بين UI و UX بجملة وحدة؟+

UX هو الطريق اللي يمشيه العميل علشان يخلص شي، و UI هو شكل كل خطوة في هالطريق وقد شنو هي واضحة.

شنو أهم لنشاط صغير في الكويت، UI ولا UX؟+

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

تصميم تجربة المستخدم بس للتطبيقات؟+

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

مصمم واحد يقدر يسوي UI و UX؟+

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

كيف أعرف إذا النسخة العربية عندي فيها مشكلة واجهة ولا تجربة؟+

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

اقرأ أيضاً

كل مقالات الهوية البصرية والتصميم ←