فواصل https://www.fwasl.com/ اثراء المحتوى التقنى العربى Wed, 17 Sep 2025 11:12:42 +0000 ar hourly 1 https://wordpress.org/?v=7.0 https://www.fwasl.com/wp-content/uploads/2025/09/cropped-icon-32x32.png فواصل https://www.fwasl.com/ 32 32 مباديء التصميم في أيكيا ومدى تأثيرها. https://www.fwasl.com/%d9%85%d8%a8%d8%a7%d8%af%d9%8a%d8%a1-%d8%a7%d9%84%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d9%81%d9%8a-%d8%a3%d9%8a%d9%83%d9%8a%d8%a7-%d9%88%d9%85%d8%af%d9%89-%d8%aa%d8%a3%d8%ab%d9%8a%d8%b1%d9%87%d8%a7/ https://www.fwasl.com/%d9%85%d8%a8%d8%a7%d8%af%d9%8a%d8%a1-%d8%a7%d9%84%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d9%81%d9%8a-%d8%a3%d9%8a%d9%83%d9%8a%d8%a7-%d9%88%d9%85%d8%af%d9%89-%d8%aa%d8%a3%d8%ab%d9%8a%d8%b1%d9%87%d8%a7/#respond Wed, 20 Sep 2017 22:25:15 +0000 https://www.fwasl.com/?p=8628

ظهرت المقالة مباديء التصميم في أيكيا ومدى تأثيرها. أولاً على فواصل.

]]> <![CDATA[يعتمد تأثير IKEA  على التحيز المعرفي  التي تصنعه لدى عملائها، والذي يؤثر بشكل كبير على القيمة الملموسة للمنتجات. فغالبا ما يأتي الناس إلى الأماكن التي تبيع المنتجات ذات القيمة العالية والتي عادة يشاركون في صنعها ولو بشكل جزئي . Hence أو ( من هنا) هذا هو اسم التأثير الذي تصنعه أيكيا وهو مستمد من تاجر تجزئة سويدي شهير ، والتي يتم تجميع المنتج لديه من خلال العميل نفسه ليشعر وكأنها قطعته الخاصة التي صنعها بيديه. وتعد منتجات  IKEA  و  LEGO خير مثال للشركات التي تخلق هذا التأثير النفسي لدى الزبائن لأن مصممي IKEA  يفكرون بصنع هذا التأثير نفسه أثناء تصميم الحلول واستخدامها في الوقت المناسب.

مقتطفات عن التأثير الذي تصنعه IKEA.

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

على سبيل المثال: المشاركين في دراسة حول فن origami cranes الذين قاموا بصنع رافعات origami بأنفسهم فإن مشاركتهم ترتفع 5 مرات عن هؤلاء المشتركين الذين قاموا بشرائها ولم يكلفوا أنفسهم عناء بنائها. وعلينا الإشارة إلى نقطة هامة وهى أن تأثير أيكيا لا يتمحور حول كبر أو صغر الجهد المبذول ولكن في الشعور بالمتعة والإنجاز الذي يشعر به المستخدم عند إنهائه مهمة تجميع المنتج وتركبيه ، لأن بقاء المنتج مفكك بعد هذا المجهود سيفقد الشركة تأثيرها التي تسعى لتعزيزه.   مثال : في الفترة ما بين 1920 و 1940 أراد مصنعي الأغذية تقليل الوقت والمجهود المستهلك في صنع الكيك ، فقاموا بتبسيط عملية التصنيع بشكل كبير حيث لم يعد يتطلب صنع قالب من الكيك سوى إضافة مقدار من الماء على عبوة من بودرة الكيك التي تم تصنيعها في مصانعهم. ولكن لسوء الحظ توقف بيعها خلال فترة وجيزة ، مما دفع عالم النفس Ernest_Dichter إلى البحث وراء الأسباب فوجد أن السبب الرئيسي هو سهولة إعداد الكيك بهذه الطريقة بشكل مبالغ فيه وقلة الجهد المبذول في صنعها ، في حين أن جمهور المستخدمين يشعر بالانجاز والنجاح عند بذل جهد في صنعها ليشعروا بالرضا تجاه انفسهم. فكان الحل المناسب هو إعادة تصنيع عبوات الكيك بشكل مختلف، فأصبحت تحتاج إضافة خليط من البيض واللبن لإعدادها مما زاد من الجهد المبذول بعض الشيء وبالفعل ارتفعت المبيعات من جديد. لأن في هذه الحال يحتاج الجمهور  effort إلى زيادة الجهد المبذول لإعداد المنتج وليس فقط للنتيجة النهائية وهذا ينطبق على المقولة The journey is as important as the destination! أي أن أهمية الرحلة تعادل أهمية الوجهة المقصودة. فليس من الضرورة بمكان أن السهولة الشديدة تعطي انطباع جيد لدي المستخدم، فأحياناً يحتاج للشعور بأن هذا الشيء من صنع يديه أكثر من احتياجه للنتيجة النهائية.

مدى تأثير IKEA على تصميمك.

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

الأفكار النهائية.

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

مترجم بتصرف عن : Design principle: IKEA effect – uxdesign.cc للكاتب Anton Nikolov   &>

ظهرت المقالة مباديء التصميم في أيكيا ومدى تأثيرها. أولاً على فواصل.

]]> https://www.fwasl.com/%d9%85%d8%a8%d8%a7%d8%af%d9%8a%d8%a1-%d8%a7%d9%84%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d9%81%d9%8a-%d8%a3%d9%8a%d9%83%d9%8a%d8%a7-%d9%88%d9%85%d8%af%d9%89-%d8%aa%d8%a3%d8%ab%d9%8a%d8%b1%d9%87%d8%a7/feed/ 0 العلاقة بين طبيعة الأعمال التجارية وأشكال المواقع الإلكترونية https://www.fwasl.com/%d8%a7%d9%84%d8%b9%d9%84%d8%a7%d9%82%d8%a9-%d8%a8%d9%8a%d9%86-%d8%b7%d8%a8%d9%8a%d8%b9%d8%a9-%d8%a7%d9%84%d8%a3%d8%b9%d9%85%d8%a7%d9%84-%d8%a7%d9%84%d8%aa%d8%ac%d8%a7%d8%b1%d9%8a%d8%a9-%d9%88%d8%a3/ https://www.fwasl.com/%d8%a7%d9%84%d8%b9%d9%84%d8%a7%d9%82%d8%a9-%d8%a8%d9%8a%d9%86-%d8%b7%d8%a8%d9%8a%d8%b9%d8%a9-%d8%a7%d9%84%d8%a3%d8%b9%d9%85%d8%a7%d9%84-%d8%a7%d9%84%d8%aa%d8%ac%d8%a7%d8%b1%d9%8a%d8%a9-%d9%88%d8%a3/#respond Tue, 12 Sep 2017 17:45:29 +0000 https://www.fwasl.com/?p=8623

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

]]> المتاجر الإلكترونية أصبحت وبلا شك هي لغة المستقبل ، والتي اتجهت لها معظم الشركات والأفراد من أصحاب الأعمال التجارية. إلا أن هناك بعض الأعمال التجارية المحلية التي تمتلك متاجر على أرض الواقع لا يليق بها بيع منتجاتها عن طريق المواقع الالكترونية فقط ، خاصة تلك التي تعمل في منتجات غالية الثمن . فهى تكتسب ثقة العميل غالباً من التعامل المباشر وليس من خلف شاشة الحاسوب . لذلك كانت هذه الأنواع من الأعمال التجارية بحاجة إلى شكل مختلف من المواقع الإلكترونية التي تتسم بالبساطة وتقدم للعملاء المعلومات التي يحتاجون إليها بأبسط الطرق وبشكل مباشر. فكانت المواقع ذو الصفحة الواحدة هى الحل الأمثل لهذه الأعمال التي تمتلك فروعا على أرض الواقع يذهب إليها العميل ليشترى المنتج بنفسه. Related image ما هي أهمية المواقع ذو الصفحة الواحدة؟ يخبر الناس أنك تتواجد في السوق بشكل حقيقي كما يمكنك عرض صور منتجاتك بشكل بسيط ومباشر. ما هى أهم المشكلات التي تواجهك عند تصميم one page website؟ كيفية عرض كل منتجاتك ، نشاطاتك وما تفعله في متجرك على صفحة واحدة !! ، هذا أول ما تفكر فيه عند تصميم هذا النوع من المواقع الإلكترونية. فتجد نفسك تنشر قصتك الكاملة دون أن تشعر، كي تنشئ موقعًا مثاليًا من وجهة نظرك أنت. لكن حقيقة  أنك ﻻ تحتاج لهذا، بل  أن يكون موقعك جيدًا كفاية لجذب الفئة المستهدفة من العملاء فقط.  
 نقاط أساسية لإنشاء موقع مناسب.
  • أخبر الناس بما يحتاجونه فقط.
 الناس ليسوا بحاجة لمعرفة قصتك كلها، فهم أتوا إلىك  بسبب مراجعة قرؤوها لموقعك أو منتجك، أو أن صديقًا رشّحك لهم، أو صورة ما دلّتهم عليك، وقرروا الشراء من متجرك فما عليك إلا أ تخبرهم بثلاثة  أمور هى: 1. ضع عنوان متجرك! لا تنسى وضع عنوان محلك التجاري بشكل واضح  في بداية الموقع، ومن الأفضل إضافة موقعك على  google maps كي يستطيع الناس الوصول إليك بسهولة أكثر. على سبيل المثال: أنا شخص طبيعة عملى تفرض علي التواجد باستمرار خارج المنزل،وغالبا ما أضطر للأكل في المطاعم ، وأستخدم الانترنت للوصول لأقرب مطعم أو مقهي . فأجد أكثر من  90% من تلك المواقع  تجبرني على الإطلاع على كل مايخصهم من أطعمة و الطهاة المهرة في مطاعمهم، مع كل ذلك ينسون إخباري بمكانهم أو موقعهم الجغرافي . فما الفائدة من كل هذا إن كنت لا أعرف مكان مطعمك؟!   2-مواعيد العمل الخاصة بمتجرك عليك وضع  مواعيد العمل الأسبوعية بشكل واضح و مفصّل بالأيام وساعات العمل، واحرص على عرضه بشكل واضح ومقروء  لأن الغالبية تستخدم الهواتف للبحث عنك . مثال: الاثنين: مغلق. الثلاثاء: 9:30 – 17:00. الأربعاء: 9:30 – 17:00.   هكذا يبدو الأمر سهلًا إلى الحد الذي يجعلني أتعجب لم يتجاهل الناس  وضع مواعيد عملهم في مقدمة مواقعهم؟! مع أن الأمر سهل للغاية، وإلا كيف آتي كي أدفع لك أموالي إن كنت ﻻ أعرف إن كنت موجودًا في محلك أم ﻻ؟   3. طريقة التواصل . ضع رقم الهاتف والبريد الالكتروني على الأقل في موقعك، لمراسلتك عند الرغبة في معرفة معلومة معينة أو الاستفسار عن أمر ما يخص منتجاتك أو خدماتك التي تقدمها. تجاهل هذه النقطة قد يفقدك الكثير من العملاء، و يمنعهم من دخول متجرك بالكلية، فوسائل التواصل تطمئن العملاء أنك جاهز للمساعدة إن احتاجوها. و الأمر بسيط جدا في تنفيذه ولكنه كارثي إن اهملناه ، لذا دعنا نلقي نظرة الآن على ما يمكن أن يحدث إن لم تفعل ذلك. افعل ولا تفعل . إياك واستخدام هذا الشكل من التصميم. 01_coffe_website-compressor.gif يُعد هذا الموقع مثالا سيئأ للمواقع ذو الصفحة الواحدة !، وهو خاص بمقهى في برشلونه ، وبلا مبالغة كم الحيره والتوتر الذي أصابنى حينما دخلته لأعرف مواعيد العمل ومكان المقهى بالتحديد دفعنى للخروج منه مباشرة دون أن أحصل على معلومة مفيدة .   صمم موقعك بشكل جمالي بسيط يوفر ما يحتاجه العميل بالتحديد.   02_cafe_cometa.png مثال بسيط ورائع لموقع الكتروني ذو صفحة واحدة لمقهى يعرض لى ما احتاج من معلومات من مكان المقهى ومواعيد العمل وغيرها…. بشكل مباشر وبسيط .الخلاصة : عند تصميم one page website ، عليك أن تبحث عن كافة الطرق لتيسر على العملاء إيجاد متجرك ومعرفة مواعيد العمل وأيام العطلات بكل سهولة، كى لا تخسر عملاء جدد . وأى محتوى لا يجيب على تلك الأسئلة بالأعلى فهو إضافي لست بحاجة إليه.   المصدر:  marisamoraby.com مترجم بتصرف عن مقال ل :Marisa Morby.    
]]>

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

]]> https://www.fwasl.com/%d8%a7%d9%84%d8%b9%d9%84%d8%a7%d9%82%d8%a9-%d8%a8%d9%8a%d9%86-%d8%b7%d8%a8%d9%8a%d8%b9%d8%a9-%d8%a7%d9%84%d8%a3%d8%b9%d9%85%d8%a7%d9%84-%d8%a7%d9%84%d8%aa%d8%ac%d8%a7%d8%b1%d9%8a%d8%a9-%d9%88%d8%a3/feed/ 0 7 عوامل تهدد أى Startup https://www.fwasl.com/7-%d8%b9%d9%88%d8%a7%d9%85%d9%84-%d8%aa%d9%87%d8%af%d8%af-%d8%a3%d9%89-startup/ https://www.fwasl.com/7-%d8%b9%d9%88%d8%a7%d9%85%d9%84-%d8%aa%d9%87%d8%af%d8%af-%d8%a3%d9%89-startup/#respond Mon, 11 Sep 2017 15:07:13 +0000 https://www.fwasl.com/?p=8619

