موقعي الأول

الحاجة

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

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

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

القيود

حددت منذ البداية عدة قيود: استضافة مجانية، ومن دون قاعدة بيانات أو ملفات تعريف ارتباط. كان لا بد من الجمع بين إمكانية الوصول وفق WCAG 2.2 AA والجودة البصرية. يجب أن يظل المحتوى مقروءًا حتى عند تعطيل JavaScript، وأن يعمل الموقع جيدًا على iPhone وiPad. خططت لثماني لغات، بما فيها العربية من اليمين إلى اليسار والصينية المبسطة.

مسارات بديلة

1. الاختيار

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

   البدائل المستبعدة

   بطاقات مرتبة على شكل حلقة؛ قائمة تقليدية فقط.

   السبب

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

2. الاختيار

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

   البدائل المستبعدة

   نشر عنوان البريد الإلكتروني على الصفحة؛ خدمة نماذج مدفوعة.

   السبب

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

3. الاختيار

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

   البدائل المستبعدة

   CMS مع قاعدة بيانات؛ تعديل الملفات يدويًا.

   السبب

   يمكنني تحديث النصوص من دون تعديل الشيفرة. وتتيح لي المعاينة التحقق من النتيجة قبل إتاحة أي تغيير للجمهور.

4. الاختيار

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

   البدائل المستبعدة

   إدراج النصوص مباشرة في الصفحات؛ CMS خارجي.

   السبب

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

5. الاختيار

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

   البدائل المستبعدة

   أيقونات بيضاء؛ ذهبي مسطح؛ رخام بعروق، جُرّب ثم أُزيل؛ صور على البطاقات؛ تنقل باستخدام النقاط.

   السبب

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

6. الاختيار

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

   البدائل المستبعدة

   قرارات مبنية على الذوق الشخصي وحده.

   السبب

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

النتيجة

الموقع منشور بثماني لغات. لا تكشف اختبارات إمكانية الوصول الآلية عن أي أخطاء في أي صفحة. بعد التحسين، انخفض حجم الصفحة الرئيسية التي تتضمن عناصر ثلاثية الأبعاد بنسبة 57%. ويؤدي كل تعديل إلى تشغيل اختبارات آلية على جميع الصفحات، بما في ذلك التحقق من أبعاد شاشات iPhone وiPad.

لا تغطي الاختبارات كل شيء، ومن المهم توضيح ذلك. اختبرت الموقع يدويًا على iPhone وiPad. كما اختبرته باستخدام Chrome وFirefox. أما Safari على Mac فلم أختبره بصورة منهجية. تُجرى بعض الاختبارات على الهواتف والأجهزة اللوحية في بيئات محاكاة. الترجمات الحالية آلية، وسأستعين بخدمات ترجمة احترافية في مرحلة لاحقة.