المصممين مقابل المطورين - Accurat @ تصور ميلان

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

عند بدء تشغيل Accurat ، صممنا بشكل رئيسي مشاريع مثل تصورات البيانات الثابتة للطباعة. نحن على يقين من أن الكثير منكم على دراية بالرسوم البيانية التي قمنا بإصدارها من أجل La Lettura ، وهو الملحق الثقافي الأحد لـ Corriere della Sera.

→ Accurat لـ La Lettura ، واختيار مرئي البيانات ، ألبوم على Flickr

نظرًا لأننا نشرنا Accurat أكثر من 30 قطعة من عام 2012 إلى عام 2014 ، وكما ترون هنا ، فهي ليست مرئيات بيانات قياسية للغاية ، حيث في كل مرة أنشأنا عن قصد نموذجًا مرئيًا مخصصًا بنسبة 100٪ لتمثيل مجموعة من مجموعات البيانات الرئيسية التي تداخلنا معها .

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

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

كانت محطة العمل المتوسطة لأحد أعضاء فريق Accurat ، خلال تلك السنوات ، تتألف فقط من كمبيوتر محمول به رسام.

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

ولكن حتى في العمل مع المرئيات التفاعلية والواجهات التفاعلية ، نتخيل في كل مرة مرئيات مخصصة للغاية وخبرات تفاعلية استنادًا إلى البيانات والجماهير المحددة التي نعمل معها.

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

بالطبع ، بمجرد أن بدأت Accurat في الترحيب بالمطورين ، ودمجهم مع طاقم التصميم الذي شكلناه خلال السنوات الماضية ، بدأت المشاكل في الظهور. إن الاضطرار إلى العمل مع المزيد من الأشخاص ، مع خلفية مختلفة وطريقة عمل ليست بالأمر البسيط. في أكثر الأحيان ، لدينا مواعيد نهائية ضيقة تحتاج إلى تسارع وتيرة بين التصميم والتطوير ، ولجعل كل شيء يعمل بالطريقة الصحيحة دون مشاكل ، يحتاج الفريق إلى اتصال قوي بين الأعضاء.
عادةً ما يريد المطورون (وكذلك عن حق) مواصفات بكسل مثالية من المصممين ، الذين يقدمون في بعض الأحيان ملفات ... بعيدة كل البعد عن ذلك.
ولكن يحتاج المصممون أيضًا في العادة إلى معرفة ما إذا كان التصميم الذي يعملون عليه بالفعل منطقيًا من خلال نموذج أولي ، ولا يهتمون عادةً بإصدار العقدة الذي تستخدمه ، إذا كنت تستخدم Grunt أو Gulp أو Webpack أو Yeoman ؛ إذا كان إصدار ECMAScript هو 7 أو 6 أو Mambo Number 5 ...
والنتيجة النهائية هي ما يهم بعد كل شيء.

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

ولكن ، جنبا إلى جنب مع المشاكل التي حققناها أيضا نتائج أكبر.

→ العالم POTUS هو واحد منهم.
بالنسبة لأولئك الذين ليسوا على دراية به ، إنه مشروع أصدرناه قبل انتخابات الولايات المتحدة عام 2016. وقد تعاوننا مع Google News Lab لإنشاء تطبيق على شبكة الإنترنت يقوم بتصور البيانات الواردة من Google Trends لإظهار اهتمام الناس بالانتخابات رئيس الولايات المتحدة.

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

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

بدلاً من عرض النتائج النهائية والتعليق على العملية ، سنوجهك خلال هذه العملية.

الجزء الأول: الرسم والعبث

على بناء ونتائج غير متوقعة

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

مفهومنا الأول

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

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

مفهوم الخريطة للتمرير

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

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

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

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

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

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

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

لقد بدأنا في استخدام هذا الشكل لإعطاء لمحة أولى عن الفرق في نقاط Google Trends بين الولايات المتحدة والدولة المحددة.

تم استخدام Blobs أيضًا في قسم التفاصيل لكل بلد ، وأعتقد أنه يجب أن يبدو مألوفًا إلى حد ما الآن إذا كنت قد شاهدت المنتج النهائي ، خاصة على خلفية زرقاء!
للتأكيد على طبيعة gooey للتصور الذي اخترناه ، كان عنوان العمل لهذا Goo-gle.

تم استقبال النقاط بشكل جيد ، حيث إنها عبارة عن تصوير ناعم وغامض للبيانات ، على الرغم من فكرة أن تصور البيانات يجب أن يكون دائمًا صارمًا ودقيقًا للغاية. تتناسب تمامًا في وصف بيانات اتجاهات Google ، حيث يتم قياس كل مخطط على 100 درجة على حدة ، على سبيل المثال البلد الذي يبحث في كيان واحد على الأكثر لديه دائمًا درجة 100 ، حتى إذا كان العدد الفعلي للاستعلامات هو 2 ، 150 أو 30'000'000.
والأهم من ذلك كله ، أن بيانات Google Trends لا تمدنا إلا بمجموعة من الأشياء التي قد تهتم بها البلاد ، لكنها ليست تصويرًا مثاليًا لواقع هذا البلد ، حيث لا يستخدم الجميع الإنترنت أو يستخدمون بحث Google لجمع المعلومات. عن مصالحهم.
مع Google Trends ، نحصل على لمحة عما يهتم به جزء من سكان أي بلد ، لا يمكننا الحصول على الصورة كاملة. وهذا جيد.

عندما تواجه أنواعًا من البيانات غير المثالية أو القائمة على القيم المطلقة ، من الأفضل غالبًا احتضان تمثيل مرئي هادف لعدم اليقين.

لذلك قررنا إلغاء الخارطة وبدلاً من ذلك ، نذهب بلا هوادة.

الجزء الثاني: تطوير وتصميم

على تطوير وتصميم لما هو غير متوقع

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

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

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

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

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

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

بينما قام فريق التطوير بتحسين الفقاعات ، فقد عملنا مع الصحفيين في Google News Lab لتحديد المواضيع النهائية والاقتباسات ذات الصلة.

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

ولكن ، كما تعلمون جميعًا ، فإن قانون مورفي ليس متعاطفًا جدًا ، لذلك ...
إذا كان كل شيء يبدو على ما يرام ،
من الواضح أنك أغفلت شيئًا ما.
في الواقع…

ترامب ، معتقدًا أن غوغل تفضل هيلاري كلينتون في عمليات البحث على شبكة الإنترنت ، وتتهمهم بالتآمر ، وتهدد بمقاضاتهم.

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

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

الجزء الثالث: المنتج النهائي ، وأخيرا!

على الضربات الشديدة ، الصنابير والتلوى

تقوم الضربات الجانبية بتغيير نوع العرض ، ويعرف أيضًا باسم طريقة ترتيب النقط على الشاشة.

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

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

الجزء الرابع: ماذا تعلمنا؟

لماذا نعتقد أن التعاون هو

أهم شيء أدركناه هو أن التعاون بين التصميم والترميز كان هو المفتاح لنجاح هذا المشروع ، وكان في الواقع أكثر من مجرد تعاون.

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

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

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

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