البحث في الموقع

يمكن أن تكون البيانات جذّابة، وإذا اضطررت إلى التعامل مع الرسومات البيانية والإحصائيات في عملك في تصميم الويب، فأنت تعلم أن تمثيل البيانات مرئيًا هو أفضل بكثير من الاقتصار على الاستدلال ببعض الأرقام فقط. سواء أردت كتابة تدوينة، أو أردت إنشاء مخططّ لمشروع خاص بعميل، أو مجرد ترتيب بياناتك الشخصية، توفّر الأدوات المجانية لعرض البيانات رسوميًا ما تحتاجه لتشكيل المخططات، والرسوم البيانية، والمخططات المعلوماتية البيانية (infographics) والتي تكون جميلة المنظر وسهلة الفهم معًا. Chartist "مخططات متجاوبة بسيطة"، لا أكثر ولا أقل. نزّل هذا البُريمج وأنشئ مخططات دائرية متجهة (vector pie charts)، ورسوم بيانية خطية (line graphs)، وغيرها من المخطّطات التي ستتسع لحجم أي شاشة. يمكنك كذلك إضافة حركات(animations)! هذه المخطّطات متوافقة مع معظم متصفحات الويب، لذلك لا يوجد سبب يمنعك من استخدامها. ومع ذلك ستحتاج لتعلّم القليل من JavaScript و CSS. يمكنك تعلّم هذه اللغات من خلال موسوعة حسوب والتي تحتوي على توثيقٍ شاملٍ ل CSS و JavaScript وغيرها. أو يمكنك الالتحاق بدورات أكاديمية حسوب الاحترافية كدورة تطوير واجهات المستخدم ودورة تطوير التطبيقات باستخدام لغة JavaScript. RAWGraphs إذا كنت تبحث عن التنوّع، فلدى RAWGraphs كل ما تحتاج له من خيارات بين يديك. ما عليك سوى لصق بيانات جدول البيانات (spreadsheet) أو رفع ملف، وستكون قادرًا على تحويل الأرقام إلى أي نوع من المخططات، من نوع المخطّطات العمودية (bar graph) إلى نوع المخطّطات التي تقيس مدى التغيّرات خلال الوقت وهو ما يسمّى مخطّط النتوء (bump chart)! يمكنك أيضًا إضافة نوع المخطط الذي تريد إذا كنت تجيد JavaScript. عند الانتهاء من التخصيص، يمكنك تنزيل المخططات التي أنشأتها بصيغة SVG أو PNG أو JSON. أو قم بمجرد تضمين المتجّه (vector) في موقعك ببساطة. هذا البرنامج المتقدّم ليس أسهلها استخدامًا، ولكن لديه الكثير من الإمكانيات. Datawrapper إذا أردت تضمين جدول بيانات (spreadsheet) في مقال، فسوف تُسهّلُ Datawrapper تحويله إلى رسم بياني جميل. هذا ليس صعبًا على الإطلاق، وكما أن الرسوم البيانية قابلة للتخصيص بالكامل وصولًا إلى محاذاة النص (text alignment) وتخصيص اللون عند الانتهاء (يوجد كذلك مرشّحات للمصابين بعمى الألوان!)، تحتاج فقط إلى التسجيل وستحصل على شيفرة التضمين (embed code) للمخطّط. Tableau أتحتاج شيئًا احترافيًا؟ تعدُّ Tableau Public أداة قابلة للتّنزيل تتيح لك تمثيل البيانات مرئيا (visualize data) بعدة طرق. تُعدّ هذه الأداة مناسبة لأي نوع من الرسوم البيانية من المخطّطات الصغيرة (small charts) إلى المخططات المعلوماتية البيانية المخصّصة (dedicated infographic)، يُعدّ هذا التطبيق اختيارًا عظيمًا لمصممي الويب. ChartBlocks "أسهل باني مخطّطات في العالم" هو كما يقول عن نفسه تمامًا. أدرِج بعض البيانات لجدول البيانات (spreadsheet)، وعدِّل بعض الأشياء البسيطة، واختر قالبًا، وبهذا حصلتَ على مخطّط في أقلّ من دقيقة. يمكنك تعديل المظهر أكثر إن أردت ذلك، أو يمكنك تنزيله ببساطة، أو تضمينه، أو مشاركته على مواقع التواصل الاجتماعي! Beam أكلّ هذه البرامج معقّدة أكثر من اللازم؟ أتريد تحويل حفنةٍ من البيانات إلى رسم بياني بسيط دون استيراد مجموعة من الملفات؟ عدّل بعض الأسماء ونقاط البيانات فقط (data points)، واختر واحدًا من بين أربعة أنواع من المخطّطات البسيطة، واختر ملفات تخصيص اللون (color profile). بهذه السهولة سيكون مخطّطك جاهزًا! Visualize Free يعدّ برنامج السحب والإفلات هذا صاحب طريقة رائعة لإنشاء مخططات معلوماتية بيانية (infographics) جميلة تتضمن الكثير من البيانات. ستحتاج إلى التسجيل لاستخدام هذا التطبيق، ولكن هناك العديد من الأمثلة في الصفحة الرئيسية التي يمكنك تخصيصها بحريّة حتى تعتاد على لوحة التحكم. OpenHeatMap هذا التطبيق مذهل ببساطة لأنه سهل الاستخدام! ارفع جدول بيانات (spreadsheet) أو ملف إكسل (Excel) لتحصل على خريطة حرارية (heatmap) مع الشيفرة المضمنّة. العملية أنيقة وانسيابية تمامًا. Timeline إعداد هذا الموقع أصعب نوعًا ما، إذ أنّك تحتاج إلى اتّباع الخطوات حرفيًا وإنشاء جدول بيانات (spreadsheet) جديد. ولكن إذا كنت بحاجة إلى جدول زمنيّ تفاعليّ قابلٍ للتضمين لمشروعك فهذا هو التطبيق المنشود. بيانات جميلة يُعدّ التفريق بين النصوص بصورٍ جذابة طريقةً رائعةً لمنع ظهور صفحة الويب ظهورا جافًّا. ستتمكن من إنشاء رسوم بيانية ومخططات مثيرة للاهتمام باستخدام هذه الأدوات التي ستشدّ انتباه كلّ من يراها، وفي دقائق. لا مزيد من إهدار الساعات في محاولة إنشاء الرسوم البيانية بنفسك! ترجمة -وبتصرف- للمقال ‎9 Free Data Visualization Tools لصاحبته Brenda Stokes Barron

