کــــار آفرینــــ بلاگــــ

بلاگیــــ برایــــ امروزیــــ ها

چگونه با داستان سرایی وب سایتی کامل درست کنیم

چگونه با داستان سرایی وب سایتی کامل درست کنیم

 

چگونه با داستان سرایی وب سایت ای کامل درست کنیم

 

در پس هر طراحی داستانی نهفته است. هر داستانی طرحی مخصوص دارد. کار شما وصل کردن این دو می باشد.
هر قدم از راه نیاز به طراحی و برنامه ریزی متفکرانه خواهد داشت. داستان سرایی موثر نیازمند استفاده از عناصر بصری و طراحی واسط جهت ایجاد چیزی است که با مردم ارتباط برقرار کند. در این مقاله , ما با استفاده از مثالهای متعدد چند تکنیک کلیدی را برای شما توضیح خواهیم داد.
داستان شما چیست؟
کار خود را با روایت شروع کنید. داستان برند (نام تجاری) , کمپانی و یا حتی برنامه موبایل شما چیست؟ جواب این سئوال باید حتما جذاب و خاص باشد. باید چیزی باشد که مردم را به فکر اشتراک گذاری , بازگویی و شرکت کردن در آن بیاندازد.
Paul Jarvis نویسنده و طراح 5 تا از بهترین عناصر مشترک که مناسب داستان سرایی می باشند را به شرح زیر توضیح می دهد. این عناصر شاید به نظر ساده بیایند ولی دلیل اصلی علاقه مردم نسبت به داستان سرایی می باشد.
داستان های خوب ساده اند.
داستان های خوب عاطفی هستند.
داستان های خوب صادق و یا باورکردنی هستند.
داستان های خوب واقعی اند.
داستان های خوب معتبرند و برای هر گروه از مخاطبین مناسب می باشند.
زمانی که در مورد داستانی فکر می کنید به یاد داشته باشید که تمام داستانها دارای عناصری چون شخصیت , طرح , عمل و عواطف می باشند. داستان شما باید تمام این عناصر را شامل شود. چیز دیگری که بین داستان ها مشترک است برخورداری از صدا و یا روایت کننده است. شاید در ابتدا فکر کنید که برای وب سایت تان نیاز به فردی است که داستان را با صدای بلند و رسا بخواند ولی منظور ما این نبود. البته یک نفر باید داستان را تعریف کند!
چیزی که باعث شگفت انگیز بودن رابط کاربری خواهد شد این است که به شما قابلیت خلق چنین صدایی را به روش های زیر بدهد:

• نوع زبان مورد استفاده شامل کلمات و ساختار جمله
• تمپو وسرعت
• احساس رسمی و یا خودمانی
• ارتباطات بصری به پیام
به وب سایت های Eight Arms و Peter Manning سری بزنید . با ورود به هر یک از این وب سایت ها بلافاصله متوجه لحن متفاوت بصری می شوید که صحنه را برای داستانی مخصوص آماده می سازد. حتی بدون اینکه چیزی در مورد این وب سایت ها و آنچه که نشان می دهند بدانید , وجود عناصر بصری متعدد احساسی متفاوت را در کاربر ایجاد می کند. این قضیه در نوع نوشتار , نحوه انتخاب رنگها و سایر عناصر به راحتی قابل مشاهده است. همانطور که در بخش Web UI design for human eye گفته شده , هر داستان با برداشت اول آغاز می شود.
داستان های بزرگ و کوچک
هر داستانی شامل یک موضوع اصلی و بزرگ و سفرهای کوچکتری است که به شما کمک می کند تا در امتداد مسیر حرکت کنید . این دو نوع از داستان بزرگ و کوچک در تصمیم گیری کاربر در مورد نوع تعامل با داستان به وی کمک می کند.
داستان بزرگ باعث شکل گیری چهارچوبی برای تجربه می باشد و دلیل اصلی وجود برنامه ها و وب سایت های مختلف است. این داستان باید به راحتی و در سطح گسترده ای به کاربر متصل شود , همچنین توضیح آن باید کار راحتی باشد.
داستان کوچکتر عناصر اضافی را برای مسیر داستان فراهم می کند. این داستان های کوچک مثل جزئیات یک غذا مهم هستند و نباید نادیده گرفته شوند. داستان بزرگ متشکل شده از این داستان های کوچک است. درست مثل یک کتاب و یا بازی که در آن جزئیات کوچک در هر مرحله و یا فصل با هدف جذاب شدن طرح بزرگ و نهایی طراحی شده اند.
بهترین مثال از هر دو نوع داستان سرایی، بازی ها هستند. حتی بازی ساده ای مثل Two Dots نیز شامل داستان های بزرگ و کوچک می شود.
داستان بزرگ در اینجا کل بازی تلقی می شود. شما دوست دارید تا تمام پرچم ها را بازی کنید تا سفرتان تمام شود. همچنین در اینجا داستان های کوچک مراحل مختف در بین بازی می باشند. چند دوره بازی ها در محیط های خاص اتفاق می افتند. این ساختار باعث جذب و وابسته شدن کاربر می شود : از این طریق پیروزی های کوچکی که نصیب کاربر می شود و به همین دلیل او به بازی کردن ادامه می دهد تا به پیروزی نهایی دست یابد.
داستان را طراحی کنید
طراحی وب سایت بصری تا حد زیادی شباهت به فیلم نامه و یا کتاب نوشتن دارد پس بد نیست به چنین دیدگاهی به آن نزدیک شوید . داستانی خلق کنید که به برنامه ریزی داستان و تعاملات مرتبط کمک کند.
این کار شامل سه بخش (یا سه قانون ) می شود : راه اندازی و صحنه سازی, مشکل و راه حل. هر داستان شامل این عناصر می باشد . عملکردهای اولی و آخرین کوتاهترین قسمت ها و بخش مربوط به مشکلات به عنوان جذابترین و طولانی ترین بخش داستان به حساب می آید .
در بخش مربوط به مشکل اصلی , باید طوری طراحی شود که بتوانید احساسات و عواطف کاربر را تحت تاثیر قرار دهید . کاربر باید بتواند منطق پشت داستان را متوجه شود و درگیر گونه ای از تصمیم گیری شود تا به راه حل برسد .
شاید همه اینها تا حدودی خیلی دراماتیک به نظر بیاید ولی تجربه نشان داده که در هر مقیاسی عملی بوده است . به عنوان مثال سر بزنید به وب سایت خرده فروشی Daniella Draper.
قانون 1: مقدمه در مورد این خرده فروش. داستان این وب سایت این است که چنین کمپانی با سبک انگلیسی و تمرکز روی زیورالات وجود دارد(نگاهی به جواهرات مدل بیاندازید).
قانون 2: حقایق جانبی که این محصولات را جالب و باحال جلوه می دهند. مدل مشهور کیت موس از این جواهرات استفاده می کند , خیلی شیک می باشند. تمام این داستان به نحوی طراحی شده که این محصول از نظر شما اجتناب ناپذیر باشد.
قانون 3: کلیک کنید و بخرید : شما می توانید به راحتی آنها را به سبد خرید خود اضافی کنید .
ارتباط عناصر از طریق UX
بعد از اینکه برای داستانتان برنامه ریزی کردید و در مورد داستان کوچک و بزرگ , طراحی های بصری , عواطف و تعاملات فکر کردید زمان آن می رسد که همه چیز را به هم متصل کنید .
Dan Saffer نویسنده Designing for interaction بهترین توضیح در مورد تئوری پشت تعاملات را در این دیاگرام ارائه می دهد.
: http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/

