طراحی و برنامه نویسی وب

تئوری فرآیند توسعه وب

the_webdevelopment_process

طراحی برای چاپ‌کردن و وب، دو مسئله‌ی کاملا مجزا هستند. و هنوز هم در مورد این مسئله، سردرگمی‌هایی وجود دارد. اجازه دهید تا توضیحات خود را با یکی از مطالبی آغاز کنم که باعث می‌شود این سردرگمی، باقی بماند. تصویری که به آن فکر می‌کنیم، همان چیزی است که طراحی می‌کنیم.

یک طراح که پشت میز به هم ریخته‌ی خود نشسته و دور تا دور او، پر از عکس، نمونه کار، کاغذ و… است. شاید هدفمندانه نگاه‌کردن او به صفحه‌نمایش بر این دلالت دارد که می‌خواهد قبل از پایان شب، تمام جزییات را از تصاویر دریافت کند و سپس محل کار خود را ترک کند. این نکاتی که به آنها اشاره شد، مواد مورد نیاز طراحی اسفنجی است.

طراحی اسفنجی، تصویرجالبی است که هنوز طراحان از تشابه آن با واقعیت طراحی جذاب آگاه نشده‌اند. در واقع، ما ارتباط حسی‌ای با این تصاویر داریم زیرا تمام تناقضات وجود ما مانند تفکر در اوقات‌فراغت، کار خلاقانه در زمان نیاز و… را دربرمی‌گیرد. اما این مسئله ما را عقب نگه‌می‌دارد زیرا باعث می‌شود تا ما انتخاب اشتباهی در مورد شیوه‌ی کارکردن از مراحل ابتدایی برنامه‌ریزی داشته‌باشیم و در پایان، در نتیجه‌ی کار ما هم تاثیر خواهدداشت. بعلاوه باعث می‌شود تا در زمانی که باید همکاری داشته‌باشیم، گوشه‌گیر باشیم یا کارها را زمانی که نیاز است جدی بگیریم، آسان فرض کنیم یا مجبور می‌شویم به پایان راه فکر کنیم درحالی که هنوز راه ادامه دارد. خلاصه، زود تجسم کردن انتهای راه، باعث جلورفتن اشتباه فرایند و تولید نادرست می‌شود.

ما واقعا هیچ کاری به درست کردن این مسئله نداریم زیرا این مشکل از ریشه، مسئله‌ای روان‌شناسی است که با کلمات نمی‌تواند اصلاح شود. این مسئله بزرگتر از آن است که ما بتوانیم اصلاحش کنیم زیرا علم ما برای این کار کافی نیست. پس تغییرات این واقیعیتی که گفتیم را ندیده نگیرید و ما تنها چیزی را توضیح دادیم که می‌توانست برای شما مفید باشد؛ برنامه‌ای گام به گام برای توسعه طراحی وب. این را باید در نظر بگیرید که هیچ برنامه‌ای بدون طراحی مناسبی پیش نخواهدرفت. همانگونه که جنگ میان انسان‌ها، بدون استراتژی مناسبی پایان نمی‌یابد. اما این را باید بدانید که ما بیش از نیاز شما، توضیحاتی در این زمینه ارائه دادیم و طراحی وب را برایتان آسانتر کردیم و به شما فهماندیم که چه کسی چه کاری انجام دهد و چگونه و چه زمانی آن را تمام کند.

بهرحال شما انسان خوشبختی هستید زیرا توضیحاتی که ما ارائه خواهیم داد، توضیحاتی کامل و جامع در مورد چگونگی انجام کارهاست.

برنامه‌ریزی (Planning) فرآیند توسعه وب

منظور ما از برنامه‌ریزی، زمانی است که افراد فاکتورهای موجود در یک پروژه را همسان می‌کنند.

چند نفر را دور میز و نزدیک تخته وایت‌برد در حال مذاکره در نظر بگیرید. چیزی که در آنجا اتفاق می‌افتد این است که این افراد، مشتریان خود را دور میز جمع می‌کنند و تیم تحقیقات، با استراتژی خاصی، به آنان پاسخ می‌دهند و تخصص خود را در آن زمینه بیشتر می‌کنند.

