Studio Brief 02 - How webpages scroll and display content

Vertically scrolling through content online is the most natural way we read screens. Thinking of how this experience alone can be improved, Apple's website came to mind as it doesn't show the reader all of its information at once.

Taking the MacBook Pro page as an example, the information is "unveiled" to the reader with on screen animations. Opening a page and subsequently be unveiled content builds anticipation in the user. It captures the attention of the reader and makes the content appear more special than it actually is. With the entire page using this technique, it makes the entire experience very visual. 
Due to digital technology's immediacy, we have become reliant on the instantaneous viewing of information. Thus our attention spans whilst using a computer becomes reduced, and as such it makes staying on the same area on a webpage mundane. Therefore with each page, information is given to the reader in small amounts, forcing the user to engage with the website constantly. Furthermore giving readers this amount of information only makes the user want to find out more, lengthening the attention on the site. This is a form of user interface that creates a uniquely positive user experience.

The user interface of the Apple website is clear and concise. All useful catogeries are on the top bar with less but more specific areas on the bottom. The type is large and yet discreet on the screen, not distracting too much from the visual content. Unlike the magazine websites and apps, Apple does lay its product front and center to captivate the users attention. It makes it clear that Apple wants to show off and sell the products to the consumer, in this sense a solution to on screen reading should make the editorial content the product it wants to "sell". Apple uses this design across all of its webpages, therefore the viewing of each page becomes seamless and it forms their own design language for screen. 

On mobile, Apple has modified the website's template to fit the constraints of the smaller screen. This means removing the flat navigation bar and transforming it into a "hamburger button". This creates a drop down menu that has the same animation as the content on the full website.

The menu items fade into appearance much like how the products on the web page are presented to the user. Furthermore, despite the smaller screen size, Apples products are on full display taking up all of the screens real estate to present it to the reader. This is beneficial as the full display of their products alleviate the problem of the user not being to see their products on a smaller scale. Overall Apple has created a user experience that is consistent across multiple platforms.

IN a similar fashion TATE's website uses the same technique of displaying "bite-sized" forms of information across the whole page and putting the content at the forefront of the users attention. The diagonally aligned circle "sticker" on the side contrasts against organised user interface. This abnormaty distracts the user enough to get their attention on a important feature of the website.

typetoken's website also takes advantage of scrolling. Through their method, the user doesn't need to leave the page he/she is on. This makes the entire user experience focus on one page yet at the same time doesn't make it mundane. Again, the effective use of large content contributes to how well the user experience is overall. This interface can be a possible template to how users could get a preview of the magazine they want to read. 

On artist Fabian Schubert's website, scrolling sideways on the page is done by scrolling vertically on the trackpad, maintaining an easy way to navigate. This method is effective in both having a natural interaction between the user and scrolling on a webpage as well as being a way to show the landscape photography more appropriately. 
http://www.fabianschubert.com/