در نگاه اول این دیاگرام شبیه به یک سری خطوط در هم بر هم می باشد ولی با نگاه دقیق تر متوجه می شوید که با زیرکی تمام جنبه های طراحی را در کنار هم نشان داده است. و نقطه ای که تمام این سطوح یکدیگر را قطع می کنند تجربه کاربر بوجود می آید.
خوب حالا که این نظریه را به درستی می توان درک کرد , چگونه می توان داستان را به این طراحی متصل کرد؟
اینجا جایی است که طراحی , ریز تعاملات و سهولت استفاده در کنار هم قرار می گیرند. آیا برنامه / وب سایت و یا طراحی شما آنچنان که انتظار داشتید کار می کند؟ آیا عناصر بصری و عملکردها به شکلی درست در کنار هم قرار می گیرند؟

شما می توانید همه چیز را از طریق قابلیت آسان و راحت به هم متصل کنید .
اجازه بدهید تا به بررسی برخی از این تکنیک های طراحی جهت ایجاد داستانی غنی بپردازیم.
تکنیک های طراحی UX
• سورپرایزهای به موقع که باعث ایجاد اشتیاق و جذب بصری کاربر میشود.
طراحی های عاطفی برای اینکه بتوانید به صورت طولانی تر در ذهن کاربر بمانید
• استفاده از Gamification (بازیگونه نشان دادن) برای اینکه کاربر احساس کند شخصیت اصلی داستان شما میباشد
• کشف چیزها جدیدی که باعث اقداماتی جدید و روایت عناصر در سرعتی طبیعی می باشد.
تکنیک های طراحی UI
• رنگهایی که حس عاطفی درستی ایجاد می کنند
• تایپوگرافی های بسیار ساده که برای سهولت درک ساخته شده اند
• عکس , انیمیشن , ویدیو و یا سایر تصویر های جذاب
• مقدار زیادی فضای منفی برای اینکه محتوا بتواند بیشتر خودش را نشان بدهد
• Signifier های مناسب که عکس العمل کاربر را نسبت به محتوای شما نشان می دهد
• کپی و میکروکپی هایی که شخصیت وب سایت شما را نشان می دهد

تکنیک های قابل استفاده
• معماری اطلاعات به شکل بصری به طوری که کاربر بتواند به راحتی گشت و گذار کند
• ناوبری ساده که به کاربر اجازه بدهد تا با 3 حرکت بین داستان شما حرکت کند
• دستورالعمل های جاکوب نیلسن برای زمان پاسخ به سبکی که به کاربر در جهت رسیدن به اهدافش کمک کند
طراحی پاسخگو و سازگار که داستان را در هر دستگاهی به خوبی تعریف کند
• مسیرهای قرمز به شکلی که وظایف کاربر با داستان تلفیق شوند
• بازخوردهای واضح و مناسب که باعث شود کاربر از موفقیت عملی آگاه شود
نتیجه گیری
تعریف داستانی با استفاده از طراحی به یک فاکتور ساده ختم می شود و آن انسجام است. شما به داستان و یک سری عناصر بصری و تعاملاتی نیاز دارید که با هم همخوانی داشته باشند.
برنامه ریزی برای طراحی نیازمند آگاهی کامل از مخاطبین و تئوری های طراحی است .شفاف سازی این داستان وظیف مهم شماست.
اگر شما به دنبال تکنیک های داستان سرایی عملی تری هستید , میتوانید کتاب رایگان و آنلاین The Visual Storyteller’s Guide to Web UI Design را بخوانید.