ظهرت المقالة 7 عوامل تهدد أى Startup أولاً على فواصل.

]]> startup انتشر مؤخراً هذا المصطلح كثيراً، فلا تخلو منه مناقشة خاصة بالأعمال والبيزنس، ولا الملتقيات التسويقية، لذا أعددنا هذا المقال لمعرفة ما هي startup وهل تقتصر على مجالات بعينها ؟ وما هي الأسباب الحقيقة وراء انهيار الكثير منها؟

أولا    Startup   :

وهى تعنى شركة ناشئة (عمل تجاري أنشأ حديثا) وهذا وفقا للتعريف الذي ورد في معجم أكسفورد .

إلا أن الكثير يربط بين ال  startupوالشركات التقنية والتكنولوجية وكأنها أصبحت حكرا عليها، وهذا ليس صحيحا على الإطلاق حيث أن هذا المصطلح يعنى : شركة ناشئة تسعى بشكل كبير إلى التوسع عن طريق تقديم خدمات ومنتجات بشرط أن تكون إبداعية (Creative) ، أو ابتكار(Innovation) في مجال معين  أو إعادة طرح منتج أو خدمة قديمة بشكل ابتكاري جديد أيا كان نشاطها .

ومع الانتشار الكبير لتلك الشركات إلا أن أكثر من 60% منها يفشل خلال الثلاث سنوات الأولى دون أن تحقق الهدف من إنشائها لعدة أسباب منها :

1- الغرور :

وهذا ما أصابني حقيقة بحالة من الذهول حين وجدته المتصدر الأول لأسباب فشل تلك الشركات حيث جاء بنسبة صادمه وهى 85% وهذا وفقاً لما جاء في الدراسة التي أجرتها مؤسسة CB Insights لريادة  الأعمال والاستشارات السوقية ، ولما لا والغرور ما هو إلا سبب كل نائبة وله يد في كل انتكاسة أصابت شخص أو حلّت بكيان ! ، فقد كان منبع للكثير من أسباب فشل تلك الشركات مثل :

  • كونه سببا أساسيا في فشل المؤسس في استقراء السوق ومدى احتياج السوق للمنتج بنسبة تعادل 47%.

وللأسف هذا ما أكده(جيف نوفيتتش) أحد مؤسسي شركة (Patinet Communicator) وهى شركة لتجهيز عيادات الأطباء  حين سؤل من أحد الباحثين فقال غرتني الفكرة ، فحين جاءتني  بدأت بتنفيذها بين ليلة وضحاها دون دراسة السوق دراسة جيدة واعية ومدى احتياج السوق لمنتجنا واليكم رده : (( للأسف، لقد أدركت في النهاية أنه لا يوجد زبائن وأن لا أحد مهتم بمنتجاتنا ، فالأطباء يريدون فقط المزيد من المرضى ولا يهم أن يكون مكتبهم مجهز بشكل أكثر كفاءة)).

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

لطرح منتجه لذا كان ذلك سببا في إخفاق 13%من تلك الأنشطة.

  •  غرور الشخص وإحساسه الزائد بأن لديه من العبقرية ما يفوق الجميع يجعله لا يسمع إلا صوت عقله ولا يلجأ للمشاورة وأخذ رأى المتخصصين لذا كان هذا سببا في انهيار حوالي 8% من تلك الشركات.

 