در این مرحله، مخاطب شناخته شده‌است. استراتژی، پیشرفت کرده‌است و داده‌ها خلاصه شده‌اند. اینها راهکارهایی هستند که وب‌سایت را با محیط اطلاعاتی تطبیق خواهندداد. محیط اطلاعاتی به معنای سیستم مدیریت محتوا، ابزار مدیریت ارتباط با مشتریان و مدیریت شیوه‌ی بازاریابی است.

با این شیوه، گروه خواهدفهمید که این پروژه چقدر زمان نیاز دارد و چقدر هزینه خواهدداشت. تمامی این جزییات، در ادامه‌ی متن خواهندآمد.

webdevelopment-flow

این کار چند روز طول خواهدکشید که به فاکتورها بستگی دارد ولی ما آن را فقط اندازه‌ی پروژه می‌نامیم.

مشتریان برای این پروژه، هزینه (که همان کارشان است) را پرداخت می‌کنند.

نمونه‌برداری(Prototyping) اولیه فرآیند توسعه وب

بیشتر برنامه‌ریزی کنید. اما در این مرحله، بر چیزهای متنوع‌تری تمرکز کنید.

نمونه‌برداری اولیه، چارچوب بسیار مهمی است که معماری یک سایت را همچون تجربه‌‌‌‌‌‌‌‌‌‌ های کاربر، نشان می‌دهد. اجزای تعاملی (که مانند یک وب‌سایت، قابل پیداکردن است)، چیزی است که این شکل از چارچوب را بصورت سند درمی‌آورد که در تلاش است تا با استفاده از آمارها و صفحات چاپی، ارتباط برقرار کند.

نمونه‌بردار اولیه، فاصله بین سایت‌های نقشه‌برداری و لیست نیازهای تکنیکی را با اطلاعاتی غیر از علوم زیبایی‌شناسی از بین می‌برد.

اگر بخواهیم منطقی باشیم، باید بگوییم که رابطه بین نمونه‌برداری و طراحی، رابطه‌ی بسیار مبهمی است.

بیایید یکبار دیگر ترتیب نمونه‌برداری (prototyping) را با هم مرور کنیم.

ترتیبی که شما در آن نمونه‌برداری می‌کنید، ممکن است با چیزی که ما انجام می‌دهیم متفاوت باشد. برای روشن کردن این موضوع، ما این فرایند را در ۶ مرحله‌ی ساده تقسیم کرده‌ایم که  ممکن است بین ۶ تا ۸ هفته، زمان ببرد.

webdevelopment-flow-2

مرحله‌ی اول فرآیند توسعه وب

شناختن شیوه‌ی تهیه‌ و طراحی وب‌سایت با نحوه قرارگرفتن فهرست‌ها (menus) تا حد زیادی به هم مریوط هستند به طوری که همه آنها باید در دسترس کاربران و موتورهای جستجو قرار دهیم. باید در نظر بگیرید که چه نوع طرحی مد نظرتان است و چه نوع فهرستی قرار است ساخته شود. باید همه چیز را در نظر بگیرید. همه فهرست ها (menu) باید در بهترین جا و به آسانی کاربرن را به صفحه های مورد نظر راهنمایی کند.

دو پیشنهاد ساده برای این فرایند:

۱- شما برای معرفی شرکت خود نیاز به چند صفحه برای این کار ندارید. زیرا بیشتر نیاز مشتری در سایت، در قسمت کوچکی خلاصه می‌شود. قسمت‌های طولانی‌تر، ارزشمند هستند زیرا مشتریان از میان سخنانی که می‌خواهید بزنید، مطالب مهمی را درمی‌یابند اما این راه زمانی که در حال منحرف کردن توجه آنها هستید تاثیر ندارد.

