Beginning Web Development
Part 2.A Wire-framing vs. prototyping: What’s the difference?
A wireframe is a web page layout that shows what interface features will be present on key pages. Whereas prototypes are more detailed, visually structured representations. Prototypes, allow users to evaluate the interface and interactions of a digital product, and this interactivity can be beneficial during application usability testing.
Image Credit: bluearcher.com
Even though wireframes and prototypes serves the aim of displaying the final product in web design, they do differ in several ways in terms of how detailed and constructed they display the product itself. While wire-framing is the skeletons of the product as they present the information which will be displayed on the page they only have low to medium fidelity, prototype are more visually progressed representation of the of the final product and they display medium to high fidelity. I personally do believe wireframes are significantly beneficial for the final mockup in the process of web design because it forms a foundation for prototype which will be the base of mockup later on.
2B - The 10 Most Common Web Design Mistakes
Design mistakes such as failure to have related Call-to-actions (CTA): Call to actions are clickable links/ buttons that gives the command of: confirm, cancel, sign up, buy, login etc. The buttons should be quickly identifiable, easy to notice and use for abetter user experience.
This was Humboldt County's official website previously, clicking on that CTA that says "follow the magic" transformed the website into a sort of choose-your-own-adventure game, which is an entertaining call-to-action path for consumers and motivates them to spend more time on the site.
Another mistake that websites may have is that the referred links in the site may be expired or crashed over time which may lead users to think that the website might not be reliable or relative to the recent news. Due to this very reason, user might have to move on some other sources for the desired information, which is frustrating and time consuming for the user.
On the other hand, I personally think that most important feature on the websites is usability and visual appearance. However, a site might be user friendly if it doesn't fulfill aesthetic needs and designed visually poor, its not gonna do it for me and the same thing goes for the visually pleasing yet poorly designed ones in terms of usability.
NNGroup term search
Seo & Usability
Seo is mainly about making your script compatible with how search engines work. With the right codes and lines, it is easily achievable to get better search results for the website designed.
wireframe drawing
Wireframes show page layouts, information structure, and even interactions, as well as a user route or flow. They can range in fidelity from rapid drawings to precise renderings of the final design, depending on their function. A wireframe may be sketched by anybody, regardless of their skill to draw, to explore various solutions to design difficulties. Step by step, using standard components to generate rapid, sloppy, but useful wireframes.
Part III - Analysing the UI
TU Dublin's official website's target users are: current students, student candidates and staff. Considering that, any user would simply expect a website, that is quick and easy to use, and more importantly a page that is target-related, especially while looking for course materials. the first feature that catches eye after the header is, news and events at the very main page, which I believe to be unnecessary. It can be said that the variety of information aimed to be given at the same page creates a complicated design. Since I freshly graduated from my bachelor's, I am not unfamiliar with student experiences on college's websites, yet I found TU Dublin's website to be overall complicated for the wrong reasons, if the website were to give necessary information instead of unnecessary ones, it would be a lot better.
The image at the left shows the very first design entering the website, as in single header, and as user scrolls down the first thing detected on the page is search bar and an advertisement for the upcoming events which I find overly irrational.
Overall, I do believe initially the website has a good design, yet it feels like website is expecting user to know about the interface already instead of leading the user with simple guides. The main information is hidden at the top under links whereas the advertisement is completely capturing the whole screen.
I believe youtube is an incredibly user friendly website, since its used by nearly every age group all over the world. My favorite feature in youtube is that as soon as you open up the website, you can immediately tell what the page is all about: videos. In the last 5 years it is insanely commonly used by children and elderly among adults, which indicates how easy it is to use the page. Even though I do believe they may have change their design for the better in the future, overall, considering user experience, it is pretty simple and straightforward.
Even though I believe udemy is a pretty easy website to use considering the user experience, some problems on the web design can be easily detected. As a first impression the design of the home page is all clear white which immediately feels like website has a lot to offer. On the other hand, pop-up informations through scrolls might be a bit disturbing for some since it may result in distraction, yet overall, it is safe to say udemy is pretty user friendly.
The analysis of 3 websites has been done with the help of Google Mobil Friendly test.
According to results all 3 websites have been found mobile friendly. The analysis also included the console messages from JavaScript, there was one message for TU Dublin, two for Youtuble and 6 for Udemy. There were also some problems in common with all 3 websites, page loading issues, for TU Dublin and Youtube the problem with loading was on two pages
The mobile checker also indicates where page loading issues arise. Page loading issues were identified across the three websites. 29 pages did not load for the TU Dublin site and 2 YouTube site. Udemy returned six page resources unable to load.
JavaScript console message counts are also included in the mobile-friendly test; 13 messages was returned for TU Dublin, two for YouTube and three for Udemy.
On the other hand, when checked with an IOS mobile device: I realized that even though TU Dublin's design was slightly more complicates whereas udemy was even more user friendly on a mobile device. I detected that Youtube is relatively the same.
According to the website's results udemy would be the most accessible one since it has the least number of errors. TU Dublin has several errors itself but the most number of errors was in youtube which I found suprising.
TU Dublin has contrast errors while youtube has errors and alerts,udemy has the least of all.
Seems like all websites highest score was on ARIA related to other fields.
Yorumlar
Yorum Gönder