2- الاعتماد الزائد على جودة المنتج كان سببا أساسيا في اندثار ما يقارب من 47% منها :

فرغم الأهمية القصوى لجودة المنتج أو الخدمة إلا أن المبالغة في الاعتماد عليها يدفع بصاحبها إلى إهمال الخطط التسويقية وعدم الاهتمام بالعملاء واقتراحاتهم مما يتيح للكثير من الشركات الأخرى التغلب على المنتج بمنتج يفوقه وهذا ما توصل إليه مؤسس شركة WESABE وهى شركة لإدارة حسابات الأفراد حينما تغلبت عليه شركة Mint التي استطاعت تقديم نفس الخدمة ولكن بشكل أسهل وأكثر ابتكارا حيث قال : ((مهما فعلتَ من أشياء صحيحة: كأن لا تعتمد على  مورد واحد، وأن تحافظ على خصوصية المستخدم، وأن تحرص على أن للأداة أثراً إيجابياً على الحياة المالية للأشخاص، هي كلها أشياء عظيمة ومبرر كافٍ لتأسيس شركتنا، لكن أياً منها لا يهم إن كان منتجك صعب الاستخدام”.

 

3- استنفاذ التمويل المالي للشركة :

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

4-  فريق العمل الغير مناسب :

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

Image result for bad teamwork

5- عدم القدرة على تحديد قيمة الخدمة أو المنتج المادية:

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

6-  موقع الشركة :

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

7 – الرغبة في الشهرة والانتشار بسرعة:

دون امتلاك منتج قوى ذو قيمه مما يجعل انهيارها سريعا كانتشارها تماماً.

 

الخلاصة :

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

 

ظهرت المقالة 7 عوامل تهدد أى Startup أولاً على فواصل.

]]> https://www.fwasl.com/7-%d8%b9%d9%88%d8%a7%d9%85%d9%84-%d8%aa%d9%87%d8%af%d8%af-%d8%a3%d9%89-startup/feed/ 0 +10 طرق تُحسن من سرعة موقعك على ووردبريس https://www.fwasl.com/wordpressspeedways/ https://www.fwasl.com/wordpressspeedways/#respond Mon, 14 Aug 2017 00:18:24 +0000 https://www.fwasl.com/?p=8290

ظهرت المقالة +10 طرق تُحسن من سرعة موقعك على ووردبريس أولاً على فواصل.

]]> WordPress فإليك 12 طريقة تزيد من سرعة موقعك:  

1- إختيار استضافة جيدة لموقعك Choosing Good Host.

تُعد الإستضافة  Hosting هي الأساس الذي يدير موقعك الإلكتروني علي الويب، لذلك هو المحور الأول الذي يجب معالجته لتحسين سرعة موقعك، سواء كان موقعك يعمل على نظام ووردبريس أو لا. لذلك أنتشرت الشركات التي تقدم خدمة الاستضافة، حتى أصبح هذا المجال سوقاً تنافسية بين هذه الشركات والكل يحاول تقديم أفضل ما لديه لكسب رضى العملاء واكتساب أخرين جُدد. ولمدى أهمية موضوع الاستضافة قامت Charles Costa بطرحه بشكل مفصل من خلال سلسلة من المقالات تجيب فيها على الكثير من التساؤلات حول الاستضافة وتوضيح المسار الصحيح للوصول لأفضل استضافة لموقعك الإلكتروني ويمكنك الرجوع لهذه المقالات: How to Separate the Good WordPress Hosts from the Bad Managed WordPress Hosting: The Pros and Cons Review Signal WordPress Hosting Report Summary  

2- إستخدام خدمة CDN.

الـ CDN يقصد بها Content Distribution Network أو Content Delivery Network وهى عبارة عن شبكة لتوصيل المحتوى مكونة من عدة سيرفرات  Servers قوية وسريعة وموزعة في الإنترنت على مناطق مختلفة من العالم ، تقوم هذه الخدمة بجعل المحتوى على اقرب مكان جغرافي للسيرفر من المستخدم وذلك لتقليل المده التي يستغرقها الموقع في تحميل الصفحات up load pages . و تعمل هذه الخدمة عن طريق حفظ ملفات ثابتة على سيرفراتها مثل صفحات HTML وتنسيقاتCSS وملفات Javascript وتقوم بنقلهم للعميل بأسرع وقت.  

3- التخزين المؤقت Cashing.

الـ Cashing هو التخزين المؤقت لمحتوى الموقع من صفحات pages، صور images  وملفات files و…. وينقسم التخزين المؤقت إلى نوعين أساسين هما: 1- التخزين المؤقت من جانب العميل Client-Side Caching : هذا النوع يتم عن طريق المتصفح browser حيث يقوم بتخزين أجزاء من الصفحات وبعض قواعد البيانات Database عند زيارة العميل لموقعك، وعندما يعاود نفس الشخص زيارة الموقع فإن الموقع يقوم بتحميل الصفحات التي سبق للعميل زيارتها بسرعه كبيرة مما يسرع من تحميل الموقع بالكامل. 2- التخزين المؤقت من جانب الخادم Server-Side Cashing: ينقسم هذا النوع من التخزين إلى 4 فروع وهى :
  • التخزين المؤقت للصفحة.
  • التخزين المؤقت لقاعدة البيانات.
  • التخزين المؤقت للكائن.
  • التخزين المؤقت لكود التشغيل.
ولكن لصعوبة الأمر وتداخلة ظهرت العديد من الإضافات plugins التى تساعدك في عملية التخزين المؤقت وتسهل عليك تنفيذها ومن اشهر هذه الإضافات W3 Total Cache و WP Super Cache.  

4- تقليل حجم ملفات الـ CSS و Javascript .

صغير وتجميع ملفات الأصول Assets في Javascript و CSS وضغطها لأصغرحجم ممكن يحسن سرعة التحميل إلى حد كبير . فمن الممكن تجميع كل ملفات الـ CSS في ملف واحد وكذلك ملفات الـ Javascript . وهناك طريقتين لتصغير حجم الملفات إما يدوياً ولكنه أمر مرهق ولكن ان كنت من مفضلي هذا النوع يمكنك الاستعانة بهذا المقال YUI Compressor ، وهناك طريقة أخرى وهى انجاز هذا الأمر عن طريق بعض الإضافات مثل WP Minify وهذه يجعل الأمر سهلاً للغاية.  

5- ضغط الصور Compressing Image .

يُعد ضغط الصور خياراً جيدا لأن حجم ملفات الصور File image الكبير يتسبب في بطىء الموقع، كما أنها تستهلك مساحة كبيرة من عرض النطاق. ويمكنك استخدام بعض الإضافات المجانية لضغط ملفات Compressing files الصور وتقليل حجمها إلى حد كبير دون أن تفقد جودتها quality مثل WP SmushIt وهذا بلا شك يرفع من سرعة موقعك على ووردبريس.   WordPress Compression

6- ضغط الموقع Compressing site.

دعنا نبسط الأمر، إن ضغط موقعك يشبه تماماً تحويل موقعك لأرشيف  ZIP archive ، فحينما يقوم المستخدم بالضغط على اى صفحة لعرضها ،فإن المتصفحbrowser يفتح الأرشيف مباشرة ويعرض محتوى الصفحة المطلوبة . وهذا الأمر يتم على طريقتين هما:
  • تفعيل الضغط عبر ملف.htaccess:
غالباً ما يقوم الموقع بتفعيل نظام الضغط تلقائيا، ولكن ان لم يكن كذلك يمكنك الدخول لموقع HTML5 Boilerplate واخذ الكود منه ولصقه في ملف الـ htaccess وبذلك يتم تفعيله.
  • تفعيل نظام الضغط عبر الإضافات Plugins :
يمكنك تفعيل نظام الضغط عن طريق تفعيل HTTP compression باستخدام بعض الـ Plugins مثل W3 Total Cache عن طريق الذهاب إلى admin page -> Performance -> Browser Cache -> Enable HTTP (gzip) Compression  

7- تحسين قاعدة البيانات الخاصه بك Optimizing Daeabase.