۲- با انسان صحبت کنید!. یادتان باشد که شما در طراح طراحی و پیاده سازی یک سایت برای انسان ها هستید نه موتورهای جستجو. کسی که برای مشاهده‌ی وب‌سایت شما می‌آید احتمالا آنقدر زرنگ نباشد که شما فکر می‌کنید و به کسی نخواهد گفت که در سایت شما دنبال چه چیزی باشد. پس همه چیز را در نظر بگیرید و کاربران را به راحتی به مسیرشان هدایت کنید.

مرحله‌ی دوم فرآیند توسعه وب

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

مرحله‌ی سوم فرآیند توسعه وب

این مرحله، به مرحله‌ی قبلی شبیه است ولی بیشتر روی صفحاتی تمرکز دارد که قرار است اطلاعاتی را در اختیار کاربران قرار دهد؛ صفحاتی که بخاطر جای دادن محتوای حمایتی سایت، باید روی آنها، دقت کرد.

محتوای حمایتی محتوای بسیار مهم سایت هستند که برای پیشبرد استراتژی کانت شما استفاده می شود مطالبی مانند: اخبار ویژه، مقالات، مطالعات راهبردی، فیلم‌ها، وبلاگ‌ها و… می‌باشند). شما تا الان، در مورد اینکه کدام مطالب، برای سایتتان مناسب است، تصمیم گرفته‌اید و قادر هستید تا شیوه‌ی ماندگار خود برای ارائه‌ی این مطالب را انتخاب کنید. انتخاب یک منبع موثق، می‌تواند در این قسمت، تعیین‌کننده باشد که در مرحله‌ی چهارم، آن را توضیح خواهیم‌داد.

هنگامی که این مطالب در نمونه‌برداری اولیه (prototype) شما هستند، لازم است تا در مورد آنها فکر کنید که چه امکاناتی را می‌خواهید برای کاربران خود ایجاد کنید؟ و در قبال آن، از آنها چه می‌خواهید؟ این سوالات مهمی برای پرسش هستند که پاسخ‌دادن به آنها باعث می‌شود تا در انتخاب محتوای سایت، تصمیم راحت‌تری اتخاذ کنید. به محض اینکه این تصمیمات گرفته شد، ممکن است شما بتوانید رابطه‌ی خود با مشتری را، برای زمان طولانی‌تری ادامه دهید که بستگی به این دارد که آیا شما در حال برقراری ارتباط با کاربران خود  هستید یا نه؟

مرحله‌ی چهارم فرآیند توسعه وب

مقداری دست نگه‌دارید تا بر روی محتوایی که می‌خواهید بوجود آورید و اینکه چگونه این اطلاعات ابزارهای جستجو را حمایت می‌کنند، فکر کنید.

دو مثال ممکن است در اینجا کاربردی باشد:

۱- تگ‌های ابری (Cloud Tags) در گذشته، کاری مُدرن بود اما بعدها فهمیدیم که فرصت‌دادن به آنها، سیستمی که کاربردی است را ضعیف می‌کند. برای نخستین بار آنها را “ابر” خواندیم ولی کسی نمی‌دانست که به چه معناست. بعدها به وجود اطلاعات تکراری و غیرضروری در آنها پی بردیم زیرا هرگاه که پستی را منتشر می‌کردیم، برچسبی، متفاوت به آنها می‌زدیم. اما این مطلب همچنان وجود دارد زیرا هنوز به محتوای سایت ما قدرت می‌دهد به این منظور که اگر شما در حال مطالعه‌ی پست‌های مربوط به برندها می‌باشید، این مطلب به شما نشان می‌دهد که ۵متن دیگر در سایت هست که یک برچسب مشترک دارند. این کار مطالب موجود در سایت را به‌روز و مرتبط با کاربر نشان می‌دهد. فراموش نکنید که در این مرحله شما نیاز به محدودکردن مطالب خود دارید اما بجای این کار، پیشنهاد ما این است که در مورد تگ‌کردن اسامی مختلف قبل از شروع انجام کار فکر کنید.

