التخطيط لتصميم واجهة الموقع بإستخدام الWireframe والتفكير خارج الصندوق

كتبه أحمد مجدي 1 مارس 2014

قد يكون المشهد التالي متكرر مع كل مشروع تبدأ العمل عليه، تحدد الألوان التي ستصمم بها، ترسم تخطيط لهيكلة وترتيب واجهة الموقع … هنا سأضع الشعار، يجب أن يكون هناك سلايدر متحرك بالواجهة، هل وضعت أيقونات الشبكات الاجتماعية؟ ما هي الروابط التي سأضعها بالفوتر؟… ولكن السؤال الأكثر أهمية، هل كل الواجهات التفاعلية يجب أن يكون بها أزرار وسلايدر …  أين الإبتكار/ Innovation؟

Apple صنعت إبتكاراً في واجهات الاستخدام عندما أطلقت IPhone بتبسيط الواجهة واستخدام عناصر تفاعلية مبتكرة كـ Slide To Unlock ، ميكروسوفت صنعت إبتكاراً عندما أصدرت واجهة Metro وأطلقت التصميم المسطح Flat، ما هو الإبتكار في الواجهة التي تصممها؟ هل كل تفكيرنا يجب أن يكون منصباً على الازرار والسلايدر والwidgets؟

إذا طُلب منك أن تصمم واجهة تفاعليه لـ(موقع/تطبيق) دون إستخدام الأزرار أو حقول المدخلات Inputs، ما هي الأدوات الأخرى التي ستستخدمها ليتفاعل معها المستخدم في تصميمك والتي تستطيع من خلالها أن توصل للمستخدم هدف الموقع وكيفية التفاعل معه؟

احدى المقالات التي نشرت على موقع Inside Intercom جعلتني أتوقف عند هذه الفكرة، فكرة صناعة واجهات جديدة لا تعتمد على الأدوات التقليدية من الأزرار، السلايدر، حقول الادخال وعناصر واجهات الاستخدام التقليدية:-

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

الـ Wireframe لا يجعلك تفكر خارج الصندوق

ادوات ال Wireframing لا تعطي الحرية في تصميم الواجهات، انت محدد بتصميمات صممت مسبقاً لعناصر الواجهة.
ادوات ال Wireframing لا تعطي الحرية في تصميم الواجهات، انت محدد بعناصر (كالازرار، والعناصر التفاعلية) صممت مسبقاً.

مرحلة التخطيط بإستخدام الwireframe تجبرك على إستخدام أدوات وعناصر محددة، تجعلك دائماً “تفكر داخل الصندوق”، معظم البرامج والأدوات التي تستخدمها لعمل الWireframe يوجد بها عناصر مصممة مسبقاً للازرار والسلايدر وحقول الادخال، هذه العناصر ستستخدمها في كل مرة تقوم بالتخطيط لمشروع جديد، البعض قد يقول أن في هذه المرحلة أنت لست مطالباً بإبتكار أشكال جديدة للأزرار، أنها ستكون في مرحلة لاحقة، لكن أليست هذه مرحلة التخطيط والتفكير؟! هذه البرامج ستحدد رؤيتك للمكونات المختلفة لعناصر الواجهة … فهي ببساطة لن تجعلك “تبتكر عناصر تفاعلية جديدة!

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

التخطيط بإستخدام ال Wireframing قد لا يناسب كل الواجهات

كيف خطط مصمم واجهة موقع Squarespace الWireframe الخاص بواجهة الموقع، فرئيسية الموقع على سبيل المثال تحتل صورة الخلفية فيها 95% من مساحة الصفحة، هل وضع صندوق رصاصي كبير بالخلفية وكتب عليه “صورة” ثم وضع بضعة صناديق تمثل الأزرار بالهيدر؟! هل هكذا يجب أن نخطط للواجهات “الابتكارية”، الـ Wireframing قد لا نستطيع إستخدامه في تطبيق وتصميم واجهات بأفكار ثورية.

SquareSpace-Frame
ربما تكون Wireframe لا تظهر روح التصميم، ولا الفكرة العامة التى يمكن ان تتحقق بعذ التطبيق
SquareSpace
واجهة موقع SQUARESPACE

الواجهات الابتكارية التي تخلق جيلاً جديداً من العناصر الجرافيكية التفاعلية

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

فكرة هذا التطبيق ثورية وبسيطة جداً، كيف يمكن لنا أن نرسم الخبرة “الابتكارية” الخاصة بهذا التطبيق باستخدام ادوات التأطير والتخطيط Wireframe العادية؟ لو استخدمنا الازرار والعناصر التي تتيحها لنا برامج التخطيط في العادة ربما ستخرج بنتيجة مشابهة للصورة التالي …

اعادة تخطيط واجهة تطبيق Kenzy بإسخدام ادوات التخطيط  wireframing العادية
اعادة تخطيط واجهة تطبيق Keezy بإسخدام أدوات التخطيط  wireframing العادية

لكن في الحقيقة واجهة تطبيق Keezy عبارة عن ٨ مستطيلات بألوان مختلفة رائعة وبسيطة، انها واجهة ابتكارية بإمتياز، فواجهة البرنامج تشجعك علي اكتشاف هذا التطبيق البسيط !

تواجهة تطبيق Keezy
تواجهة تطبيق Keezy

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

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

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

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

عن كاتب المقال

أحمد مجدي
متخصص بتجربة الاستخدام، مصمم واجهات الإستخدام للويب والموبايل منذ 2008، امتلك خبرة معرفية وعملية عن التصميم الجرافيكي لواجهات الاستخدام والتفكير البصري، عملت مع أصحاب الأعمال التجارية في الشركات الكبيرة، المتوسطة، الصغيرة والأفراد لبناء جسـور بيـن احتياجات المستخدمين وأهدافهم التجارية. تابعني على تويتر: @ahmedmagdi


كل مقالات الكاتب

اترك تعليقك على المقال 10 تعليقات

  • أيمن

    هل يمكنك مشاركتنا أفضل تطبيقات Wireframe التي من الممكن أستخدامها في وجهة نظرك ؟؟

    • Emad Echtay

      من وجهة نظري أستعمل Balsamiq Mockups
      اسلوب بسيط وتفاعلي

    • Hesham Tayea

      اعتقد انك محتاج تقرأ المقال تاني -_-

  • محمد عيساني

    good ideas

  • Ahmed Babekr

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

  • مصطفى وهبه

    رائع يا احمد بارك الله فيك 🙂

  • هل البرنامج وطريقه عمله تناسب المبتدئين .. ام هى اداه موجه الى محترفى التصميم

  • mohamedalshabib

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

    • mohamedalshabib

      تصحيح، نتلقى العلم وليس العالم..
      ارجو ان تضع ايقونة لتعديل ما يكتبه الزوار من تعليقات 🙂
      شكرا لك على مجهودك

  • مقالاتكم لا توصف ..ِشكرا ع المجهود الرائع