تعتبر قواعد البيانات بمثابة العقل لموقعك وكذلك هى أداة قوية لحفظ وتقديم وتعديل البيانات، ولكن لكى لا تسبب ثقلاً لموقعك عليك أن تقوم بمراجعتها باستمرار وتقوم بحذف كل البيانات التي تسبب حملاً زائد على قواعد البيانات دون فائدة سواء كانت تعليقات comment غير مرغوب فيها أو تم اعتبرها كـ spam أو العناصر المحذوفة أو عمليات التتبع أو غيرها… ولكن ليتم الأمر بشكل manual عليك أن تتابع باستمرار وتقوم بحذف العناصر الغير مرغوب بها وهذا بالطبع أمر شاق للغاية ومهدر للوقت والمجهود في حين ظهرت بعض الاضافات التي تقوم بهذا الأمر أوتوماتيكياً مثل WP-Optimize أو WP-DB Manager وبذلك تتحسن قاعدة البيانات الخاصة بموقعك مما يزيد سرعته.  

8- اختيار الـ Plugins الصحيحة.

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

9- تعطيل كل الـ Track backs و Ping backs.

في كل مرة يتم الإشارة إلى موقعك mentioned your website من أى موقع أخر أو مدونة يتم تنبيهك عبر إشعار صوتي notification ومع تزايد عدد الإشعارات والتبيهات الصوتية والمعروفه باسم pingback and trackbacks  هيتسبب في تقليل سرعة الموقع ويمكنك غلق هذا الـ Feature من خلال الخطوات الأتية : admin page -> settings -> discussion   Disable Trackbacks and Pingbacks  

10- إختيار Theme و Theme Framework جيد.

يوجد الكثير من الـ Theme أو Theme Framework  الخاصة بالووردبريس منها السريع والمشفر جيدا وكذلك يوجد العكس تماماً. فعند اختيارك للـ Theme الخاص بموقعك على ووردبريس لاحظ جيداً سرعة تحميله من الصفحة التجريبية Demo page لتعرف مدى تأثيره على موقعك هلى سيزيد سرعة الموقع أم العكس!  

11- تحسين بنية الصفحة الرئيسية Database Structure.

حاول بقدر الإمكان تبسيط الصفحة الرئيسية Homepage للموقع عن طريق تقليل الأدوات widget والصفحات المعروضه pages فيها وكذلك عرض بعض المشاركات المختصرة كل هذه الأمور تحسن من سرعة الموقع ، ليس هذا وحسب لكنها أيضا تساعد في تكوين تجربة مستخدم UX ناجحة لأنه قد لا تأتيك الفرصه لتغيير الانطباع الأول للعميل.  

12- تفعيل خاصية HTTP Keep-Alive.

تهدف خاصية HTTP Keep-Alive إلى استخدام بروتوكول اتصال واحد Transmission Control Protocol لاستقبال وارسال طلبات HTTP request متعددة بدلاً من فتح اتصال منفصل لكل طلب على حده،  

الخلاصة:

في هذا المقال عرضنا 12 طريقة فعالة لتحسين سرعة موقعك على ووردبريس مثل الاستضافة، تصغير وضغط الصور والموقع، التخزين المؤقت، اختيار الإطار والإضافات الملائمة للموقع وتحسين قواعد البيانات وبنية الصفحة الرئيسية لموقعك الالكتروني على ووردبريس.   مترجم عن : Ways to Speed up Your WordPress Website                  ]]>

ظهرت المقالة +10 طرق تُحسن من سرعة موقعك على ووردبريس أولاً على فواصل.

]]> https://www.fwasl.com/wordpressspeedways/feed/ 0 حدد عملائك بعشوائية وانتظر النتائج! https://www.fwasl.com/%d8%ad%d8%af%d8%af-%d8%b9%d9%85%d9%84%d8%a7%d8%a6%d9%83-%d8%a8%d8%b9%d8%b4%d9%88%d8%a7%d8%a6%d9%8a%d8%a9-%d9%88%d8%a7%d9%86%d8%aa%d8%b8%d8%b1-%d8%a7%d9%84%d9%86%d8%aa%d8%a7%d8%a6%d8%ac/ https://www.fwasl.com/%d8%ad%d8%af%d8%af-%d8%b9%d9%85%d9%84%d8%a7%d8%a6%d9%83-%d8%a8%d8%b9%d8%b4%d9%88%d8%a7%d8%a6%d9%8a%d8%a9-%d9%88%d8%a7%d9%86%d8%aa%d8%b8%d8%b1-%d8%a7%d9%84%d9%86%d8%aa%d8%a7%d8%a6%d8%ac/#respond Wed, 09 Aug 2017 21:53:28 +0000 https://www.fwasl.com/?p=8610

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

]]> <![CDATA[ما الجدوى من إقامة مشروع أوتأسيس شركة إن لم يكن هناك عملاء أو مستخدمين؟!
سؤال منطقي يطرح نفسه ، فأي مشروع سواء كان ربحياً أو غير ربحياً لا قيمة له بدون الـ users أو clients، لذلك لابد من إجراء دراسة مكثفة حول شريحة العملاء المستهدفة لمعرفة الـ needs الخاصة بهم وتقديمها على أفضل ما يمكن.، وإلا ستخسر كل شىء إذا حكمتك عشوائية الاختيار .
ولتسهيل دراسة العملاء علينا أن نقوم بتقسيمهم إلى شرائح ، بحيث تحوى كل شريحة على أفراد تجمعهم خصائص متشابهة، وغالباً ما يتم تقسيمهم بناء على المعايير الأربع الأتية:

  • جغرافياً Geography.
  • ديموغرافياً Demography.
  • نفسياً Psychograpy.
  • سلوك العملاء Customers behavior.

جغرافياً Geography.

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

فعلى سبيل المثال :

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

 

ديموغرافياً Demography.

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

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

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

نفسياً Psychograpy.

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

 

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

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

 

سلوك العملاء Customers behavior.

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

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

ولكن هناك سؤال قد يطرحه البعض، هل من الممكن لمشروع أو خدمة واحدة أن تستهدف عدة شرائح في نفس الوقت؟!

بالبطبع نعم يمكن ذلك  ولكن قد تختلف متطلبات الخدمة ، فإذا قمنا بافتتاح مطبعة للكتب في مدينة معينة ، فإنها قد تقدم نفس الخدمة لكثير من الأماكن ولكن قد تحتاج إلى وسائل نقل والمزيد من العمال وهكذا…

الخلاصة.

فيما سبق وبعد تحديد الشريحة المستهدفة للعملاء ،بناء على الاستراتيجية السابقة والتي تحتوى أربع أسس وهى جغرافياً Geography ،ديموغرافياً Demography، نفسياً Psychograpy، سلوك العملاء Customers behavior. نبدأ بدراسة احتياجاتهم، ثم نقوم بتلبيتها من خلال منتج أو خدمة معينة.

 

 

]]>

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

]]> https://www.fwasl.com/%d8%ad%d8%af%d8%af-%d8%b9%d9%85%d9%84%d8%a7%d8%a6%d9%83-%d8%a8%d8%b9%d8%b4%d9%88%d8%a7%d8%a6%d9%8a%d8%a9-%d9%88%d8%a7%d9%86%d8%aa%d8%b8%d8%b1-%d8%a7%d9%84%d9%86%d8%aa%d8%a7%d8%a6%d8%ac/feed/ 0 التطبيقات المعقدة وتأثيرها على إختيارالـ Forms design ؟ https://www.fwasl.com/%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d8%b9%d9%82%d8%af%d8%a9-%d9%88%d8%aa%d8%a3%d8%ab%d9%8a%d8%b1%d9%87%d8%a7-%d8%b9%d9%84%d9%89-%d8%a5%d8%ae%d8%aa%d9%8a%d8%a7/ https://www.fwasl.com/%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d8%b9%d9%82%d8%af%d8%a9-%d9%88%d8%aa%d8%a3%d8%ab%d9%8a%d8%b1%d9%87%d8%a7-%d8%b9%d9%84%d9%89-%d8%a5%d8%ae%d8%aa%d9%8a%d8%a7/#respond Tue, 08 Aug 2017 12:17:13 +0000 https://www.fwasl.com/?p=8603

ظهرت المقالة التطبيقات المعقدة وتأثيرها على إختيارالـ Forms design ؟ أولاً على فواصل.

]]> 1- Modal هذا الشكل المُبسط للـ Presentation سهل التنفيذ والاستخدام أيضاً لنموذج إدخال البيانات، يصلح للتطبيقات الأقل تعقيداً، والتي تتطلب إدخال معلومات محدودة . كما أنه يتعامل مع كل صفحة بشكل منفصل، ويمنع المستخدم من التفاعل مع الأجزاء الأخرى للتطبيق حتى يتجاوز هذه المرحلة . أما التطبيقات المعقدة التي تتطلب العديد من التفاعلات تحتاج نماذج أخرى لإدخال البيانات مثل popovers. لذا يُفضل تصميم صفحات طولية منفصلة لها لإدخال البيانات، لأن استخدام هذا الشكل  قد يتسبب في عُطل التطبيق أو إغلاقه.  