شما ممکن است لیست جدا و کوتاهی از دسته‌بندی‌های موجود در سایت بعنوان فیلتر داشته‌باشید که در اینجا هم باید در مورد دو مرحله‌ی قبلی تصمیم درستی بگیرید.

۲- آیا تولیداتی برای فروش دارید که مشخصات خاصی روی بسته‌بندی‌شان داشته‌باشند؟ اما این ویژگی‌ها بهتر است بعضی وقتها متفاوت توضیح داده‌شوند تا جستجو راحت‌تر شود. مثلا اگر قصد فروش یک پیراهن با پنج رنگ مختلف دارید، غالبا با تصاویر در صفحه‌ی جزییات محصول، دیگر نیازی به گزینه‌ی رنگ‌ها نیست اما رنگ‌های مختلفی مثلا (آبی، قرمز، سفید، خاکستری، مشکی و…) نیاز دارند تا با موتورجستجوی سایت و داده‌های موجود در سایت تطبیق داده‌شوند تا مشتری بتوانددر قسمت جستجو، رنگ قرمز را تایپ کند و محصولاتی را پیدا کند که در توضیحاتشان کلمه‌ی “قرمز” دیده می‌شود یا قادر به یافتن محصولاتی به رنگ قرمز باشد. دیگر مواردی که ممکن است که نیاز باشند تا قابل جستجو باشند، اندازه، وزن، موادسازنده و… با‌شند.

webdevelopment-steps

مرحله‌ی پنجم فرآیند توسعه وب

این مرحله فقط روی صفحه اصلی (خانه) سایت شما متمرکز است. از آنجایی که مطالب موردنیاز سایت خود را به دست آورده اید، باید اولویت‌های خود را مشخص کنید تا صفحه‌ی اصلی را راحت‌تر طراحی کنید. این صفحه نمی‌تواند همه چیز را شامل شود. هرچه مطلب بیشتری در خانه‌ی وب‌سایت قرار دهید، نشانگر این است که شما اولویت‌های بیشتری دارید. اگرچه ما درمورد دیگر صفحات سخن گفتیم اما فکر می‌کنیم که هنوز هم صفحه‌ی اصلی اهمیت دارد. شما باید بتوانید مطالبی آماده کنید که در ثانیه‌های ابتدایی مشاهده‌ی وب‌سایت توسط مشتریان، آنها را جذب کنید که اینکار نیاز به اولویت‌بندی صحیح شما دارد و اگر اینگونه اقدام نکنید، ممکن است آنها را برای همیشه از دست بدهید.

مرحله‌ی ششم فرآیند توسعه وب

این مرحله، فرایند حسابرسی است. در این مرحله ما باید بدانیم که کدام یک ار سیستم های یکپارچه سازی را دراختیار داریم مانند ابزار ایمیل ،CRM ابزار خودکارسازی مارکتینگ و درگاه هایی پرداخت که تمام این ابزارها باید بروی سایت پیاده سازی شوند. اغلب، یکپارچی باعث عملکرد بهتر در طراحی سایت را فراهم می‌کند. موضوعی که در مراحل قبل در مورد آن صحبت کردیم اما در این مرحله، تمامی منطق‌های نامشخص، باید نشان داده‌شوند.باید تمام جزئیات این ابزار ها و نحوه اتصال آنها به سایت به صورت مستند یادداشت شود. این مرحله ذخیره‌ی اطلاعات ورودی بازدیدکنندگان را نیز شامل می‌شود. پس با این اوصاف این مرحله کمی خسته‌کننده به نظر می‌رسد ولی بسیار مهم و ضروری است. در این مرحله با استفاده از ابزار های رایگان مانند Google Analytics می توانید انجام دهید.

طراحی بصری

