UI Pattern Analysis
Fluid Navigation - Page Structure - Data Entry - Social Aspects - Dark Patterns
Home > Design Portfolio > UI Pattern Analysis
Analysis of websites in terms of:
Organisation
Fluid Navigation
Page Structure
Data Entry
Social Aspects
Dark Patterns
Dark Pattern Design
Youtube.com
First visit to Youtube.com without an account.
The organisation of “Where am I?” is clear since the Logg in is highlighted in the center area of “What is here?”. It includes a Logo that attaches the modal window to the darker opacity 50% background where you can see the layout and connect the logo with the company logo in the top left hand corner.
It connects the modal with the website instilling a sense of “Yes I am in the right place.” Same colors are used and to enforce the connection with the “Real world” they put a Key Whole in the Modal to emphasise that you need to open the door to get access even though you do not need that.
But then again, they will have a harder time tracking you if you do not have an account and thus not recommend videos to you which is one of the Dark patterns fo engage users to sell ad space.
The modal keeps it simple with three key information of what the user will gain if they logg in and then a link too somewhere to read more about it. So not too overload the user with too much information.
Unfortunately we see a Dark pattern in lower right corner in that the “No Thank you” is a grey link that does not indicate that it is link. More like a titel to the modal that is not something you can interact with forcing the user to the right of it which is an action button clearly indication what to do.
But the “Where am I?” is clear at the top with the logo to the top left and a well known meny with three horisontal bars that we all know to indicate here is more information. In the middle a prominent search field, with the word “Search” in it that indicates search for what you’re looking for and to the left up top there is firstly a video camera with a plus sign on it indication record video which is what YouTube is about and then indicators that there is more information hidden behind the other icons. To top it of there is another Login button (Data Entry) like the one in the modal window to enforce the action too logg in.
“Where can I go?” is located to the left hand side as menu. You have different categories that tells you what you can do on the platform. But interesting is how they enforce the “Home” function for those not familiar with the platform. So they have designed it to work for beginners and for savvy old Youtube timers. The social aspect is located in the left hand side with the ability to “Subscribe” which is a social aspect of the platform like commenting on videos and hitting the like or unlike button to express yourself through interaction and giving feedback.
Intuitive feedback when pressing the “No Thank you” to loggin in is a grey transparent circle that lingers a few milli seconds. The same grey is used for logging in on that button and it also lingers a few milliseconds to indicate that something is about to happen. Wonderful little detail. Same grey is used on all the category items a hover color. There are hover titels “Alt” to each icon and category for the disabled users.
Amazon.com
Page structure is well thought out. The Where am I? is at the top of the screen with the Logo top the top left indicating it is clickable when hovering over it with a mouse. The arrow changes to a pointing finger and the icon it self gets a white square around it indication there is an action hidden in this logo. It is big enough to comply with Fitts law.
Next to it to the right is the indication that the Amazon has already figured out which country you are in and helping you navigate to the closes amazon county which is in my case amazon.se.
As with Youtube, Amazon want you to spend time on the plattform and spend money so the search bar i large and starts with an indication that you can sort through different categories when searching. When clicking in the search bar the whole bar gets a Amazon orange/yellow border that is about 2 pixels thick so you know you just activated the search function.
Data entry:
When starting to type a word you get suggestions right away to speed up your search to find what your looking for or to entice you into something els. Search field is white compared to the background which is almost black. Gives it a great contrast ratio for people with disabilities with their eyes. To the very right of the search bar you will find the search icon that also lights up in orange/yellow when activated to enforce the message of doing a search. It is well thought out in that they sublimely motivates the user to search with slight hints in color that flashes when activating it. Gamification.
Fluid navigation:
To the right of the search bar you get a drop down menu where you can change language and currency in which you want to shop. Drop down limited to 10 items and a link to change country. A nice touch to increase the readability off the drop down meny and to focus on it they dim the rest of the page in darker color with an opacity. They makes you focus on the dropdown that way. Neat. To the right of that drop down you will find a “Fat menu” (with the same dimming effect for the website.
To the right of that fat menu Mega dropdown you find the “Returns & Orders” menu which is a Dark Pattern. The dimming of the website is gone and there is only a white border around it and pointing hand. Not to draw too much attention to returning items but to keep shopping. At the far right of the top bar you will find the shopping cart where we all look for it. There is no function in highlighting a shopping cart since that is the main purpose of shopping and it is deeply ingrain in all of us what a shopping cart stands for these days.
Page Structure:
Underneath the main top bar you will find the fluid navigation in 5 different categories and a menu to the far right which neatly pops out in a white background and the same almost black color as titles of the categories.
There are only 11 items that you can go further into to with arrow pointing to the right indicating that there is more to them and underneath each section there are “See All” menus that takes the user even deeper into the page structure. You can of course scroll down further to reveal “Help & Settings and once again get the notification which countries Amazon you're in.
You can also “”Sign in” in contrast to “Log in”. I am wondering if they are using “Sign” as an indicator for buying things since you “Sign” a lease or a contract. There is money involved.
The page structure enforces that a good design with the centerstage showing large images nicely laid out in a Gestalt manner, proximity and connectivity to help the user navigate and search for items to buy. Cognitive load is kept to a minimum.
Social aspect:
If you scroll down you will find a horisontal section that shows the Top Sellers to instill the social aspect of shopping.
Dark Pattens:
Well if you click on a product you will go the product page. here everything is focused not to question the item but to put it in the shopping cart or buy it straight up. Yo see that in the link to the seller of the product which is found under the product title in minuscule font size and obscuring it in a written sentence thus to indicate that is simply a link to somewhere bit do not pay too much attention to it. They have work on a number ot colors to shift focus on important things like red color for actual Price it will cost.
Grey color cost that is within the total cost like shipping and import fees. Using a looked secure icon to instill that it will be safe to buy the product from them. When putting an item in the shopping basket they ask if you want to proceed to the checkout and make your purchase and if you do they then force you to make an account to be able to buy.
This is a dark pattern in that EU is not supportive of this since you should not collect information about users just because they want to make a purchase from you. They sometimes also give you an alternative to buy amazon prime with an auction button to do so and next to it a link saying “No thanks” in font size 11.
Nike.com
Organization is concision in color usage and with a top navigation bar telling the user where they are and where to go. They use where to go in a top menu instead of the left hand side. Works just as well since they have focused on a fluid design with seven major categories that drops down in to mega menus.
They also dim the background with an grey color that has transparency to draw the users attention to the menu it self for quicker use. The search field is smaller. But when you activate it, it flings in to the center top of the screen and gives you an social aspect of shopping showing you what others have been searching for. Once again dimming the rest of the screen in the transparent grey.
When you click on an item it restructures the page and layer out the common where can I go structure to the left side of the screen (Organisation). There you see a flexible design with progressive disclosure where you make selection so that you will be shown the items that fits your selections or you narrowing down on what your looking for.
Selecting an item gives you the opportunity to like the product (Social aspect), putting a feeling to something to connect to it more.
One the checkout page yo will find in center stage (organisation and page structure) an alarming color orange/reddish to draw your attention to it that if you join Nike or log in you will not have to pay for shipping which of course is a Dark Pattern they are using to get more information about the user they really do not need to sell this product. They have simplified this section in that you can buy with PayPal as one choice or ordinary checkout as the other option.
If you choose the other option (not Paypal) you will be presented in center stage with two options 1. Log in or 2. Purchase as a guest (no data collection. It is still a dark pattern since they put log in as the first option, which is intentional and the no collection of data as the second option. They have made it easy to call them by using a negative space design so that you easy can pick up any information on the page such as the Phone number up in the right hand corner underneath the shopping cart.
BBC.com
Organisation is standard on bbc.com in that top navigational bar is there with the logo to the far left sign in to the right of that nine categories in a fluid design pattern with a more as the 10’th option next to last item which is the search field.
Dark patten:
Once again just like with YouTUBE.COM we sew a dark pattern in that signing up is an action button with high contrast to the rest in the modal drawing attention to be clicked and a simple link to Opt-out of the option. Says a lot about them as a news site even though their layout is Gestalt proof. Clicking the Maybe later link the modal disappears and you're presented with the entire webpage.
Bad UI design on the links in the fluid category menu in that the only indication is a 2-3 pixies boarder in different colors that indicates different sections. Implies that the user will learn or knows which color is connected to each category which I presume is bad attempt at overloading and teaching the user their design.
I have read their page for years and still can’t connect the color with the section. However the border color is the same for the category sections color which is a good coherent page structure design. Same color for the category titles. Each section are nicely structured with usage of proximity, negative space, section titles with borders dividing content in to sections to quickly get a sens of structure and symmetry.
Social aspect
Social aspect is there with the “Most Watched”, “Most Read” and “Find Us” section that point towards social applications as their presens on Twitter, Facebook and Instagram instilling the social presens of their news.
Fluid design.
Once two lanes down from the first blue modal sign in page yo get to a category page which has a top navigation and a category navigation located in the top bar and not at the left as where can I go. It works just fine.
Page structure
Page structure is the same for all menu items like categories in that they all have the same thickness of underlying border in a particular color that is assigned to that particular category.
Search field
Search field is prominent ant highlights with a turquoise border when you activate it making the data entry easier. Bad design is that there is no suggestions or auto correct in the search field.
Pega.com
PEGA, low code CMS, delivers a platform where you can build applications where you can reuse parts to speed up delivery. As I am going to start a UX Design job on a PEGA platform this is a good example.
Dark Pattern:
Accept cookies with a green action button instilling a sense that it is ok to give up information. The Opt-Out is once again a simple link to make it harder to opt-out. To be even more annoying to the user it confirms the action with another modal which is useless in this regard since you either know what you just did or get infuriated for being tricked in to doing just that.
Fluid design
Organisation is a top menu design (fluid design) with less than 8 categories that drop down as mega menus for further exploration( Progressive design). No dimming effect on the background that we find on shoping sites for the user to focus better on the menu.
Bad design is the search icon that is not very prominent and shows hardly any effect when hovering over it that it something you can interact with. Lastly you find the action button “Try Pega” and the only hover action is a slight lift of the button increasing the shadow. Logo to the left top as usual and most common.
Page structure:
Same colors for links and titels and same effects on buttons and clickable images. Lift and shadow. No left hand side meny (Where can I go?). Bad UI when it comes to the hover effect for links on the website.
Data entry:
No autocorrect or suggestions in the search function. It can’t even locate Pega Cosmos which is where the disengagement part resides within the Pega Platform.
Organisation:
Where am I section on top with logo to the far left. Five categories centered about the center column of the page and then more categories regarding the user to the right in the top bar. Helps the user find its bearings within facebook since they are always there. Where can I go menu to the left. Where am I in the center stage.
Page structure:
Same color on category icons. Same gray transparent hover background on each actionable element
Fluid navigation:
Drop down menus on the top left categories related to the loged in user.
Social Aspect:
The red dot indicating in the top left icon that there has been activity with my content from my friends on the platform making it easier for me to pay attention to it when there is something happening or has happened since last time I looked.
Data Entry:
They have med it fairly simple too ad new things in the center stage. As soon as you hover over the field that has a hint to what to put in it "What's on your mind, Joakim?" (Social aspect) which is a conversation between me the user and the platform reducing the anxiety fo sharing information freely. When hovering it implies even more that it is a field you can do something with. As soon as you click it you get a modal popup and dimming the rest of the screen in transparent white telling me the user that I am still on the page but I should fokus on inputing information. It Hints with the same sentence once again repeating the question if I am hesitant in writing. This helps me share things.
Dark Pattern:
Everything is gamification and used to sell ads. Facebook shows recommended ads in the same way as content from friends and other brands that you have chosen to follow so that you click on it. Facebook can then target you with more of the same ads and thus make a profit selling more ads.
Twitter:
Organisation:
Different design in that it is not traditional all the way. Logo on the top left with a three part second in the top menu bar (Where am I?). In the middle you find the Title/link "Home" and to the right with a hint"Search Twitter" the search field. The left column being the "Where can I go?" category meny part.
Fluid Navigation:
The menu is the left column and it never changes so that is in Twitters case the Where Am I? bar in difference to most others where the top bar serves as that function. It disorients a bit.
Page Structure:
Three column page structure with same blue color on buttons, links, borders and logo. No hover effect besides the shifting arrow to pointing hand.
Data Entry:
Suggestions in the search field.
Social Aspects:
You can follow other people making tweets. You can get notifications from those you follow since last time you were loged in.
Dark Patterns:
Cookie bar is simply telling you they collect data and you can not opt-out of ot. It is placed to the bottom in an obscure way in grey and tiny font to not draw any attention.
Ebay.com
Organisation:
Standard organisation with top navigational bar (Where amI?) with logo to the left and search in a prominent place in the middle. To the left in the progressive design the where can I go but that is also situated in the top manu bar around the search field.
Fluid Navigation:
Progressive design in the dropdown menu and Mega menu system.
Page Structure:
Progressive design in the two can narrow down your target in the left hand side menu and progressively see better targets. There are navigational breadcrumbs which helps me know where I am in the structure once I dive down in the progressive design. Gives me a sense of control and whereabouts.
Data Entry:
No autocorrect or suggestions when using the search field which doesn't help me.
Social Aspects:
I can like a product on the page so that I can come back to it later and I can share product pages on social platforms like twitter, facebook etc.
Dark Patterns:
Some links in the top bar do not hint that they are actionable in that some get an underline and som do not which is a deliberate inconsistency in the design. Furthermore, they hint that they collect cookies and make it hard to not accept them collecting cookies.
Who.int
Organisation:
Top navigation with drop down mega menus. Footer at the bottom with more navigation.
Fluid Navigation:
Breadcrumbs are used as well as mega menus with integrated "where can I go?" menus within them as on the left hand side within mega menus. One unnecessary interaction is required to make the Mega menus open up which not necessary for the user. It annoys. On some pages they have this obscure extra menu on the left hand side that has bad contrast and give the wrong signal of what it is.
Page Structure:
Three page levels and breadcrumbs helps because the sense of disorganisation gets to you quickly. Not a coherent structure and there are different layout structures on many pages that makes it confusing and hard to learn. Bad structure when it comes to the obscure navigation bar that is found on some pages to the left in a box and not on other pages. Give the wrong signal of what it is. You can find more and more disorienting page structures when you dig through the site. You find categories in other forms to the right of center area as tickets in some cases :). Wow.
Data Entry:
Search field activates and becomes a field once you click on it and it has suggestions once you start typing to help you out. Good contrast.
Social Aspects:
There is options to share the pages on the bottom and within some pages to social websites.
Dark Patterns:
Could not find any. Then again they do not sell things. They simply inform.
Folkhalsomyndigheten.se - FHM
Organisation:
Top menu system for where you are. logo to the left which takes you to the homepage and is larger enough.
Fluid Navigation:
Four main category system whit out mega menus or drop downs. The left hand side menu system opens up in a different unusual way but sesames to work after you get the hang of it. Fairly easy to learn.
Page Structure:
Breadcrumbs and a solid hierarchy of the website. Progressive design in that the left side of the page opens up as a new menu with more categories within on of the top four categories in top main menu. It progressively opens up in more alternatives as you dig deeper.
Data Entry:
Search field give autocorrection and suggestions which is good.
Social Aspects:
There are sharable link icons to facebook near the bottom of the pages.
Dark Patterns:
As a government agency in Sweden they simply tell you that they collect your data and you can't opt-out of cookies down at the bottom of the page in a light grey bar with the action button that you understand.
Wikipedia.org
Organisation:
Logo to homepage top left which is standard. Category menu to the left side of the webpage and to the top right log in and other personal settings. Center area are tabs.
Fluid Navigation:
Tabs to navigate on the centre area (the content). To the left you have progressive navigation to dig deeper and in center area you have more navigation in a box after the main information about the subject.
Page Structure:
On layer style where the menu’s never change and you simply change the center area with tabs. Same color and link color and effects.
Data Entry:
When you want to edit a page you simply tab to that section and you can choose from two different ways of editing the information using a built in editor. Autocorrect is present.
Social Aspects:
There are social categories to the left where you can see who contributed with what etc.
Dark Patterns:
Could not find any.
Cnn.com
Organisation:
Top menu system with logo to the left top. Same on all pages. But the top bar changes color when you dig down which confuses in the beginning. On the top menu to the far right you find the search and menu icon as three horisontal bars. The open up the same mega menu which is a bit unnecessary. Not well thought trough. Top menu bar changes in each category confusing the user and the only way to come back is with the logo.
Fluid Navigation:
No. There are changed out menus and categories up top but that only confuses and there are no breadcrumbs so you do not know where you are.
Page Structure:
You have to click on the X at the top right when you want to close the mega menu for the menu up top as with the search mega menu that is the same. Annoying and doesn't help. Not very fluid navigation. Fitts law is not uphold here.
Data Entry:
Autocorrect and suggestion are absent in the search field.
Social Aspects:
There are sharable icons to social plattforms at the bottom but not much on the centerstage as in others have watched this etc. Though they have Top Stories.
Dark Patterns:
Cookies section i better than average in that it is prominent when you get to the website and the rest of the website is dimmed. But still they have an action button that is prominent for Opt-in and a simple link to look further how to Opt-Out. The hide ads in the same titel structure and same color so that the user doesn't notice it is a paid ad.
Foxnews.com
Organisation:
Top main menu and sense of where you are. It states the same where ever you are on the website which helps me know which website I am on but not where in the structure.
Fluid Navigation:
Not very fluid. There are categories on the top bar but then there are more on the first page further down as images. When you click them it is confusing where you are in the structure and you have to go back to homepage to find the structure again.
Page Structure:
Confusing page structure in that you have to go back to homepage to start over again since there are no breadcrumbs or left menu for categories that only exist on homepage further down the website.
Data Entry:
No auto correct or suggestion in search field.
Social Aspects:
Hot topics in the top bar that suggests others likes that and that instills some social aspect of the news in that other like it to.
Dark Patterns:
A black small obscure bar with text that is passively accepting their terms and conditions simply by using their website.
DN.se
Organisation:
Top menu bar design with logo to far left to homepage. The menu follows when you scroll which helps yo navigate.
Fluid Navigation:
Main navigation give a hovering underlying border in the title in the same color on every underlying page in that category. sam background color and same menu color. Same effects. No surprises.
Page Structure:
Same ticket style for all news with title and summera for progressive disclosure. A major annoying ad on every page in your face in center area.
Data Entry:
No autocorrect but there is a well thought out design for suggestions.
Social Aspects:
Sharing icons on every page to social media. Other than that not very sociable news.
Dark Patterns:
After choosing amongst the different regons in sweden to better target what type of news you want you get another modal with the question to pay for subscription. The first action button in green to opt-in and the second with simple border to Opt-Out. Same dark pattern for cookies.
Cosmopolitan.com
Organisation:
Same solid structure with the anchor menu at top in the menu icon to the far left and then logo to home page. Menu pops out the Where can I go category system for you to choose from. When you make your choice the menu disappears and your presented with different tickets of sectioned information followed by an image in the same large size as the text to the right. But for me as the user I have a hard time connecting the image to the text. They missed the Gestalt law of connectivity. They should extend the borderline underneath the images to the right.
Fluid Navigation:
Simpel design that is in some way progressive but Fitts law becomes a problem when missing to click directly on the smaller menu icon and instead clicking on the logo taking you to the boring homepage with a huge image instad of the category menu.
Page Structure:
Same colors and effects. Same menu style for the whole page.
Data Entry:
There is no search only the hidden section of opting out from them selling your data to third parties. But it is hidden way down at the bottom of the menu that you need to open up and scroll down. They have also made it obscure in that there is text coming up inside the button that tries not to be a button to make it even harder to opt-out. But when you click on it you get a whole new page where you can read about opting out and when you try till fill out your name you do get autocorrect and autofill which is good.
Social Aspects:
There is not much social aspect indicated on the website other than links to their social accounts.
Dark Patterns:
Standard confusing cookie modal in the middle with a large chunk of text implying to hard to read through and then the action button to opt-in and accept the harsh reality or click the more obscure link to read more and not how to opt-out.
UN.org/en/
Organisation:
Top menu bar with logo to the homepage to the far left. large enough. Center design for the whole page. No left hand menu.
Fluid Navigation:
Tab menu dropping down in horisontal menu instead of dropdown once you have clicked on one menu category. It only opens up once you have gone from the homepage to one category which is a bit odd. New approach to reduce space I guess. No prominent logo on the centered search page confusing how to get back to homepage.
Page Structure:
No hover effects to indicate things are clickable or have any action which hinders at first. But you quickly get used to the changing arrow to pointing hand. Some pages have a left hand column to display even more information of current things. but not all. A bit confusing.
Data Entry:
No autocorrect or suggestions when searching. Font size nearly readable in the search field making it har to read and correct. Bad design. Once you have clicked to search you get a center design search page where progressive disclosure is prominent and you can sort and limit your search immensely. Feels a bit overkill. If you design for that magnitude of searching then it would suggest that there is a lot on the page that is searched for and there fore the search should be more prominent on the home page and in the top menu like on Youtube etc. And so I find that it is a prominent function sort of hidden since they market that there are 4,361,955 documents on the webpage to search through.
Social Aspects:
Can hardly find anything sociable. Tiels are not very inclusive indicating social aspekt. It is more about UN and not interaction There are some hints such as ActNow.
Dark Patterns:
No indication of storing any cookies. You have to scroll down to the footer navigation and click in to Privacy Notice where they simply say they store it and not any way how to opt-out.
Riksdagen.se (Swedish government)
Organisation:
Center design with top menu with logo larger to the left as link to homepage with the first menu category "Start" referring to homepage.
Fluid Navigation:
The menu is solid and no underlying menus. They have instead opted for additional anchors on the pages to quickly navigate too. Anchors situated near the top of the page that is visible when you open the page. Breadcrumbs to give a sense where you are. Additional categories to the right hand side of the pages in some instances.
Page Structure:
Same colors on titels and hover affects.
Data Entry:
No autocorrect or suggestions in search.
Social Aspects:
Social links at the bottom of the website. nothing other than that.
Dark Patterns:
No opt-out for cookies just a link to how they store cookies in the footer and how to delete cookies in the browser yourself.
Bloomberg.com
Organisation:
Top menu design with logo in the middle and menu and search to the top left and settings at top right. Size of logo changes on the pages which confuses to begin with. It becomes way to small for me and doesn't comply with Fitt's law.
Fluid Navigation:
Navigation is not consistent and it gets confusing. Footer hardly visible from the background once you get to the bottom. Menu on the first page is in the top area where you are. But that changes once you move one level in to the structure. then the menu is only to the top left that pops out from the left hand sida and is much larger than on the homepage. It doesn't even have the same menu anymore. The pop out menu is easy to get rid of just by clicking on it. There is progressive disclosure of information in the menu section.
Page Structure:
Pages contains information up top and then ads to the masses underneath. Different layouts through out the the webpage.
Data Entry:
No autocorrect in search field but suggestions are there.
Social Aspects:
None what I can find.
Dark Patterns:
Modal to accept or manage cookies. They have however done it more right here. Same button for both choices and when you manage the cookies you have a button to reject all cookies. You should be able to reject or accept to begin with and that is why it is a dark pattern.
Businessinsider.com
Organisation:
Centerline structure with menu up top to the left and then search icon. Logo to homepage in the center up top and Login and subscribe to the right up top. they are always there no matter where you are in the structure.
Fluid Navigation:
Menu is limited to less than 10 items which is simple and good.
Page Structure:
Only four categories and it is fairly simple in its design.
Data Entry:
Search field without autocorrect and suggestions. And the close X is underneath the serach icon to the right which should not happen.
Social Aspects:
Popular wit readers to the right hand side is prominent when scrolling. Social icons in the bottom in the menu.
Dark Patterns:
Again cookies with a common design where manage cookies are in only 1 pixel boarder and the Accept all in contrast blue. When managing cookies there is the same dark pattern again that wants to trick you to opt-in for all cookies. Hidden deep in there is the toggle off for ads and other sharing of to third parties but still the misleading opt-in configuration to confuse you to accept all. Pop up notifications with pre checked choices to get all notifications. samt as with cookies border only to click maybe later instead of accepting.
Linkedin.com
Organisation:
Centreline design with a top navigation for where you are at all times. Including the logo that is a bit small to the left and then search and the rest of the categories to right side of center.
Fluid Navigation:
One drop down menu for your settings and profile and one piping out from the right which is odd for the rest of LinkedIn's services that they make money out of.
Page Structure:
Simple design with social in the left hand column and the news flow in the middle where you can see everything that your network has liked, celebrated, supported, loved etc. And articles they have shared as well as advertisement just like Instagram. Effects are the same through out and the colors as well. The structure changes when you get deeper in to Policy and such. Then you get a different menu.
Data Entry:
Gives suggestions in the search field and in the fields where you ad education and companies you worked at.
Social Aspects:
There are plenty of social aspects of LinkedIn since it is a social platform. In the left hand column you can see how many have visited your profile and how many have read your latest post. There are also linked to pages to dive in to the analytics of all that. There are updates for the hashtags your following etc. You can ad notifications for updates etc.
Dark Patterns:
There is a gamification aspect to the platform in that you spend time looking att what others have liked and who is checking you out. It draws you in a bad way disguised in being a professional platform which it also is.
Smhi.se
Organisation:
A standard design with a 1 Where am I? top menu and then the Where can I go? menu to the left when going deeper in to the design with progressive disclosure. Center stage has all the content.
Fluid Navigation:
Main menu categories needs a click on them for them to open up in a mega menu with an additional left category list menu where the categories unearth the left hand side categories open up in the mega menu to the right. Somewhat fluid design but the click is making the journey longer for the user.
Page Structure:
Consistent color scheme through out the website with consistent color on titels and links and same effects throughout the website.
Data Entry:
Suggestions in the search field which is helping a lot.
Social Aspects:
Not much social on this website since it is government controlled and funded.
Dark Patterns:
Nothing about cookies. Opt-in is mandatory if you do not set the opt-out in the browser your self and that is the information on the website in the footer hidden nicely away.
Weather.com
Organisation:
Center design with a top menu bar including logo to the left and search in the middle and mega menu drop down to the far right. Eight categories in the main menu which is easy and more in the last category as a smaller mega menu with six items.
Fluid Navigation:
Yes the navigation is fluid and simpel to get quickly. Prominent categories in menu that is always there on eery page.
Page Structure:
Simple structure Same color on titels and links. Same effect on buttons when hovering but no click effect.
Data Entry:
Hint suggestion in the search field prominent. Suggestions in drop down when you type which is helpful.
Social Aspects:
No social aspect on this website other than ads.
Dark Patterns:
Yes a large amount of ads that disturbs your peace wanting information about the weather. They put a large ad in center stage where the information about the weather should be.
Futurism.com
Organisation:
Where am I? menu bar to the left hand side in vertical mode. Logo to the top which is standard and large enough to comply with Fitt's law.
Fluid Navigation:
Navigation is poor and it is more a news feed like instagram and facebook. When you get to a category page then the articles are sorted in images in nice rows that quickly gets confusing and boring.
Page Structure:
Same color throughout the website in borders and titels. no effects to talk about. They can amp up the UI on this page a lot to be more interactive and engaging.
Data Entry:
Search function is hidden and there is no help from autocorrect or suggestions.
Social Aspects:
There are icons to share to facebook and such.
Dark Patterns:
After you read five articles you have to subscribe or switch to another browser in dark mode so that you can read more. Bad strategy and easy to work around. No mention of cookies.
Nasaspaceflight.com
Organisation:
Centerline design wit top navigation for Where am I?.
Fluid Navigation:
Nine categories which two are drop down mega menus in image style including more categories for a progressive disclosure. The menu follows me when scrolling and in minimal which is good. Reassures me where I am.
Page Structure:
Simpel structure with not many layers. maximum of two layers.
Data Entry:
Autocorrect as suggestion is present when searching but it takes to long to pop up. No other suggestions.
Social Aspects:
There is social aspect in what others are talking about that includes a community of some sort. But nothing about any updates from other members.
Dark Patterns:
No way to opt-out of cookies on the website. They are collecting and you have to block them in your browser.
Spacex.com
Organisation:
Centerline design with a top menu bar with logo the the far left linked to homepage.
Fluid Navigation:
Menu categories are limited to six main ones plus shop and pop out menu to the far right.
Page Structure:
Simple one layer design. Every category has one page which is one long scrollable interactive changing set off full screen images with interacting elements to them. Same color on titles, buttons and links. Same hover effects and titles load quicker than images on the pages.
Data Entry:
Only in shop and that is a standard form. Autofill is enabled. Apple pay for expedited checkout.
Social Aspects:
Social sharing links at the bottom of every page.
Dark Patterns:
Nothing about cookies or anything els.