2- Multi modal نموذج متعدد الـ Forms.

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

3- Slideout

هذا النموذج تكون فيه الـ Form طولية التصميم، لذا تستوعب العديد من المعلومات كما تسمح للـ User بمراجعة كافة  المعلومات بإلقاء نظرة كلية على الصفحة.  

4- Popover النماذج المُضمنة

Inline Forms (النماذج المضمنه)، هكذا يسميها البعض، وفيه تأخذ الـ Form نفس تنسيق الPage لتعطي شكل انسيابي ،كما تسمح بإدخال البيانات بشكل بسيط وسهل و تتميز بالـ direct edit حيث يمكن للمستخدم  حفظ الـ data أو تحريرها مباشرة دون العرض مرة أخرى.  

5- Editable table جداول قابلة للتحرير.

لا يختلف هذا النموذج كثيراً عن الـ Inline Forms ، حيث يمكن للـ user معالجة البيانات مباشرة عند تقديمها. هذا النوع مفيد جدا لادخال البيانات المُجدولة ،كالـ spreadsheet والفواتير الخاصة بالبنوك.  

6- Takeover

نموذج أخر للـPresentation ،يُمكن الـ user من التفاعل مع الـ complex forms، حيث لدية إمكانية الرجوع السريع للمعاينة السابقة ،ويعتبر الـTakeover من أنسب النماذج للتطبيقات التي لا تستلزم استمارات متتابعة لإدخال البيانات.  

7- Wizard

نموذج أخر يصلح للـ Complex apps التي تستلزم أدخال data كثيرة، حيث تتيح للـuser إدخال البيانات المتتابعة خطوة بخطوة، ويتم توظيفها في العمليات الغير مألوفة للمستخدم، مع ذلك فإنها تتسبب في user experience سيئة ، وتحتاج إلى سلسلة من التحسينات للوصول إلى مستوى مرضي للمستخدم.  

8- Sectioned Forms

Sectioned forms أو نموذج الاستمارات المقسمة كما يُقال، هو من أفضل نماذج إدخال البيانات ع الإطلاق، حيث يتميز بالمرونة مما يسهل على المستخدم إدخال المعلومات المعقدة حسب رغبته دون أن يفرض عليه بداية معينة ،لأنه يوفر سياق كامل للـ forms بديلا عن الـ multi-page كما في نموذج Wizard.  

9- Drag& Drop

رغم عدم كونه نموذجياً، إلا أن يضيف بعض المرح من خلال تفاعلات الـ users  مع inputs ، ففيه يسمح الـ editors للمستخدمين باختيار البيانات وإدراجها في WYSIWYG presentation من خلال المدخلات المحددة سابقاً، مما يزيد تفاعل المستخدمين وكذلك يسهل معرفة إتجاهتهم.  

 WYSIWYG -10

WYSIWYG اختصاراً لـ What You See Is What You Get. أى ما تراه هو ما تحصل عليه. أى أن مدخلات بياناتك هى التى ستحدد النتائج، لذا يتم توظيف محررين لـ WYSIWYG كمحرري النصوص في Microsoft Word أو email creators مثل MailChimp والناشرين في المواقع الإلكترونية مثل SquareSpace وغيرها الكثير. والذين يسمحون للمستخدمين بإثراء المحتوى دون الحاجة لمعرفة أي من لغات البرمجة سواء HTML, CSS, أو JS.  

11- Fill in the blanks

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

12- Conversational user interfaces and the future

  هذا النموذج CUI من النماذج الرائعة والفعالة، حيث يتم التفاعل بين المستخدم والتطبيق من خلال محادثة سواء نصية أو صوتية ، وفيه يتوافر bot للرد على الـ user من خلال الردود الألية المخصصة التي تتفاعل مع الصوت الحر أو النص وتوفر الرد الملائم قدر الإمكان ، ويعتقد الكثير من المصممين أن هذا النوذج هو النموذج المستقبلي للتطبيقات الإلكترونية كما ذكر كلا من Yunnuo Cheng و  Jakob Nielsen point out . لذلك لاقت الـ chat apps رواجاً كبيراً.   الخلاصة: كانت هذه بعض نماذج الـ presentation forms لإدخال البيانات في التطبيقات منها ما يصلح للتطبيقات البسيطة مثل modals و Slideout forms و Inline forms ، ومنها ما يناسب التطبيقات المعقدة والتي تحتاج الكثير من البيانات مثل Multi-modal forms و Takeover modals و Sectioned forms. ومع تطور نظم البرمجة سيختفي بعضها بالتأكيد ويظهر بديلا لها ، وسينتشر البعض الأخر ويصبح لغة المستقبل مثل الـ Conversational user interfaces.   مترجم بتصرف عن :
Form Design for Complex Applications لـ Andrew Coyle
]]>

ظهرت المقالة التطبيقات المعقدة وتأثيرها على إختيارالـ Forms design ؟ أولاً على فواصل.

]]> https://www.fwasl.com/%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d8%b9%d9%82%d8%af%d8%a9-%d9%88%d8%aa%d8%a3%d8%ab%d9%8a%d8%b1%d9%87%d8%a7-%d8%b9%d9%84%d9%89-%d8%a5%d8%ae%d8%aa%d9%8a%d8%a7/feed/ 0 كيفية تصميم تجربة صوتية voice experience الجزء الثالث https://www.fwasl.com/voiceexperience3/ https://www.fwasl.com/voiceexperience3/#respond Mon, 29 May 2017 20:57:39 +0000 https://www.fwasl.com/?p=8482

ظهرت المقالة كيفية تصميم تجربة صوتية voice experience الجزء الثالث أولاً على فواصل.

]]> <![CDATA[تصميم تجربة استخدام صوتية Voice UX  يقوم على ثلاثة مراحل الأولى معرفة مفهوم الواجهة الصوتية User Interface وربطها بالذكاء الاصطناعي Artificial intelligence وهذا ما تم ذكره في الجزء الأول، والثانية هي خطوات تنفيذ التصميم الصوتي وهذا ما شرحناه بشيء من التفصيل في  الجزء الثاني .، واليوم ننتقل إلى المرحلة الأخيرة وهي مرحلة تطوير Development تجربة الاستخدام للتصميم الصوتي.

 

مرحلة التطوير Development

الأن وقد تم الانتهاء من تصميم التجربة الصوتيةVUX، إذا لننتقل إلى مرحلة الاختبار وما يليها من تطوير ، فلكل منصة platform إرشادات ودروس تساعدك في إختبار إمكانيات ومهارات التطبيق مثل Alexa Skills Kit و Develop Actions for Google وكذلك Cortana الذي يساعدك في إعادة إستخدام كود  Alexa الخاص بإختبار مهارات التطبيق الخاص بك.

تطوير الطبيق app development يستلزم منك كمصمم التفكير والتحليل لدائرة ردود الفعل feedback loop على بتطبيقك الصوتي Voice app، لتتمكن من فهم إسنخدام تطبيقك ومشكلات المستخدمين لتساعدك أثناء التطوير، عن طريق بعض المقاييس مثل المستخدم، التعليقات، كلمات المستخدمين ومعرفة هدفهم من إستخدام التطبيق.

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

بعد الانتهاء من إنشاء وإختبار تطبيقك الصوتي، فإن الخطوة الأخيرة هي تبسيط عملية الإرسال streamlined submission process ، فمع النمو السريع لـ Alexa marketplace لاكتشاف التطبيقات الصوتية الجديدة واختبارها ، أصبح الأمر أكثر صعوبة . ولكى تحسن Amazon هذه العملية لجأت لاستخدام العناصر المرئية، لمساعدة المستخدم للوصول لإمكانيات التطبيق بسهولة مثل إستخدام أيقونه واضحة وكذلك إختيار إسم جذاب ووصف مناسب للتطبيق.

 

 

 

المباديء الإرشادية للتصميم الصوتى .

فيما يلي بعض المباديء الإرشادية التي يجب أن يتبعها المصمم عند تصميم تجربة صوتية، والتي ساهمت فيها  Google و Amazon بنسبة كبيرة وهى:

 

1- كن مع المستخدم وساعده في بدء إستخدام التطبيق.

إعرض التطبيق وطرق تعامل المستخدم معه فعلى سبيل المثال يمكنك أستخدام هذه الصيغة:

أهلا بك، في UX Design Quiz . سوف نطرح عليك خمسة أسئلة عن تصميم تجربة المستخدم، ونرى كم عدد الأسئلة التي يمكنك معرفة إجابتها الصحيحة. كما يمكنك طلب تكرار السؤال أو تخطيه حسب ما تريد. فهل تود بدأ هذه التساؤلات؟!

2- الحفاظ على تبادل المحادثات الموجزة للحد من وقت التحميل.

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

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

1-  الاختيار الأول : قانون الحكم law of parsimony، أو ما يُطلق عليه  Occam’s Razor أو Ockham’s razor.

2- الاختيار الثاني :  قانون Hick’s أو المعروف بقانون the Hick-Hyman Law .

3- الاختيار الثالث : التأثير الجمالي وسهولة الاستخدام.

4- الاختيار الرابع  Satisficing : ويشير هذا المبدأ إلى عدم الخلط بين رضى المستخدمين  satisficing وبين التضحية sacrificing بأهداف العمل.

ثم يبدأ المستخدم بالإختيار  أو يطلب من التطبيق تكرار الاختيارات مرة أخرى.

 

3- ضرب الأمثلة أفضل من التعليمات المباشرة.

على سبيل المثال:

  • إستخدام طريقة التعليمات Instruction  (من فضلك قُل تاريخ ميلادك بالسنة والشهر واليوم).
  • استخدام طريقة الأمثلة Example ( من فضلك قل تاريخ ميلادك على هذه الطريقة  5 إبريل 1990).

 

4- اصنع تصميم مبهج delight design دون التدخل في مهام التطبيق .

عليك أن تصنع تصميم متوازن ، يجمع بين تنفيذ المهام والبهجة والشكل الجمالي، وهذا يتطلب كثير من العمل بناء على إستراتيجية مناسبة.

 

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

6- إعداد تصميم بديل يعالج أوجه القصور.

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

 

7- إحترام خصوصية وأمان المستخدم .

 

الخلاصة.

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

ظهرت المقالة كيفية تصميم تجربة صوتية voice experience الجزء الثالث أولاً على فواصل.

]]> https://www.fwasl.com/voiceexperience3/feed/ 0 مبدأ تبادل المنفعة Reciprocity واستخدامة لبناء تجربة استخدام مقنعة. https://www.fwasl.com/reciprocitypersuasive-ux/ https://www.fwasl.com/reciprocitypersuasive-ux/#respond Mon, 29 May 2017 15:51:54 +0000 https://www.fwasl.com/?p=8485

