بایگانی دسته ی آموزش طراحی سایت

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

 

 

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

توجه *

تمام اطلاعا میکرو دیتا باید در بین تگی باشد که خاصیت itemscope را دارد.

<div itemscope ></div>

توجه کنید که این صفت داده ای را به خود نمی گیرد.

عنصر یا تگی که itemscope را به خود نسب داده است  . صفت  itemtype  را به خود نسبت می دهد که با استفاده از آن مشخص می کند که میکرو دیتا هایی که شما استفاده می کنید از چه نوعی هستند .

با استفاده از جدول زیر می توانید نوع میکرو دیتا های خود را مشخص نمایید

اما صفت دیگه ای وجود دارد که بیشترین کاربرد را دارد که کارش معرفی داده ها به گوگل می باشد. Itemprop  در مثال زیر دقت کنید :

<div itemscope itemtype =”http://schema.org/Movie”>
<h1 itemprop=”name”>Avatar</h1>
<span>Director: <span itemprop=”director”>James Cameron</span> (born August 16, 1954)</span>
<span itemprop=”genre”>Science fiction</span>
<a href=”/../movies/avatar-theatrical-trailer.html” itemprop=”trailer”>Trailer</a>
</div>

تگ ما دارای itemscope است و صفت  itemtype را به خود گرفته است که نشان می دهد داخل این تگ ما می خواهیم اطلاعات یک فیلم را برای موتورهای جستجو معرفی کنیم .( http://schema.org/Movie)

توجه داشته باشید  Avatar  نام برای فیلم است . چرا که itemprop=”name” می باشد. در اصل نوع داده در اینجا نام می باشد. تعداد مقادیری که صفت  itemprop به خود میگیرد بسیار زیاد است در زیر سه مورد از مهمترین ها رو برای شما نام می بریم .

Name
Description
Jobtitle
Author
Genre
Detail
….

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

در مثال بالا ما با استفاده از itemscope که itemtype  را به خود نسبت داد برخی از ویژگی ها را به تگ خود اضافه نمودیم اما می توانیم این ویژگی ها را بیشتر ، بیشتر کنیم تا اطلاعات زیادی را در خصوص محتوای خود به گوگل  یا هر موتور جستجوی دیگری بدهیم . به ادامه مثال توجه کنید :

<div itemscope itemtype =”http://schema.org/Movie”>
<h1 itemprop=”name”>Avatar</h1>
<div itemprop=”director” itemscope itemtype=”http://schema.org/Person”>
Director: <span itemprop=”name”>James Cameron</span> (born <span itemprop=”birthDate”>August 16, 1954</span>)
</div>
<span itemprop=”genre”>Science fiction</span>
<a href=”/../movies/avatar-theatrical-trailer.html” itemprop=”trailer”>Trailer</a>
</div>

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

توجه کنید استفاده از میکرو دیتا ها بسیار آسان است مثال زیر را ببینید :

استفاده از میکرو دیتا در طراحی سایت معرفی برای فیلم

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

</p>
<h1>Neil Patel</h1>

<h2>Video: Advanced SEO for Bloggers</h2>

<object …>

<param …>

<embed type=”application/x-shockwave-flash” …>

</object>

<p>An exclusive video with SEO and web marketing expert Neil Patel.

Drive ridiculous amounts of leads to your blog and learn the 7 secrets of conversion rate optimization.</p>
<p dir=”RTL”>

در ابتدا باید آنها را درون یک شی (عنصر div  )  قرار دهید . صفت itemscope را بهش اضافه کنید بعدش itemtype  را به آن نسبت دهید  لینک اسکیما ی مربوطه را برای آن بنویسید .

می توانید برای itemprop از خصوصیات زیر استفاده کنید

associatedArticle
bitrate
contentSize
contentURL
duration
embedURL
encodesCreativeWork
encodingFormat
expires
height
playerType
regionsAllowed
requiresSubscription
uploadDate
width

تا در نهایت کد پایانی شما بدین صورت می باشد :

</p>
<div itemprop=”video” itemscope itemtype=”http://schema.org/VideoObject”>

&nbsp;

<h2><span itemprop=”name”>Video: Advanced SEO for Bloggers</span></h2>

<meta itemprop=”duration” content=”T1M33S” />

<meta itemprop=”thumbnail” content=”neil-patel-video-thumbnail.jpg” />

<meta itemprop=”uploadDate” content=”2012-04-01T08:00:00-05:00″ />

<meta itemprop=”width” content=”640″ />

<meta itemprop=”height” content=”480″ />

<object …>

<param …>

<embed type=”application/x-shockwave-flash” …>

</object>

<p><span itemprop=”description”>An exclusive video with SEO expert Neil Patel.

Drive ridiculous amounts of leads to your blog and learn the 7 secrets

of conversion rate optimization.</span></p>

&nbsp;

</div>

با مقالات آموزش طراحی سایت وب نوش همراه باشید تا بهترین آموزش ها در زمینه طراحی سایت و سئو سایت برایتان ارائه نماییم .

مراقب این روش های طراحی سایت در سال ۲۰۱۷ باشید ! (بخش اول) آیا همبرگر منو ، پارالاکس اسکرولینگ و کامپلکس تایپوگرافی در طراحی سایت به ما کمک می کنند یا مانع کار هستند ؟
روش های طراحی وب سایت ، مانند برخی از همین روش های جدید ، دائما در حال تغییر و تحول هستند و وقتی روش جدیدی روی کار می آید ، روش های قبلی کم کم از میان کار می روند . گاهی برخی مدها نیز به دلیل کاربرد فراوانی که دارند تا سال های سال مورد استفاده طراحان و توسعه دهندگان وب قرار می گیرند ، مانند طراحی سایت ریسپانسیو . بعضی دیگر از روش های طراحی سایت در سال ۲۰۱۷ به دلیل تغییر مدل کاری صنعت طراحی وب از سبکی به سبک دیگری تغییر می یابند ؛ مانند تغییر روش کار طراحی سایت از اسکیومورفیسم (Skeuomorphism) به طراحی سایت فلت (Flat Design) .
تصمیم گرفتن برای اینکه از کدام یک از روش های طراحی سایت در سال ۲۰۱۷ برای ساخت سایت استفاده کنید ، بستگی به نیازهای کاربران سایتتان و کسب و کار شما دارد . نباید تنها بنا به این که چند سایت مشهور با یک مد و تکنولوژی خاصی ساخته شده اند و موفق هستند ، شما هم با همان روش و تکنولوژی سایت خود را طراحی کرده و بسازید . روش ها محو می شوند ؛ یعنی وب سایتی که تنها بر اساس روش های روز دنیای وب ساخته شود ، به سرعت تاریخ مصرفش به اتمام می رسد .
با در نظر داشتن مطلب فوق ، حال در ادامه این مقاله قصد داریم برخی از روش های طراحی سایت در سال ۲۰۱۷ را به شما معرفی کنیم که ممکن است برای وب سایت شما هم کارآمد باشند .

روش های طراحی سایت در سال ۲۰۱۷ : پنهان کردن همه چیز سایت در زیر یک همبرگر منو

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

 

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

 

 

همان طور که برخی نویسندگان درباره همبرگر منو در روش های طراحی سایت در سال ۲۰۱۷ نوشته اند :

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

افزایش بسیار زیاد جست و جوی کاربران در صفحه فرود یا لندینگ پیج سایت (landing page) برای یافتن محتوای مورد نظر :

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

آیا کاربران بر روی دکمه همبرگر منو کلیک می کنند؟

اگر اینطور نیست ، پس حتما یک جای کار اشتباه است . می توانید برای بررسی این موضوع و رفع مشکلات آن ، از ابزاری مانند CrazyEgg یا Usability Tools استفاده کنید .

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

استفاده از گردانه (Carousel) در صفحه اول سایت

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

گردانه ها برای سئو سایت بد هستند :

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

کاروسل ها بر عملکرد سایت تاثیر منفی می گذارند :

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

گردانه ها مشکل دسترسی دارند :

حتی بهترین فریم ورک ها و ابزار طراحی سایت نیز نتوانستند به طور کامل و دقیق مشکل دسترسی در کاروسل ها را حل کنند .
علاوه بر موارد فوق ، در گذشته ، سال ۲۰۱۳ ، تحقیقات نشان داد که تنها ۱% از کاربران بر روی گردانه ها کلیک می کنند تا تمام تصاویر و محتوای آن را ببینند .
تمام مطالبی که درباره کاروسل ها گفته شد به این معنی نیست که به طور کلی از آن ها در طراحی سایت نباید استفاده کرد ، بلکه باید به تناسب نیاز سایت و ذائقه مخاطبان ، با دقت به مشکلات این ویژگی ، آن را در سایت پیاده سازی کرد و از بروز مشکلات دسترسی و تجربه کاربری اجتناب کرد .
در بخش دوم این مقاله ، به بررسی سایر روش های طراحی سایت در سال ۲۰۱۷ که باید مراقبشان بود خواهیم پرداخت .

وب نوش ارائه دهنده ی ایده های نو در صنعت پشتیبانی سایت ، طراحی سایت و تجارت الکترونیک : با وب نوش وب را بنوش

مهم ترین کارهایی که برای طراحی UX (تجربه کاربری) در طراحی سایت فروشگاهی باید انجام دهیم

– کارهای توصیه شده برای افزایش میزان کانورژن فروشگاه آنلاین شما

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

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

نکات مهم برای طراحی UX در طراحی سایت فروشگاهی:

اولین تأثیر از اولین ورود بازدید کننده به فروشگاه اینترنتی شما

در طراحی سایت فروشگاهی ، اولین ورود کاربر و اینکه چه تأثیری از دیدن اولین نمای کلی از سایت فروشگاهی شما خواهد گرفت بسیار مهم است ، چرا برای آن ها بسیار راحت است تا به محض اینکه از فروشگاه اینترنتی شما خوششان نیامد به سایت فروشگاهی دیگری مراجعه کنند و محصولات مشابه سایت شما را آنجا بیابند .
پس ، برای صفحه اول طراحی سایت فروشگاهی نیازمند تمرکز و دقت بالایی در پیاده سازی آن داریم . باید در طراحی این صفحه طوری عمل کنیم که تفاوت و برتری فروشگاه آنلاین ما از سایر فروشگاه های مشابه اینترنتی مشخص باشد ، با ترکیبی از سادگی طرح و راحتی در دسترسی به تمام محتوای سایت برای کاربر و به ویژه آیتم های کلیک خور (CTA : Call to Action) سایت .

دسته بندی و فیلترکردن محصولات و استفاده از ابزار راحتی در انتخاب برای کاربران

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

تشویق کردن کاربر برای بازدیدهای مجدد از سایت از طریق طراحی یک برنامه دقیق برای محتوا

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

چند ترفند برای انجام این کار در سایت های فروشگاهی :

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

نشان دادن اعتبار بالای طراحی سایت فروشگاهی و جلب رضایت مشتری

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

دسترسی راحت مشتری به بخش خدمات فروش

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

خلاصه ای از موارد مهم ترین کارهایی که برای طراحی UX در طراحی سایت فروشگاهی باید انجام دهیم

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

جهت مشاوره رایگان برای طراحی سایت فروشگاهی، و همچنین پشتیبانی سایت های فروشگاهی میتوانید با تیم فنی وب نوش در تماس باشید…