إن السعي إلى إنشاء برامج خالية من الأخطاء في العالم الرقمي هو أمر جدير بالاهتمام. ولكن في حال وجدت هذه الأخطاء، فليس من الضروري أن تتسبب في مشكلة، إذ يمكن أن نقابل نتائج غير مرضية أو أقل من المتوقع للموقع أو التطبيق. بمعنى آخر، لا تكمن المشكلة غالبًا في الشيفرة بل في تصميم واجهة المستخدم (UI) أو تجربة المستخدم (UX) أو كليهما. يمكن للأدوات والموارد المطروحة هنا أن توفر لك الوقت والمال وتساعدك في تجنب مشكلات ناتجة عن قابلية الاستخدام (usability issues) عند استخدام المواقع والتطبيقات الخاصة بك. تعدُّ هذه الأدوات الأفضل في مجالها، إذ اخترناها بعناية من بين العديد من الخيارات المتوافرة. هل أنت جاهز؟ لنبدأ رحلة التعرف عليها. 1. Mason من الأمور البديهية في عالم تصميم وتطوير البرمجيات هو أن الحاجة إلى إجراء تغيير بسيط في منتج سبق نشره سيسبب في حدوث إشكاليات كبيرة في التخطيط والتنفيذ عدا عن النفقات غير المتوقعة وغير المخطط لها. لذلك، من الضروري أن تحمل الفرق على عاتقها مسؤولية تصميم التغيير، والذي يتم غالبًا من خلال استخدام أسلوب النموذج الأولي (prototyping approach) واختباره وبرمجته ثم الانتظار لحين دورة النشر القادمة لتثبيته واعتماده. وأثناء ذلك، لن يتمكن العميل أو المستخدم النهائي من فعل شيء سوى أن يتنتظر. لكن مع Mason، الأمر مختلف؛ فهو يقدم منصة مرئية مدعمَّة بأدوات بناء الواجهة الأمامية مما يوفر للفِرق بيئة عمل مشتركة وسريعة لإضافة الميزات للتطبيقات أو المنتجات الرقمية الأخرى المطلقة (أو المنشورة)، حيث يمكن بسهولة بناء تلك الميزات دون الحاجة إلى النماذج الأولية، أو الإطارات الشبكية، أو فحص ضمان الجودة (QA inspection). كذلك لا حاجة إلى البرمجة أيضًا نظرًا لأنَّ Mason ينشئ قاعدة بيانات خاصة به لإضافتها إلى قاعدة بيانات موجودة مسبقًا، مما يتيح للمطورين العمل في مشاريع برمجية أكبر وأكثر تعقيدًا. إن التطور السريع والقدرة الفائقة لـ Mason جعلت العملاء يشعرون بمزيد من الرضا والسعادة. يتم تشغيل Mason عند الحاجة دون أن يؤثر تشغيله على سرعة موقعك، وستظل الميزات التي تنشئها دائمًا موثوقة وقوية وقابلة للتوسيع والتطوير. 2. UXPin يوجد نماذج أولية مخصصة بالأساس لأغراض معينة ويوجد ونماذج أخرى تفاعلية، وواقعية، وقوية تثير لديك السؤال التالي: لماذا لا يمكن تجاهل مرحلة التطوير برمتها؟ تلك هي درجة الواقعية التي يمكن للمستخدم توقعها من الأداة UXPin. وذلك بفضل أنها أدة تصميم تعتمد على الشيفرة. تعرض UXPin حلولًا قريبة من رغبة المستخدم، فربط اللوحات الفنية الثابتة معًا لم يعد متواجدًا في وقتنا الحالي. هذه الأداة هي بمثابة الحلم الذي تحقق للمصمم. لماذا؟ لأنها تسهل عليه التصميم، وإنتاج النموذج الأولي، والتعاون مع مصممين آخرين في مكان واحد وآنيًّا. إبدأ بفكرة إثبات مفهوم الإطارات الشبكية، ثم تدرج في العمل نحو النماذج منخفضة الدقة إلى النماذج عالية الدقة. أنجز كل شيء آنيًّا دون الحاجة إلى ترك ومغادرة UXPin. تعد أداة تصميم واجهة وتجربة المستخدم UX/UI المعتمدة على السحابة أداةً ثابتةً ومفضلة لدى شركات 500 Fortune كشركة PayPal و Microsoft وذلك بفضل امكانياتها الهائلة في تصميم النماذج الأولية. فهي تتضمن العديد من الخصائص مثل: حالات التفاعل، والشرط المنطقي، والمتغيرات، ومكونات الشيفرة، وتعابير JavaScript وغيرها. ناهيك عن الطريقة التي تعزز وتبسط بها تعاون الفريق. 3. Interfacer متى كانت آخر مرة اضطررت فيها إلى إجراء بحث موسع للعثور بسهولة على أنسب خط، أو أيقونة، أو صورة، أو مجموعة أدوات واجهة المستخدم UI؟ سواء كان ذلك بالأمس القريب أو قبل عام، فمن المحتمل أنك تتذكره وتتذكر كم كان ذلك مضيعة للوقت! إن Interfacer هي عبارة عن مجموعة من المكتبات المصغرة المليئة بأدوات تصميم عالية الجودة من جميع الأنواع. كل ما يتم تقديمه ليس مجانيًا فحسب، ولكنه مجاني للاستخدام في المنتجات التجارية أيضًا. 4. Webflow من الأهمية بمكان أن تبحث عن منتج يتيح لك تصميم وتطبيق وإنشاء وإطلاق واستضافة موقع سريع الاستجابة من خلال منصة واحدة؛ وهذا تماما ما تقوم به الأداة Webflow. يمكنك من خلال تلك الأداة متعددة الامكانيات القيام بجميع ما سبق ذكره، بما في ذلك إنشاء نظام إدارة محتوى CMS سهل الاستخدام لكل موقع تقوم بإنشائه، دون الحاجة إلى برمجته. يمكنك كذلك بدء المشروع من واجهة فارغة أو باستخدام أحد القوالب المتوافرة أو مجموعة أدوات واجهة المستخدم UI المقدمة من قبل المجتمع. لماذا من المهم أن تختار واحدة أو أكثر من بين تلك الأدوات أو الموارد؟ التصميم الجيد لتجربة المستخدم UX يزيد من نسبة العثور على الموقع واستعماله وتفوقه على منافسيه. ربما صادفت أكثر من مرة وأنت تتصفح الويب بحثًا عن خدمة أو منتج معين ظهور عدة مواقع أخرى تخدم نفس الغرض في وجهك مباشرة؛ إذن، ما السبب في ظهور تلك المواقع؟ السبب هو تجربة المستخدم UX المتميزة التي تسهل استخدامك للموقع وكذلك تساعدك على العثور على ما تريده بسرعة ودون عناء. بعد أن تنجز ما أردته، يمكنك وضع إشارة مرجعية على الموقع لتتمكن من استخدامه في المستقبل. أليس من الرائع أن تكون مالكاً لذلك الموقع؟ التركيز على تصميم تجربة المستخدم UX يمكن أن يزيد من إخلاص العملاء للعلامة التجارية. إن التصميم الفريد والفعال لتجربة المستخدم UX يأخذك في رحلة فريدة وممتعة، إذ أنه يزيد من ثقة وإخلاص العملاء والمستخدمين لعلامتك التجارية أو لمنتجك أو الخدمة التي تقدمها. تعد تجربة المستخدم UX يستخدمها المصمم ليسهِّل على المستخدم عثوره على ما يريد أو إيصاله للمكان الذي يطلبه دون عناء بالإضافة إلى توفير أجواء ممتعة له خلال التصفح. صمم تجربة مستخدم UX تذهل العقول وتجعل كل من استعمل الموقع أو التطبيق يتحدث عنها. كيف يمكنك تحقيق ذلك؟ ببساطة من خلال تصميم تجربة المستخدم UX بشكل يسهل على المستخدمين التصفح بمرونة. فتزيد لديهم الرغبة بمشاركة خبراتهم مع الآخرين. والنتيجة؟ ستكون سلسة عملاء متنقلين يمدحون بك ويسهون في إذاعه صيتك، وهؤلاء العملاء من يقاتل الجميع حتى الموت لكسبهم. خاتمة ما الذي تحاول تحقيقه؟ توفير الوقت والمال وضمان توفير التحسيان دون الحاجة إلى النماذج الأولية؟ توفير الوقت والمال على المدى الطويل باستخدام أسلوب النماذج الأولية التكرارية أو السريعة؟ استخدام منصة واحدة فقط لإنجاز جميع الأعمال؟ البحث عن مصدر واحد يجمع أدوات تصميم مساعدة عالية الجودة (مثل الخطوط والصور والأيقونات ...إلخ.) تبقى متاحة عند الحاجة إليها؟ الأدوات والخيارات التي ذكرناها آنفًا توفر وتتيح لك ذلك بالإضافة إلى تحسين تصميم واجهة وتجربة المستخدم UI/UX. يمكنك اختيار واحدة منها، أو جميعها، ومن المؤكد أنك ستصل إلى نتائج جيدة باستعمالها. ترجمة -وبتصرف- للمقال Need help choosing a UX/UI tool? Check out these options