ظهرت المقالة مبدأ تبادل المنفعة Reciprocity واستخدامة لبناء تجربة استخدام مقنعة. أولاً على فواصل.

]]> <![CDATA[

(( المعاملة بالمثل أو المعاملة بالتبادل Reciprocity قاعدة إجتماعية، توجب على الشخص سداد ما قدمه له شخص أخر، أو تقديم بديلاً له))

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

فماذا لو حاولنا دمج هذه القاعدة الاجتماعية  Reciprocity rule مع مبادىء تجربة المستخدم UX Principals، من خلال تصميم design قائم على تبادل المنفعة بين المنتج product أو الخدمة service والمسنخدم user ؟!

 

مبدأ المعاملة بالمثل Reciprocity principal وعلاقته بالمنتجات الرقمية.

بعد الكثير من البحث ، وجدنا أن الكثير من المنتجات الرقمية digital products إستفادت من هذا المبدأ بشكل أو بأخر ، مما أدى إلى رد فعل إيجابي positive reaction من المستخدمين، وتحسين تجربة المستخدم usre experience، وبالتالي حققت نتائج تجارية business outcomes أفضل.

 

1- موقع Duolingo

Duolingo موقع إلكتروني لتعليم اللغات ، استطاع هذا الموقع إستخدام قاعدة التعامل بالمثل أو تبادل المنفعة في التصميم، فعند دخولك للموقع والتوجه للصفحة الرئيسية ، تقع عينك على هذه الجملة Learn a language for free, forever  أى تعلم لغة مجاناً وإلى الأبد، لتشجيع المستخدم على إتخاذ إجراء (call to action (CTA ، فما عليك إلا أن تضغط على Get started  .

 

 

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

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

 

وهنا لعب الموقع على نقطة هامة وهى:

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

 

وهنا عليك أن تتذكر جيداً هذه القاعدة :

(حاول إعطاء المستخدم أولاً، ثم إطلب منه أى شىء).

 

2- موقع Q&A website Quora .

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

 

ما هو أثر إستخدام  Reciprocity principal على المنتجات الرقمية؟

لذلك نجد الكثير من الموقع تقدم الكثير من المعلومات مجاناً، سواء عن طريق وسائل الإعلام الاجتماعية Social media content،  النشرات الإخبارية newsletters، أو حتى ملفات الـ PDF. بعد فترة يبدأ المستخدمين بالتفاعل مع الموقع إذا وجدوا محتوى معلوماتي جيد  good informative content يحقق فائدة أو نفع لهم، وهذا التفاعل يحسن من ترتيب الموقع على شبكة الانترنت internet ، وظهوره في نتائج البحث وهنا يتحقق مبدأ المعامله بالمثل وتبادل المنفعة Reciprocity principal .

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

 

الخلاصة .

Reciprocity principal هو مبدأ يعود إلى علم النفس الاجتماعي، والذى بدأ استخدامة عند تصميم تجربة الاستخدام UX Design الخاصة بالمنتجات الرقمية والمواقع الإلكترونية مثل Quora و Duolingo  مما حسن تجربة المستخدم لهذه المواقع وغيرها وساعدهم في طرح منتجات جديدة وبالتالي تحسبن النتائج التجارية لها.

 

مُترجم بتصرف عن :

Using the reciprocity principle for a persuasive UX 

by Yogesh Awasthi]]>

ظهرت المقالة مبدأ تبادل المنفعة Reciprocity واستخدامة لبناء تجربة استخدام مقنعة. أولاً على فواصل.

]]> https://www.fwasl.com/reciprocitypersuasive-ux/feed/ 0 كيفية تصميم تجربة صوتية الجزء الثاني https://www.fwasl.com/voice-experience-design2/ https://www.fwasl.com/voice-experience-design2/#respond Sat, 20 May 2017 21:07:05 +0000 https://www.fwasl.com/?p=8478

ظهرت المقالة كيفية تصميم تجربة صوتية الجزء الثاني أولاً على فواصل.

]]> في الجزء الأول من المقال ركزنا على مفهوم الواجهة الصوتية Voice Interface وما المقصود بها؟ والأسس التي تقوم عليها التجربة الصوتية من تطبيقات Apps، منصات Platforms وأجهزة Devices وعلاقتها بالذكاء الاصطناعي Artificial intelligence .

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

 

خطوات تصميم تجربة استخدام صوتية.

1- اكتشف Discover.

تبدأ رحلتك في تصميم أى تطبيق أو موقع ويب بهذا السؤال ما القيمة التي يقدمها هذا التطبيق ؟! سواء كان تطبيق صوتي مستقل مثل Alexa أو وسيلة ضمن وسائل التواصل مع عملائك ، مع الأخذ في الاعتبار أن التطبيق الصوتي يتميز  بسهولة الاستخدام وسرعة التفاعل كما أنه غالباً ما يُستخدم في المنزل أو أثناء قيادة السيارة وفقاً لتقرير  2016 Internet Trends Report .

 

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

إذا كان لديك منافسين فعليك دراسة ما يقدمونه، ومراجعة إحصائيتهم بشكل دقيق، ومدى تحقيقة لاحتياجات المسنخدم ، ورد فعل السوق علي المنتج مثل Amazon’s Alexa Skill Store.

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

 

 

2- حدد Define.

في هذه الخطوة ستقوم  بمعرفة طبيعة التطبيق، والقدرات التي يملكها والخدمات التي يستطيع تقديمها .

  •  طبيعة التطبيق Personality :

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

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

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

 

  • قدرات وكفاءة التطبيق  Capabilities .

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

الأساسيات التي قد توفرها مهارات تجربة الاستخدام هى:

1- تصميم مبادىء تجربة الاستخدام UX حسب الطلب.

2- طرح أسئلة على المستخدمين بشكل عشوائي.

3- طرح أسئلة معينة على المستخدم لتكوين رأى حول مبدأ معين .

 

 

3- تفاصيل تدفق المحادثة Detail conversation flow.

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

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

 

