تصميم واجهات وتجربة مستخدم في الكويت، لشاشات يكمّلها العميل للآخر.

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

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

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

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

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

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

ونقرا اللي موجود عندك أصلاً: سجل الدعم في الواتساب، الأسئلة اللي توصلك على Instagram و Snapchat، التقييمات في App Store و Google Play، والملاحظات اللي يسجلها موظفين الكول سنتر أو المحل. في الكويت هالقنوات أحياناً فيها ملاحظات أصدق من أي استبيان، لأن العميل يكتب بكلامه وبلهجته، وبنفس اللحظة اللي صار فيها الخطأ.

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

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

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

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

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

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

الأرقام تحتاج قاعدة مكتوبة. النص العربي يقدر يستخدم الأرقام العربية الشرقية (٠١٢٣) أو الأرقام الغربية (0123)، والعميل في الكويت يقرا الاثنين براحة. اللي يكسر الثقة هو الخلط بينهم في نفس الشاشة، أو إن سعر المنتج يطلع بنظام والمجموع بنظام ثاني. نتفق معاك على القاعدة، وغالباً تكون الأرقام الغربية للأسعار وأرقام التلفون وأرقام الطلبات لأن العميل ينسخها للواتساب ولتطبيقات البنك، ونكتبها في الملف علشان كل مطور يطبقها بنفس الطريقة.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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