ما گفتیم که طراحی بصری ممکن است پیش از نمونه‌برداری اولیه انجام شود. ما این مرحله را نیز با نمونه‌برداری اولیه آغاز می‌کنیم البته بغیر از استفاده از اطلاعات متون و رنگ‌ها که جلوه‌ی سایت را تشکیل می‌دهد. پس بنابراین به این دو مقوله، بعنوان طراحی نمونه‌برداری فکر کنید. همانطوری که ممکن است تصور کنید، این اسناد می‌توانند در نگاه اول شبیه صفحه‌وب باشند ولی با نگاهی دقیق‌تر، در خواهیدیافت که چیزی شبیه به هنر کلاژ (هنر اختلاف رنگها) می‌باشد. این نمادها زمانی استفاده می‌شوند که نشان دهند که چگونه اجزای سایت با انسان‌ها ارتباط برقرار می‌کنند در حالی که نمونه‌برداری هرکس، بر اساس اطلاعات و ساختار ساده‌شده توسط هنر زیبایی‌شناسی ارائه می‌شود. همچنین از روی برند و شیوه‌ی طراحی یک وب‌سایت برای یک محصول می‌توان به احساسات هرکس پی برد که تمامی این نتایج، بر اساس تحقیقات انجام‌شده در علم زیبایی‌شناسی است.

اگر قصد ساده‌سازی صفحات سایت خود را دارید، می‌توانید با استفاده از جداسازی مطالب مختلف، این کار را انجام دهید.

اگر زمانی ارتباط احساسات و نمونه‌برداری در طراحی سایت‌ها به اثبات برسند، نگرش و احساس بکار رفته در ساختار آن نیز، تایید خواهدشد. این مسئله، همان چیزی است که ما را برای دیدن اطلاعات در سایت‌های مختلف علاقه‌مند می‌کند. سایت‌هایی موفق‌ترند که طرح آنها با خواسته‌های بازدیدکنندگان تطابق بیشتری داشته‌باشد که این مسئله بیشتر نیازمند مرور چندباره‌ی مطالب و طرح اعمال شده بر روی سایت است.

webdevelopment-steps-2

تولید

بلافاصله، پس از اینکه نمونه‌برداری و طراحی به پایان رسید، می‌توان تولید را آغاز نمود. این قسمت نیازمند مهارت برنامه‌نویسی است.

برنامه‌نویسی فعالیتی نیست که انتظار دخالت مستقیم در آن را داشته‌باشید زیرا در این قسمت کارهای تخصصی انجام می‌شوند. کارهایی که برنامه نویسان و شما با هم در مورد تمام جزئیات صحبت می کنید و باید تمام اجزائی که در زمان نمونمه برداری (prototype)  انجام داده اید را پیاده سازی کنید.

پس تولید، مرحله‌ای است که برنامه‌ریزی و طراحی ما به مرحله‌ی اجرا درمی‌آید که شما از این مرحله، می‌توانید بعنوان راحت‌ترین قسمت کار یاد کنید اگر تمام موارد را در نظر گرفته باشید و تمام جزئیات را برای برنامه نویسان توضیح داده باشید و در عین حال همه چیز مکتوب باشد تا بتوانید به آنها رجوع کنید. این عمل باعث می شود دقیقا همان چیزی که انتظار دارید ساخته شود.

بازتاب

بازتاب یا بازخورد، که بعنوان اطمینان کیفیت نیز شناخته می‌شود، به دلیل و کسی که آن را ذکر می‌کند بستگی دارد و به این حیطه، برزخ مشتری و تولیدکننده می‌گویند. منظور از برزخ، اصطلاح عامیانه آن نیست بلکه منظور مدت زمانی است که ما برای نظر بعدیِ از سوی مشتری، منتظر پاسخ وی هستیم.

اگر در این راه با شکستی مواجه شدید، دلیل آن می‌تواند طولانی‌شدن زمان برای انجام این فعالیت باشد که دیگر برای شما هیچ اهمیتی ندارد که چقدر برنامه‌ریزی خوب بوده یا طراحی خوب بوده یا برنامه‌نویسی خوب بوده‌است. البته شما نباید به این مسائل توجه کنید زیرا همیشه چیزهایی بوده‌اند که شما را ناامید کنند ولی باید آنها را نادیده بگیرید.