4- وصف العبارات البديلة Describe Alternate Phrases.

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

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

  • تحديد الطلبات التي يستقبلها التطبيق.
  • تحديد مرادفات كل كلمة في الطلب .
  • مراعاة اختلاف اللهجات بسبب المواقع الجغرافية للمستخدمين.

وبهذا يكون التطبيق قائمة شاملة لمعظم الكلمات المرتبطة بمجال تطبيقك الصوتي، التي قد يستخدمها المستخدم، مع التركيز على الكلمات السهلة والشائعة بين جمهور المستخدمين .

 

5- Refine

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

  • تقنية المعالجة  OZ Wizard : وفيها يقوم شخص ما بدور الجهاز الصوتي حيث يستقبل طلبات المستخدمين و يستجيب لها بناء على البرنامج النصي لواجهة الصوت.
  • استخدام نماذج برمجية مثل SaySpring  : لانشاء النماذج التفاعلية وإختبارها.
  • أما إذا تم إنشاء تطبيقك باستخدام نماذج الرموز : حينها يفضل إختبار التطبيق عن طريق الأدوات التي تقدمها Amazon و Google .

 

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

 

الخلاصة .

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

 

]]>

ظهرت المقالة كيفية تصميم تجربة صوتية الجزء الثاني أولاً على فواصل.

]]> https://www.fwasl.com/voice-experience-design2/feed/ 0 كيفية تصميم تجربة صوتية Voice Experience الجزء الأول https://www.fwasl.com/voice-experiencedesign/ https://www.fwasl.com/voice-experiencedesign/#respond Sat, 20 May 2017 20:20:15 +0000 https://www.fwasl.com/?p=8473

ظهرت المقالة كيفية تصميم تجربة صوتية Voice Experience الجزء الأول أولاً على فواصل.

]]>

Google و Amazon  مؤخراً العديد من الأجهزة devices التي تدعم الواجهة الصوتية Voice Inerface، والتي وجدت طريقها لملايين المستخدمين عبر العالم منذ العام الماضي . وتتضاعفت هذا العام لتصل لأكثر من 24.5 مليون جهاز، وفقاً للإحصائيات التي أجرتها شركة analysis from VoiceLabs ، مما يفتح مجالاً أكبر للمصممين لتصميم التجارب و الواجهات الصوتية Voice Interface Designer. تصميم واجهة جديدة لا يعني تجاهل الواجهات التي تم تصميمها مسبقاً، وما حققته من نجاح في تجربة الاستخدام UX ، بل يجب أن نستند إلى الدراسات التي أجريت علىها مع مراعاة الاختلافات بينها وبين الواجهات الصوتية مثل التفاعلات التخاطبية Voice Ineraction، لنتمكن من عمل تصميم واضح الخطوات يفهمه المستخدم ويستطيع التكيف معه.

واجهة الصوت Voice Interface وكيفية فهمها؟

مثلما تعمل تطبيقات الجوال Mobile Apps على محورين أساسيين هما نظام التشغيل OS، والجهاز device، كذلك تعمل التفاعلات الصوتية، ولكنها تعمل على ثلاثة محاور أساسية: 1- تطبيق الصوت Voice App : مثل AmazonSkills و Action For Google. 2- منصة الذكاء الاصطناعي Artificial intelligence platform : مثل Amazon Alexa و Google Assistant  و Apple Siri و Cortana Microsoft . 3- الجهاز Device : مثل الهواتف الذكية، أجهزة الكمبيوتر و Echo . كل طبقة من هذه الطبقات تعتمد على ما هو أسفل منها، وتدعم ما هو أعلى منها ، وتقع الواجهة الصوتية على الطبقتين العلويتين وهما الـ App و platform وليس على الجهاز Device نفسه. الأجهزة التي تعتمد على الصوت مثل Amazon Echo و  Google Home تتبع خطوات متتالية مرتبة لتخرج بالواجهة الصوتية وهى :

  • الاستماع : حيث تستمع جيداً منتظرة سماع كلمة Alexa أو OK بالنسبة لـ Google.
  • اتخاذ إجراء فعلي reaction: فبمجرد تفعيلها يقوم الجهاز بإرسال تسجيل الصوت التابع للإجراء إلى الـ Platform.
  • يسمع المستخدم الرسالة الترحيبية بمجرد البدأ باستخدام التطبيق.

على سبيل المثال تطبيق Alexa حينما يستمع للكلمة المفتاحية فإنه يقوم بإرسال تسجيل صوتي إلى المنصة التابعة له  Play jeopardy Platform التي تستخدم مزيج من التعريف التلقائي للكلام automatic speech recognition و الفهم اللغوي natural language understanding ثم تحوله إلى الخطاب الصوتي (welcome to jeopardy 6) الذي تسمعه من خلال الجهاز وكل هذا يحدث خلال ثوانِِ معدودة.

بناء تجربة صوتية Building Voice Experience.

Mark Zuckerberg أقبل على مغامرة وتحدي شخصي في العام الماضي، حيث قام بتصميم تطبيق بسيط يعتمد على الذكاء الاصطناعي Artificial intelligence أو  AI لإدارة منزله، والذي أطلق عليه إسم Jarvis مستخدماً في واجهته الصوتية صوت voice of Morgan Freeman .

 الواجهة الصوتية وعلاقتها بالذكاء الاصطناعي في  jarvis app.

ويقول Mark  عن jarvis app أنه كان تحدياً فكرياً مثيراً للإهتمام، حيث أعطى تجربة رائعة ومباشرة عن كيفية بناء أدوات الذكاء الاصطناعي المتعلقة بالمجالات المستقبلية. ففي غضون 5 إلى 10 سنوات سيكون لدينا من أدوات الذكاء الاصطناعى AI tools ما يفوق حواسنا البشرية، كالسمع والرؤية واللمس فضلاً عن اللغة وكيفية فهمها. لذا علينا التفكير بهذه التجارب الجديدة على نطاق أوسع ومعرفة الكيفية التي يتم بها إتخاذ فكرة من مجال معين وتطبيقها على مجالات أخرى ، فما المانع من استخدام تطبيق مثل jarvis في قيادة السيارات، اكتشاف الكواكب، علاج الأمراض، فهم وسائل الإعلام  وغيرها لبناء دولة قوية قائمة على الذكاء الاصطناعي الذي يُعد هو لغة المستقبل.      حتى إذا لم يتوافر لدينا الموارد أو القدرة لبناء تطبيق يعتمد على واجهة صوتية منذ البداية، يمكنك العمل على منصات الذكاء الاصطناعي AI Platforms التي تم بناؤها بالفعل ، والتى وفرتها Amazon و Google كقوالب مفتوحة المصدر بكل ما فيها من تعليمات برمجية Codes وتفصيلية خطوة بخطوة، لتسطيع بناء أنواع مختلفة من التطبيقات الصوتية Voice apps. مما يوفر على مصمم التطبيق App designer ويرفع عائد ربح الشركات صاحبة هذه المنصات .        وبناء على ما سبق ،فإن النقطه التي تدعوا للقلق والتي يجب التركيز عليها والاهتمام بها هي معرفة كيفية تصميم الواجهة الصوتية والذي سنعرفه في الجزء الثاني من هذه السلسلة.

الخلاصة.

تعتبر التصميمات التي تعتمد على الواجهات الصوتية هي المستقبل، وذلك لارتباطها الوثيق بتصميمات الذكاء الاصطناعي ، مما يفتح لها المجال لاستخدامها في شتى المجالات ، كما فعلت كلاً من Google و  Amazon و Microsoftو  Apple في تطبيقاتها الصوتية التي أُطلقت مؤخراً ومن بعدهم  Mark بالتطبيق الذي أطلقه عام 2016 والمُسمى بـ jarvis app .   مُترجم بتصرف عن: Designing Voice Experiences by Lyndon Cerejo  ]]>

ظهرت المقالة كيفية تصميم تجربة صوتية Voice Experience الجزء الأول أولاً على فواصل.

]]> https://www.fwasl.com/voice-experiencedesign/feed/ 0 تأثيرالـ Shadow و Blur Effect في تصميم واجهة المستخدم الحديثة https://www.fwasl.com/blur-effectshadowui/ https://www.fwasl.com/blur-effectshadowui/#respond Fri, 19 May 2017 09:44:22 +0000 https://www.fwasl.com/?p=8463

