كيفية عمل نموذج الكتابة لتجربة المستخدم mock up Ux Writing

من الحقائق الرائجة في عالم الأعمال أنّ: الصورة تساوي 1000 كلمة، تلك المقولة تنطبق أيضًا على (الكلمات – العبارات\الجمل) في الكتابة لتجربة المستخدم UX Writing، فإذا كنت تعمل كـ كاتب لتجربة المستخدم UX Writer فإن خبراتك ومهاراتك ستكون في (الكلمات والعبارات\الجمل المختلفة) المناسبة، ولكن عملك سيكون داخل تصميمات الجرافيك (شاشات التطبيق – وصفحات المواقع\المنصات والمتاجر الإلكترونية)، لذلك سوف يرى العملاء كلماتك والجمل\العبارات المختلفة التي قمت بكتابتها في سياق تصميم واجهة المستخدم Ui وليست كخطوط نصية على شاشة بيضاء فحسب أو صفحة فارغة من أي تصميم مثلًا، سوف نتعلّم كيفية عمل نماذج mock up في عملنا كـ كتّاب لتجربة المستخدم وكيف قمت بعمل النماذج في عملي على أحد تطبيقات الموبايل وكذلك على موقع إلكتروني.

⚠️ إذا كنت تقرأ لأولّ مرّة عن تخصص الكتابة لتجربة المستخدم UX Writing فأنصّحك بمراجعة هذه المواضيع التي قمت بكتابتها سابقًا عن: 

لماذا نقوم بعمل نماذج mock up للكلمات والجمل\العبارات في الكتابة لتجربة المستخدم؟
لا اقترح أن تقوم بـ بعمل نماذج في كتابتك لتجربة المستخدم دائمًا، ولكن في بعض الأحيان سوف تساعدك هذه النماذج من عملك في التعاون بشكل أفضل مع شركاء العمل من المصممين والمبرمجين\المطورين للتطبيق أو الموقع الإلكتروني.

هذه بعض الأسباب لعمل نماذج أثناء عملك في الكتابة لتجربة المستخدم:

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

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

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

skitch

skitch

الصورة السابقة: مثال من فريق Dropbox، يوضّح كيف تكتب في مكان معين بالتصميم والمطلوب تعديله من فريق المبرمجين.

برنامج Keynote أو PowerPoint أم برنامج Google Slides🤔

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

mocking up UX writing by Keynote

mocking up UX writing by Keynote

الصورة السابقة مثال توضيحي لبعض الكلمات والجمل التي تم التعديل عليها أكثر من مرة في ٣ نسخ مختلفة، والخروج بنسخة حالية قابلة للاستخدام بنسبة ٩٠٪، ويمكن تحسينها أكثر فأكثر، يساعدني هذا الملف أيضًا في قياس المتغيرات واختبار نتائج التعديلات التي تمت على المستخدمين هل كانت إيجابية أم سلبية، وعمل الاختبارات A/B Testing  أمر ضروري جدًا في الكتابة لتجربة المستخدم فهو يجعلنا نصل إلى أفضل النتائج الممكنة مع المستخدم في التطبيق أو الموقع الإلكتروني الذي نعمل عليه.

متصفّح الويب ونظام ”Design Mode“ 

هل تعلّم أنك يمكن أن تقوم بعمل تعديلات حيّة على أي موقع إلكتروني تعمل عليه ومشاهدتها فور التعديل بدون استخدام أية أكواد برمجية أو حتى إضافات للمتصفّح! وتعمل هذه الخاصية على متصفّح جوجل كروم Chrome وكذلك على Safari، عندما تعرفّت على هذه الخاصية كدت أصاب بالجنون (شقى عمري يابا) 😅، لتوفيرها الوقت والموارد بشكل رهيب، حسنًا إليك الطريقة في الخطوات التالية:

  1. قم بحفظ هذا الكود في مفضلتك Bookmark
    document.body.contentEditable='true'; document.designMode='on'; void 0
  2. اذهب إلى أي صفحة تريد عمل تعديلات في النصوص الموجود بها.
  3. قم باختيار الكود الذي أضفناه في المفضلة والضغط عليه.
  4. اضغط الآن على أي نص تريد تعديله وأبدأ في الكتابة بكل سهولة ومشاهدة التعديلات على الفور!

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

الصورة توضح تجربة حيّة للتعديل على المدونة الشخصية الخاصة بي بدون تعديل أي كود 🤓

برنامج Figma أم Sketch؟

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

على أي حال أنا شخصيًا استخدم برنامج زابلين Zeplin وقد تحدثت عنه في تدوينة سابقة بالتفصيل يكفيني جدًا في انهاء عملي، هذه صورة توضيحية من فريق Dropbox توضح تجربة استخدام برنامج Figma فيجما في الكتابة لتجربة المستخدم UX Writing

Figma UX Writing

Figma UX Writing

التقاط صور للشاشة وعمل أرشيف هما كل شيء في عملنا

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

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

حسنًا ملخص ما سبق في نقاط: 

  • عمل نموذج في الكتابة لتجربة المستخدم يسهل عليك المهام والتعاون مع شركاء العمل بسهولة، وتعزيز الإنتاجية.
  • اعتمد على ملف كل شيء (الأرشيف) لسهولة استخدامه مرّة أخرى فيما بعد أثناء عملك.
  • وأخيرًا استخدم ملف كل شيء (الأرشيف) لاستخراج عينات منه وإضافتها إلى سيرتك الذاتية أو معرض أعمالك portfolio.

هذا كل شيء.
مصدر الصورة:  BongkarnThanyakij/Getty Images

4 Comments كيفية عمل نموذج الكتابة لتجربة المستخدم mock up Ux Writing

  1. هشام

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

    Reply
      1. هشام

        نعم، لا يمكنني أصلاً وضع نص في البوكمارك. لا بد من صفحة لها رابط url..

        Reply
        1. MidooDj

          معك حق جرّبت وفشلت يبدوا ان كروم بعد التحديثات الأخيرة أصبح لا يتيح إضافة الأكواد إلى ال bookmark
          يمكنك نسخ الكود وإضافته في الـ Console وسوف يعمل بنجاح

          Reply

✍️ اكتب تعليق