هیچ وب‌سایت فوق‌العاده‌ای وجود ندارد به همین دلیل ما به طراحی وب‌سایتی بنام “زنده”، اشاره می‌کنیم. وب‌سایت زنده، وب‌سایتی است که پس از اینکه مورد بازدید قرار گرفت، به سرعت گسترش یابد. این نوع وب‌سایت، به ملاحظه‌ی دائمی نیاز دارد تا از هرگونه ویروس، ضعف طراحی، تغییرات اضافه و…، در امان باشد.

یکی از شگفتی‌های وب‌سایت این است که رابطه‌ی درهم‌آمیختگی نظرات میان طراح و کاربر ایجاد می‌شود که مانند برخی جنبه‌های زندگی‌هایمان، بسیار واضح و شفاف هستند. کار ما این است تا با مشاهده راههای مختلف، با شیوه‌ی مناسب شغل خود انطباق پیدا کنیم. پس انجام آزمایش‌های توانایی، راههای کسب درآمد را به ما آموزش می‌دهند زیرا این آزمایشات به این منظور طراحی شده‌اند. یا خلاصه‌تر بگوییم، بر اساس نظر آقای دیوید کلی (David Kelly)، مدیر و موسس شرکت IDEO :”شما تا چیزی را به دیگران نشان ندهید، به ماهیت آن پی نخواهیدبرد.”

پس الان دلیل پرسیدن نظر مردم را می‌دانید. قبل از انتشار سایت و ارائه‌ی آن به مردم، نیاز است تا آزمایشات کیفیت روی سایت توسط فردی که این کار را از ابتدا برعهده گرفته انجام شود. قسمتی از این آزمایشات به کاربرد سایت مربوط است که در تمامی سایت‌ها این آزمایش کاری رایج است ولی اگر این کار را با منطق خاصی انجام دهید، سایت شما می‌تواند منحصربفرد باشد. بعد از دریافت نظرات بازدیدکنندگان توسط طراح سایت، فرد ناظر سایت می‌تواند اشتباهات موجود در آن را برطرف کنند. بعلاوه، وب‌سایت نیاز دارد تا در تمامی نرم‌افزارهای جستجوی اینترنت مورد آزمایش قرار گیرد تا آنطور که مدنظر است، برای بازدیدکنندگان به نمایش دربیاید.

بعد از اینکه این اقدامات انجام شد، مشتری می‌تواند از سایت شما بازدید کند که خودِ این اقدام، راهکاری برای اطمینان خاطر از صحت و درستی انجام کار است. بعد از همه‌ی اینها، نظر آقای دیوید کلی (David Kelly)، اصلی برای تمامی افراد شریک در انجام پروژه است.

دلیل اینکه ما بر روی بازخورد نظرات تاکید داشتیم این است که نظرات دیگران می‌تواند انجام یک پروژه را سرعت دهد یا به کلی متوقف کند و دلیل شکست‌خوردن برخی مدیران، نااُمید شدن برخی طراحان سایت و از دست‌دادن صبر توسط برخی توسعه‌دهندگان، نیز همین مسئله است و کمترین نفعی که ما از این مقاله بردیم، این است که حداقل از موانع کار خود آگاه شدیم.

راه‌اندازی

راه‌اندازی سایت، لحظه‌ی کوتاه خوشایندی است. این کار نیازمند چند ساعت همکاری و مشاهده‌ی تخصصی است تا در آینده و هنگام مشاهده‌ی سایت توسط بازدیدکنندگان، مشکلی پیش نیاید. این تنها آغاز راه است. حالا عموم مردم شروع به بازدید از سایت شما می‌کنند که ممکن است هرچیزی را تغییر دهد.


پیروز باشید!
طراح باشی

درباره نویسنده

احسان عباسی

یک مهندس نرم افزار بلند پرواز و سخت کوش. عاشق یادگیری و انجام کارهای سخت.
همه چیز برای انجام کار محیاست فقط کافیست انجام دهیم.

نوشتن دیدگاه

برای نوشتن دیدگاه کلیک کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پربازدیدها