ظهرت المقالة تأثيرالـ Shadow و Blur Effect في تصميم واجهة المستخدم الحديثة أولاً على فواصل.

]]>
  •  الجانب الوظيفي للتصميم Functionally side، و الذي يعتبر مفتاح النجاح لأى منتج.
  • جمال التصميم وتفاصيلة البصرية aesthetics visual details، التي تحسن من الجانب الوظيفي للتصميم مثل الظل Shadow و الطمس blur effect ويمكنك إختبارها باستخدام برنامج Adobe XD .
    •  

    الظل وواجهة المستخدم UI و الرابط بينهما.

    استخدم مصممي واجهة المستخدم دمج الظلال في التصميم ، لتكوين إشارات بصرية visual cues لتساعد عقل المستخدم للوصول إلى ما يبحث عنه.  

    تصميم إمكانيات الفعل DESIGN AFFORDANCE.

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

    إنشاء تسلسل هرمي مرئي VISUAL HIERARCHY .

    استخدام الظل في التسلسل الهرمي يفيد في نقطتين : 1- واجهات المستخدم الحديثة تستخدم الـ Layers للإستفادة من المحور Z التى تقع علية معظم الإشارات البصرية التي تفيد المستخدم ،حيث يتم محاذاة المحور Z بشكل عمودي على مستوى الشاشة مع محور Z الإيجابي الذي يمتد نحو المشاهد.   Material Design   2- يساعد الظل في تحديد التسلسل الهرمي Visual Hierarchy للعناصر من خلال وجود إختلاف بين عنصرين، أو مساعدة المستخدم في إدراك وجود عنصر مخفي تحت الأخر.   عليك كمصمم واجهة مستخدم رسومية GUI Designer أن تتصور وتتخيل مكان كل عنصر في هذا الفضاء ثلاثي الأبعاد  3Dimensional Space   لماذا؟! تُجيب على ذلك قوانين الفيزياء حيث تقول بأن كل شىء مادي له أبعاد ، وأن العناصر جميعها تتفاعل معاً في إطار ثلاثي الأبعاد فقد تكون ملصقة أو مكدسة فوق بعضها البعض ولكن لا يمكن أن تخترق بعضها البعض ، كما أنها تلقي الظل وتعكس الضوء مما يساعد المستخدم على فهم هذه الواجهة الرسومية. يعتقد الكثير أن تصميم جوجل تصميم Flat ،لكنه يتميز بكونه تصميم ذو بعد ،وأنه استخدم استعارات metaphor ومباديء الفيزياء لمساعدة المستخدمين في فهم الواجهات و تفسير التسلسلات الهرمية البصرية في سياقها الصحيح.   وذكرت Google في تفسيرها للصورة السابقة أن قوانين الفيزياء ساهمت كثيرا في تكوين إدراك المستخدم لهذا التصميم، فبدون الدائرة الظلية المحيطة بالدائرة الصفراء فلن يكون هناك ما يشير إلى الدائرة الصفراء ويفصلها عن الخلفية.    

    تقديم  Visual Feedback باستخدام  Elevation.

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

    Blur Effects

    الـ Blur Effects في تطبيقات الجوال.

    عند إطلاق Apple لـ IOS 8 رفعت شريط لتصميم التطبيق APP design، وكان من أهم التغيرات استخدام الـ blur effect في التصميم ككل وخاصة في الخلفية الغير واضحة و مركز التحكم، فعند الضغط على الهامش في أسفل الشاشة يظهر مركز التحكم ، ويحدث هذا الطمس بطريقة تفاعلية حيث يمكن للمستخدم التحكم به من خلال حركة الأصابع.     ولكن Apple أخذ إتجاه جديد في النسخة الأخيرة من IOS ، وهى إستخدام تقنية الـ3D فجعلت أشكال الـ camera، calculator  وtimer icon عبارة عن مجسمات ثلاثية الأبعاد ، عندما يضغط المستخدم على هذه الرموز ينتهي الوقت الفعلي لهذه التأثيرات الضبابية.    

    فوائد Blur Effects في تصميم واجهات الجوال الحديثة.

    1- مساعدة المستخدم على الفهم الواضح للتصميم.

    حيث تسمح هذه التقنية باللعب في طبقات التصميم والتسلسل الهرمي لواجهة المستخدم، كما أنها حل فعال في تصميم واجهة المستخدم لتطبيقات الجوال Mobile APP، حيث تعطي للمستخدم فهم واضح للتطبيق. تطبيق Yahoo Weather لنظام IOS الذي يظهر صورة للطقس في كل موقع وعليها المعلومات الأساسية التي تحتاجها على الفور، وما إن تنقر نقرة واحده يظهر لك الكثير من المعلومات عن المكان الذي تريده مع الاستمرار في عرض الصورة .    

    2- توجيه إنتباه المستخدم.

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

    3- وضوح النص المقروء.

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

    الـ Blur Effects في تصميمات الويب.

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

    1- تزيين الخلفية Decorative Background.

    حيث يتم إستخدامها مع الصور الـ Full Screen Background، كما وجدت طريقها في التصميم الحديث كتأثير ديكوري للموقع web decoration، وهذا التأثير ليس من الجانب الجمالي فقط ولكنه ذو قيمة، فحينما يتم طمس عنصر يتم التركيز على الأخر تلقائياً. فعلى سبيل المثال موقع Trellis Farm ، استخدم صورة رمزية لمزرعة ، استخدم فيها تقنية الـ Blur لجذب تركيز المستخدم على النص والإجراءات التي يجب اتباعها للمتابعة داخل الموقع.  

    2- الصورة التقديمية للتحميل Progressive Image Loading.

    تتطلب مواقع الويب الحديثة تحميل العديد والعديد من الصور والتي بلا شك لها تأثيرها على أداء الموقع web performance وبالتالي على تجربة المستخدم UX،تقنية الـ Blur Effect تسمح بظهور  صورة تقديمية حتى يتم تحميل الصور . وقد لجأ لهذه التقنية العديد من المواقع منها  medium.com الذي يقدم صورتين بنفس المحتوى الأولى ضبابية صغيرة لحين تحميل الصورة الأصلية بكامل تفاصيلها وحجمها الطبيعي.   A progressively loaded JPG image showing blur first    

    3- إختبار المواقع الهرمية البصرية.

    الـ Blur Effect لا تعتبر تقنية للتصميم البصري  Visual Design فقط، ولكنها تستخدم أيضا كتقنية إختبار للتسلسل الهرمي البصري Visual Hierarchy للصفحة. فهذا الإختبار يساعدك في معرفة هل يستجيب المستخدم ويذهب إلى ما تريده أن يركز عليه؟، كل ما عليك هو أخذ لقطة screenshots من موقعك، وتقوم بإدخالها على برنامج فتوشوب ثم تضيف الـ blur Effect بمقدار من 5: 10 درجات ، ثم انظر إلى النسخة الغير واضحة هل حققت ما تريده أم تحتاج إلى بعض التعديلات؟!      

    متى بتسبب الـ Blur Effect في مشكلة؟

    1- عند الإفراط في استخدامه في الـ Mobile APP

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

    2- تأثير الـ blur Effect على قابلية قراءة النصوص.

    يجب أن نراعي وضوح النصوص المكتوبة Context وألا نستخدم الـ blur Effect فوق النصوص مما يؤثر على وضوحها ويجعلها صعبة القراءة.    

    3- استخدام الـ blur Effect مع المحتوى الكثيف يتسبب في ثقل الصفحات.

    قد تتسبب الخلفية الغير واضحة blur background في مشكلة مع الصفحات المليئة بالمحتوى Content ، في المثال التالي ستلاحظ أن صورة الخلفية الواضحة أعطت شكل أفضل مع وضوح المحتوى المكتوب على عكس الأخرى التي استخدمت تقنية الطمس فالشكل سىء كما أن المحتوى غير واضح تماماً.  

    الخلاصة.

    استخدام الـ Shadow و Blur Effect يساعد في تكوين إشارات بصرية تساعد المستخدم على فهم أفضل لإجراءات التطبيق، وتوضيح العلاقة بين عناصر واجهة المستخدم إذا تم إستخدامها بقدر الحاجه وبشكل صحيح وإلا ستتسبب في مشاكل كثيرة مثل عدم وضوح المحتوى وثقل التحميل مما يسىء إلى تجربة المستخدم الخاصة بالتطبيق أو الموقع.   مُترجم بتصرف عن : How To Use Shadows And Blur Effects In Modern UI Design by Nick Babich  ]]>

    ظهرت المقالة تأثيرالـ Shadow و Blur Effect في تصميم واجهة المستخدم الحديثة أولاً على فواصل.

    ]]>     https://www.fwasl.com/blur-effectshadowui/feed/ 0