For those who might not know, No Man’s Sky is a space survival game that allows you to adventure throughout the universe and do a large number of fun things, like exploring galaxies, discovering and naming systems and planets, becoming a farmer or a space pirate, going on expeditions, trading goods, discovering mysteries about alien races and building your own bases by yourself or with friends.

Back when it launched in 2015, the game went through a rocky start, but with each of the 20 plus subsequent updates the game gained a lot of content, improvements and a great community. One thing that hasn’t changed (or improved) much though, is its user interface.

NMS uses the same UI paradigm as Destiny (another space game, but this time a first person shooter), which revolves around moving a cursor around the screen to reach buttons, tabs, grids and lists and interact with them. That wouldn’t sound strange to any PC users, as it is how any mouse and pen UI works, but Destiny and NMS apply this paradigm to consoles too. Consoles, as you know, do not use mice, but controllers, which are far less precise (and slow) than mice, and not really made for cursor-based interfaces; that is why in most console videogames, the UI is controlled by pressing buttons or moving the joystick in a direction, and the next UI element in that direction will get automatically selected (just like using the keyboard arrows to jump between cells in Excel).

Luckily, when Hello Games implemented a base-building feature, they noticed that cursor-based interaction wasn’t going to work, so they set all sorts of keyboard and controller commands to help us build our homes, labs and dungeons quite fast. What hasn’t improved at all since that update is the terrible use of screen space of the base building interface.

In the screenshot above, you see the default UI for placing a component in base-building mode in Brazilian Portuguese. The language is important in this context because it brings out usability and space issues in the UI.

The menus and the list of components and commands take approximately 28% of the screen resolution (1920 by 1080 in 16:9 aspect ratio), and they are always on. This is a HUD that never goes away while you’re building and placing components (unless you completely change the camera to birds-eye view).

The user is left with around a quarter of the screen space to actually focus on placing, moving and arranging components, but this area is off-centre, entirely taking the top left corner of the screen, thanks to the placement of the floating information panel to the right side and the components browsing menu at the bottom.

So, after having this terrible experience placing and editing base components for years, I decided to make it an exercise in UI design. I took some screenshots on my PS4 Pro, imported them to Figma and started studying ideas that would solve the main issues in the original design:

• UI elements taking up too much screen space.
• Having to focus to the top left of the screen to see what and where I’m actually placing instead of right in the middle of the screen, comfortably.
• In-game component names being placed inside scrolling pills to display the names in Brazilian Portuguese and other languages.
• Not being able to hide or move the UI panels when they are not necessary.
• Having trouble reading the commands labels because of the font size.
• Having trouble identifying in-game components by their icons, since the icons are translucent and the ground in the game is always heavily textured.
• Commands for panel-related actions being mixed with camera and placement controls.

Some ideas that I wanted to test:

• Progressive disclosure, showing the player less content and/or interactions at first and expanding as they go.
• Starting with the most complex UI setting and allowing players to remove or hide parts of the UI.
• Utilising timers and interaction cues to automatically hide UI elements.
• Employing UI patterns from complex desktop software and from responsive interfaces.
• Improving readability.
• Improving the feature by adding new interactions related to the UI.

The following mockups showcase some of the solutions that I have found and their interaction models.

View this article as a presentation in Figma →

Solution 1

For the first solution, I decided to go with a bottom-to-top expanding components menu. At first, only the initial, bottom-most categories are shown, and after selecting a category at that level, the next categories will show above it, and so on up to a limit of 3 levels as shown in the mockup.

The commands, panels and components have blurred and darkened background shapes so that the games textures and environments don’t make the UI labels and content unreadable.

The floating details panel is now closer to the border of the screen and adds commands related to it to its bottom. I also added an action to Show and Hide the floating details panel, which I assigned to button L3, as I believed this was an overlook from the UX and interaction departments on the original game. Being able to hide the UI is very important for this construction mode.

A slightly opaque black to transparent gradient is placed at the bottom of the screen behind the UI elements to enhance visibility.

The player selects the component to place. By default, the player sees the details panel floating at the top right of the screen as well as the component selector and the controls for each action.

The “Show details” action has been toggled, and the details panel is hidden so that the user can focus on building and moving components around. Now over 50% of the vertical space is available for construction.

As an additional interaction improvement, if the user does not use the controls to change the category or select another component for 5 seconds, the game would automatically hide the other categories and dims the component buttons in the UI so that the user now has even more space, leaving only the selected component fully visible in the list, along with the controls and their labels.

Solution 2

For the second solution, I decided to join the component selection and details panel, making a single floating structure. As in solution 1, the navigation system is based on stacking categories of components, but now they reveal down from the top, and fewer of the siblings of each component can be seen due to the width of the panel.

By pressing L3, the details can be hidden and only the bottom commands labels and the top components navigation structure will remain.

Now about 1/4th of the screen is taken by the UI, and while not still perfectly centred, the area for the player to place, move and customize their base components is much larger. If they decide to hide the details panel, this area increases.

Solution 3

For the 3rd idea, I took inspiration from tree-views and the macOS dock. Now the components and their categories are shown on the left side of the screen, being pushed to the right and increasing in zoom for each level of the tree that opens up. The selected component takes the center of the view, and each focused level can be scrolled up and down to reveal more items.

The floating details panel gets a very slim version that takes the top right portion of the screen, focusing on the most important information to the user.

At the initial state, the player sees the first categories to the top left and the basic interaction controls at the bottom of the screen.

As the player digs into the navigation structure, the tree view opens up and the bottom controls update with the new possibilities.

When a component is selected to be placed, the floating information panel shows up, now in its small form. With this configuration the player perceives more space to create and customize their base components because the menus leave space in the center of the screen.

For comparison, here is a screenshot of the same UI mockup with the larger information panel designed before:

As with the second solution, if the user does not interact with the controls that allow browsing between components and their categories, the browsing dock on the left side moves out of the screen to give the player more space, and it also dims items not important at that moment.

Conclusions

This was a very fun exercise to improve something I love, test UI ideas out of the usual desktop-mobile environment, think about interaction in different ways and learn new things. This was created both as a love letter to Hello Games and No Man’s Sky, but also as a way to show that sometimes even things we love can be improved — quite a bit in this case. Even you who are reading this now probably have ways to improve upon my ideas and solutions, and I would love to hear those, so, feel free to comment.

I would like to thank you for reading this article, Hello Games for making such a fun game and supporting it for over 7 years of amazing updates, the amazing community that keeps finding new and exciting things in the game, and all of the game UI and UX designers out there trying to solve huge issues for lots of people in several platforms.

If you’d like to message me about this article and/or work opportunities, please find me at fernandolins.net.

Redesigning “No Man’s Sky” Building User Interface was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sou designer de interfaces há 15 anos e neste período já vi todo tipo de projeto ser desenvolvido, desde enormes softwares em esquema “monólito” (desenvolve-se tudo de uma vez, e seja o que Deus quiser), até projetos ágeis com protótipos, validação, MVP, versão beta e tudo mais.

Nestes tempos mais recentes todo mundo quer fazer protótipos do seu produto, seja ele software ou não. Testar e validar a ideia antes de executá-la é mais rápido, barato, eficiente, menos propenso a erros e no geral uma prática melhor de projeto (no sentido de design). Mas, e aí, qual tipo de protótipo você precisa? Como eles são desenvolvidos? Qual é mais rápido e barato? Vamos dar uma olhada nos diferentes tipos de protótipos neste artigo.

Rápido não é barato, barato não é bom e bom não é rápido?

Esta frase acima se aplica a quase tudo na vida, exceto boa parte dos protótipos. A ideia geral de um protótipo, acima de tudo, é rapidamente ter uma avaliação sensata da sua ideia sem custos exorbitantes. Então, nesse caso, um protótipo deve ser menos custoso, mais rápido e eficientemente bom em validar a ideia do seu produto do que o desenvolvimento do produto inteiro.

Como sei se meu produto precisa de um protótipo?

Como disse acima, o objetivo do protótipo é validar uma ideia. Para haver validação, é necessário haver dúvidas, hipóteses. Se em qualquer momento da criação do seu projeto você se pegou pensando “Mas será que o consumidor/utilizador vai fazer tal coisa?”, isso é um bom indício de que você deve fazer testes de validação para eliminar esta dúvida. Veja que eu disse “testes de validação”, e não “protótipo”, pois existe mais de um jeito de se validar uma ideia.

O protótipo valida dúvidas comportamentais do seu produto. Por exemplo, os consumidores segurariam a alça de um aspirador portátil assim ou assado? As pessoas clicariam mais neste botão se ele fosse assim ou assado?

Dúvidas mais amplas como “Será que as pessoas vão utilizar o meu produto?” devem ser sanadas anteriormente através de outras validações, no processo de criação do produto, onde a razão de ser dele é especificada. Qual é o problema que o seu produto resolve? Se você não sabe, não é o protótipo que vai dizer. Ele só vai validar se e como as pessoas que o consomem e utilizam conseguem (ou tentam) resolver o problema.

O que preciso saber para fazer ou usar um protótipo?

A única coisa que você precisa para fazer ou utilizar um protótipo é se desligar da realidade por alguns instantes e brincar de imaginar. Protótipos não são, como já definimos, produtos finais, e nem remotamente parecidos com eles, tanto no visual quanto no comportamento. São rápidos, baratos e bons em validar, mas não são, de modo algum, completos ou polidos.

Tipos de protótipo

Para esta seção, vou me ater aos tipos de protótipo que eu conheço: os de software. Vamos explorar alguns tipos que existem:

Protótipo de papel — Baixa fidelidade

Um protótipo de papel, como o nome já diz, é um (ou vários) pedaço(s) de papel com rascunhos muito simples de telas ou fluxos de interação desenhados. Cada papelzinho representa um passo que o usuário dá até completar seu objetivo, como entrar na primeira página do site, entrar no formulário de cadastro, ver seu cadastro completo, procurar um produto, adicionar ao carrinho e comprar. Este tipo de protótipo é excelente para validar ideias na hora, ali em frente ao cliente ou desenvolvedor. O gasto é mínimo, a interação é altíssima e o resultado é muito rápido. Protótipos de papel não devem ser utilizados para prototipar produtos complexos e fluxos longos, pois aí o tempo gasto desenhando, recortando e colando tudo isso acaba com o propósito de prototipar.

Veja alguns protótipos de papel aqui: https://iamemmad.wordpress.com/2019/02/19/low-fidelity-prototyping/

Protótipo digital de Baixa Fidelidade

A fidelidade do protótipo diz o quanto ele é parecido com o produto final em relação ao seu visual e seu comportamento, mas é possível separar essas duas qualidades em diversos casos.

De todo modo, um protótipo de baixa fidelidade não parece e/ou se comporta como o produto final, sendo geralmente uma sequência de imagens que, ao serem clicadas, avançam linearmente em um fluxo pré-definido de telas. Pense neste protótipo como um filme: é uma sequência de imagens que contam uma história (no nosso exemplo, a história do fulano que entrou no site e comprou um produto), mas não é possível mudar essa história, ela não é verdadeiramente interativa. A única interatividade é poder andar pra frente ou para trás, avançando ou voltando telas.

Justamente por ser uma sequência de imagens, é possível criar esse tipo de protótipo corriqueiro em programas que usam slides, como Powerpoint e Google Slides, o que democratiza bastante sua criação (assim como o de papel). Ainda assim, é essencial que um(a) designer de UX ou interfaces ajude a desenhar e testar este protótipo, projetando os fluxos e as tarefas que serão executadas, além da sua validação técnica.

A ideia aqui é validar a jornada do usuário sem entrar em detalhes específicos. Se o usuário conseguir entender o suficiente de cada passo para ir ao próximo e assim chegar ao último slide, parabéns, você tem uma ideia validada.

Protótipo de Média Fidelidade

Nesta versão estamos um pouquinho mais próximos do comportamento e/ou do visual da versão final do produto, tendo algumas opções de interação, com botões e links que seguem diferentes caminhos, e pode haver até algum tipo de inteligência neste protótipo, como simular formulários, carrinhos de compras e outras funcionalidades mesmo que limitadas. Isto tudo também pode ser feito com sequências de imagens, mas agora detalhando melhor os passos, e provavelmente não no Powerpoint.

Este protótipo é útil para testar fluxos mais complexos e entrar em detalhes de interatividade, como por exemplo o funcionamento de menus, preenchimento de formulários, diferentes opções e caminhos e interações mais complexas que dependem de um mínimo de programação por trás.

Veja neste projeto um protótipo de média fidelidade: http://www.lloydpan.com/project/kitch-mobile-app/

Protótipo de Alta Fidelidade

O protótipo de alta fidelidade deve ser praticamente indistinguível do produto final, tendo altíssima qualidade de produção e comportamento muito similar a um produto final. Geralmente este é um protótipo “mocado” (de mockup, boneco, maquete), ou seja, toda a interface dele é real, mas os dados e transações que necessitariam de código são falsas ou são efetuadas localmente, apenas naquele computador ou aparelho de testes, sem ficarem gravadas.

No caso do nosso carrinho de compras, um site já estabelecido poderia utilizar o código que ele já tem como base para testar um novo comportamento do carrinho de compras, mas toda a parte de transação financeira estaria desligada, para que fosse validada apenas a experiência de utilizar o carrinho.

Por envolverem algum tipo de programação (seja back-end ou front-end) estes protótipos de alta fidelidade são utilizados em produtos que já existem e estão testando melhorias. Este motivo faz deles os mais caros e demorados de se desenvolver caso sejam feitos do zero. Utilizar uma base já existente diminui muito o custo e tempo de criação deste protótipo, mas você precisa ter essa base que gastou muito tempo para desenvolver no passado.

Veja aqui um protótipo de alta fidelidade visual: https://dribbble.com/shots/14057207-Instagram-Redesign-Part-2

Veja aqui um protótipo de alta fidelidade visual e comportamental baseado em código: https://dribbble.com/shots/11824118-MyCloud-App-MVP

Como rodar um protótipo?

O jeito que eu prefiro para validar o protótipo é através de tarefas que são passadas ao usuário. Peça que ele execute uma tarefa e observe seu comportamento, suas dúvidas. Veja onde ele se “enroscou” e onde teve facilidade. Faça isso com pelo menos 5 pessoas de diferentes níveis de conhecimento técnico e familiaridade com o assunto do seu produto. Você aprenderá muito sobre o que funciona e o que não funciona em sessões curtas com um protótipo na mão. Grave as sessões se possível para analisar depois, e tente não dar soluções para os usuários que estiverem empacados nas tarefas. Se não conseguirem as executar, isso é um indício forte para redesenhar suas soluções.

Conclusão

• Protótipos devem ser baratos e rápidos de fazer: você não deve gastar muito tempo os criando para que eles não virem pequenos projetos de desenvolvimento.
• Se você tem dúvidas sobre o comportamento do seu usuário no seu produto, este é um bom indício de que um protótipo pode te ajudar.
• Protótipos de alta fidelidade devem ser desenvolvidos em duas situações: caso o projeto ou o usuário realmente necessite de algo além da simulação, ou caso já exista código pronto do qual o protótipo possa se beneficiar.
• Trace jornadas e, dentro delas, tarefas para o usuário executar, que ajudem a responder suas dúvidas. Não tenha medo de ver os usuários falharem nas tarefas, é dessa validação que você precisa.

During the 2020 Covid-19 quarantine I and many others have decided to take the “extra” time in our days (usually time we used to spend commuting from home to work, to the gym and not ordering groceries online) to take courses and lessons of different kinds.

In every different class I took, I would always see the same mistakes being made by teachers and trainers alike, and the same questions being asked by students and participants.

So, how can we make a better experience for everyone with 5 small changes?

1st Change — Tell students if and for how long recording of the classes will be available

People all over the world might want to take your course and listen to what you have to say, and these students might have very different schedules. Consider when you are going to minister these classes, and how people in different time-zones might be able to watch a recording of those classes.

Are the classes going to be recorded?

How long are they going to be available to watch?

Specify in your course description, before sign-up, if and for how long these recordings will be available, and where the students will be able to find them. This is the most asked question on classes’ chats.

2nd Change — Provide a script (or transcript)

Many teachers will create Powerpoint presentations to guide their classes, but the actual content is only being spoken. The screen being shared only shows a title, a funny gif and nothing else for every slide. If you’re not recording or writing what you’re saying, the content gets lost.

Do you remember what example they gave in this class?

I can’t remember!

You should provide a script or even “beef up” the presentation with most of what you’re going to say, so that students don’t feel lost when reading the presentation for the first time (if they missed the live class) or months later after the class recordings have expired. Documentation is essential for studying.

3rd Change — Keep everything in one place

In Brazil teachers set up Whatsapp or Telegram groups for their classes, but these kinds of chats become really hard to navigate over time, and hard to search into. You’ll end up pasting the link to that lecture 20 times a week, in between memes and discussions boiling up in chat.

Teacher, can you share that document again?

Does anyone have the link to the document?

You could set up a Google Docs or Notion document containing all the links, attachments, schedules, homework information and anything else you need to share with your students and share the document’s link as read-only to all students.

4th Change — Ask students if they want to participate in each group activity, or any at all

This is something very personal and will change depending on the kind of class, subject being taught and who’s taking those classes, but I have seen more than once teachers creating activities that can only be done in pairs or groups.

Can I do this homework by myself?

People who are considered introverts or have any kind of social phobia are taking the opportunity to learn with online courses because social (and physical) interaction is not required. Forcing people to exchange personal information such as phone numbers or social media profiles so they can do activities in pairs or groups should be consented on, and it should be possible that some or all students do these activities by themselves.

5th Change — Consider time for discussion

Only one of the 7 courses I took with online live classes during the last 5 months of quarantine had time for discussions in their schedule. Most discussion happened late hours of the night in a Whatsapp group chat, and I had to turn notifications off because it became bothersome.

I’m going to save this so we can discuss it with the group on Wednesday!

If you dedicate a single hour per week on your schedule to discuss what has been taught and whatever doubts students might have, you’re doing yourself and them many favors:

1 — Your students are intelligent people and they might be able to answer each others’s questions, while learning about each other in the process. You don’t need to waste time answering everyone by e-mail or instant message — but please allow those students who don’t feel comfortable asking questions in front of everyone to reach out to you in other ways.

2 — This discussion session is a live thermometer for your course. You will immediately see if students are understanding your content, if they’re happy, lost or confused, if there are any parts that need to be better explained.

3 — You might discover opportunities to create other classes or extend your reach to more people by listening closely to the students’ concerns and questions.

I hope these were valid suggestions for you! Let’s keep teaching, learning and exchanging experiences. And remember, the pandemic is not over just because you are over it. Wear a mask and stay home if you can! 😷

Este artigo faz parte de uma série sobre a interface gráfica do PlayStation 4. Por favor leia as demais partes:

Parte 1 — Introdução à interface gráfica do PlayStation 4
Parte 2 — História do XMB e evolução
Parte 3 — Pesquisa com jogadores
Parte 4 — Hora de deixar o XMB para trás
Parte 5 — Redesenhando a Interface
Parte 6 — Resultados e observações

Hora de deixar o XMB para trás

Quando o XMB foi criado, há 17 anos, os sistemas dos aparelhos de entretenimento e dos videogames não eram tão complexos. Já no PS3 este modelo de interface trazia diversos problemas: categorias difíceis de achar, impossibilidade de buscar (apesar de haver filtros que foram perdidos no PS4), colunas com linhas e linhas de sub-itens com ícones, imagens e prévias de vídeo com pouca memória disponível para os carregar. Adicionando as camadas de funcionalidades introduzidas com o PS4, o modelo se provou já ultrapassado para os tipos de conteúdos hoje consumidos na plataforma, mesmo com o grande redesenho pelo qual passou.

Nesta quarta parte deste estudo de interface vamos começar a repensar alguns detalhes e desenhar fluxos experimentais levando em conta o quanto o sistema se tornou complexo e inflado durante os anos.

Um sistema vertical em um mundo widescreen,…

Apesar da sua estrutura parecer horizontal, um dos maiores problemas do XMB é que todo o conteúdo relacionado aos ícones em fila horizontal fica organizado em longas listas verticais que dependem de muita rolagem (scroll) para serem navegadas por completo. Passada a era dos televisores de tubo com proporção 4:3, o formato 16:9 e seus irmãos 16:10 e 21:9, cada vez mais comuns em jogos de PC, precisam ganhar espaço na nova geração.

O espaço horizontal nestes modelos de monitores e televisores é maior que o vertical e a interface deve tomar proveito disto. No formato quase quadrado 4:3, a rolagem vertical não era um problema tão grande (com o perdão do trocadilho), mas se agrava nos formatos mais atuais — e retangulares.

Acima podemos ver a organização padrão da interface do PS4. O jogo selecionado tem seu ícone destacado e o sistema carrega conteúdo relacionado em uma lista abaixo dele. A rolagem é vertical e devido ao layout escolhido, o conteúdo ocupa cerca de 50% do espaço horizontal na tela.

Este conteúdo pode envolver atualizações do jogo, troféus, manuais, DLCs, e atividades de amigos, por exemplo.

Um melhor tratamento deste layout seria dividir o conteúdo e os ícones em colunas, e também utilizar ícones menores. Por mais destaque que os ícones recebam na home do PS4, eles ocupam um tamanho desnecessário. São imagens fixas (podendo ser atualizadas, mas raramente sendo) que o usuário usa para reconhecer os jogos e aplicativos instalados.

No rascunho abaixo, exploro uma alteração de layout na qual os ícones de jogos e aplicativos recentemente usados ficam na coluna à esquerda, enquanto o conteúdo relacionado com scroll independente fica à direita.

O jogo selecionado (“Gran Turismo 7”) exibe na coluna da direita seus dados, como formato do jogo (Digital, PS5), tamanho em disco (86GB), classificação etária, última vez que foi jogado e salvo, quais amigos estão jogando, uma prévia dos troféus e ainda streams ao vivo deste jogo. O conteúdo pode continuar rolando livremente no lado direito da tela. Neste caso, o joystick esquerdo e o D-Pad ficariam responsáveis pela navegação entre os ícones de jogos e aplicativos, e o direito pelo conteúdo relacionado.

Neste rascunho também podemos ver atalhos para outras funcionalidades do sistema como Menu, Amigos, Transferências e Perfil do Usuário na barra lateral esquerda, acessíveis com o toque de um botão, eliminando a necessidade de navegar transversalmente entre categorias de menus que ficam visíveis e invisíveis de acordo com o contexto do cursor, como acontece atualmente no PS4:

No desenho original de Yumiko Tanaka, os ícones acima ficam ocultos, apenas alguns ficando destacados na barra superior. Apesar das inúmeras atualizações, este ainda é o padrão do sistema.

Quase sem atalhos…

Outra característica do XMB, mas que é comum a todos os sistemas de consoles, é essa falta de atalhos para acessar diferentes seções da interface ou para agir sobre o conteúdo exibido, como foi mostrado no rascunho anterior.

Toda a navegação é feita “apontando” o joystick em alguma direção ou apertando algum dos botões do D-Pad repetidamente e rolando ou pulando sobre os ícones e itens de lista até chegar na funcionalidade desejada, apertar X para entrar/confirmar e O para voltar/cancelar.

A designer responsável pelo projeto diz que “A Interface do Sistema deve ser navegada intuitivamente, portanto a navegação por botões deve ser simples. Nós almejamos utilizar apenas os botões ‘direcionais’, ‘entrar’ [X] e ‘voltar’ [O] e posicionar os elementos na tela para indicar esta navegação. Funções estendidas estão guardadas sob o botão ‘options’ que fica localizado fisicamente no controle e é de fácil acesso para usuários avançados”.

Porém, o jogador tem em suas mãos um controle com nada menos que 19 botões para auxiliar na navegação e para evocar atalhos de interface.

Destes, atualmente apenas 6 são utilizados para navegação na interface do sistema: X, O, Options, Share, L e D-Pad.

Pode-se argumentar que, para o manejo geral do sistema, a utilização de muitos botões iria contra a facilidade de uso, em especial para pessoas que não têm costume com consoles (no geral, pais, avós e usuários novatos). Porém, aprender a navegar pelo sistema com o D-Pad, X e O até chegar em funções genéricas como “desligar” é um caminho muito mais longo do que prover um atalho direto com um dos demais botões.

Continuando com o exemplo de desligar o console, hoje há 3 maneiras de o fazer:

1. Apertar e segurar o botão minúsculo e frágil no console por alguns segundos. Não há affordance que explique que é necessário segurar o botão para desligar, e que um clique simples apenas o coloca em modo de soneca. Além disso, versões diferentes do PS4 (original, Slim e Pro) têm diferentes botões de desligar, encontrados em partes diferentes do console, e as configurações do software podem influenciar no comportamento do desligamento.
2. Segurar o botão “PlayStation” no controle ativo — novamente sem affordance de que deve ser pressionado por alguns segundos — até que apareça o menu. O menu deve ser navegado com o D-Pad ou joystick, confirmando com X.
3. Apertar uma vez o botão “PlayStation” para ser levado ao menu principal. Por padrão, esta ação leva ao ícone do jogo ou aplicativo atualmente sendo executado. O usuário deve então navegar do modo mencionado acima até o item de menu “Power”/”Energia”, confirmar com X, ver a opção de desligamento preferida e confirmar novamente com X.

Isto pode ser resolvido de uma maneira mais fácil, à prova de usuários inexperientes, como mostra o fluxo rascunhado abaixo:

Considerando que o jogador esteja executando um título como o (jamais anunciado oficialmente) Gran Turismo 7, ele, seus pais, avós, apertam o botão “PlayStation” (PS) sem necessitar segurar.

O usuário verá a seguinte tela, com atalhos simples e um diagrama do controle DualShock 4 para referência. Olhar para a tela reafirma onde ficam os botões no hardware, ajudando o usuário a assimilar as posições e decorá-las para uso contínuo. As cores ajudam a confirmar as posições e ações.

As ações são à prova de confirmação, pois a mesma se dá pelo tempo que o usuário segura os botões indicados. Este tempo deve ser curto, por volta de 4 segundos. É o suficiente para que o usuário consiga cancelar a ação antes dela se completar. Não é necessário utilizar os botões direcionais (D-Pad) ou joysticks (L e R) e todas as ações podem ser executadas com uma mão para melhor acessibilidade e praticidade.

Como continuar a jogar é a ação menos destrutiva neste fluxo, não é necessário segurar o botão X para voltar ao jogo. Isto também ajuda no caso de usuários que apertaram o botão PS por engano e desejam desfazer o erro rapidamente.

Alguns atalhos avançados, como lista de troféus, lista de amigos e controles de música ficam disponíveis e listados no canto inferior esquerdo da tela para usuários experientes que querem acesso a estas funcionalidades. Usuários experientes conhecem bem o controle e não precisam da legenda dos demais botões. De todo modo, o hardware ainda serve de referência para encontrar os botões.

Caso o usuário deseje desligar o console, como no nosso exemplo, ele prime o botão PS e vê a seguinte instrução:

Os demais comandos da tela perdem qualquer destaque e a interface instrui o usuário a continuar segurando o botão para confirmar a ação. Caso solte o botão, a ação é cancelada e a tela volta ao estado anterior. Aqui, idealmente, as micro interações e animações devem guiar o usuário.

Com o progresso desta ação a tela vai escurecendo para indicar que o console realmente será desligado. Nós estamos acostumados por experiência com outros aparelhos e com o televisor a perceber telas escuras como desligadas.

Uma vez confirmada a ação, qualquer resquício da interface e de outras ações possíveis perde o foco, mostrando apenas a confirmação da ação.

Apesar do rascunho exibir 3 imagens diferentes, elas são fotografias de um fluxo único que se inicia ao segurar o botão PS e manter pressionado até o console ser desligado. Não há necessidade de navegar por menus, de usar o D-Pad ou o joystick. Para usuários acostumados, tudo pode ser realizado como uma ação única: durante o jogo, aperta PS para exibir o menu, e depois o segura para desligar o console.

Este fluxo também pode ser aplicado ao botão liga/desliga do console, sem necessidade de usar o controle: apertar o botão de desligar exibe o menu. Apertar novamente coloca o console em hibernação, e segurar o botão desliga o console, por exemplo.

Sem controle por voz…

Além da navegação via controle, o PlayStation 4 oferece, assim como o Xbox, navegação por voz, disponível em alguns idiomas seletos e com quantidade limitada de comandos, como “Iniciar jogo”, “Iniciar navegador”, “Dormir”, “Desligar”, “Ir para Tela Inicial” e outros. Estes termos foram traduzidos livremente dos termos em inglês pois não há versão em Português desta funcionalidade.

Não foi possível obter, para este ensaio, uma porcentagem de usuários que utiliza os comandos de voz, mas devido à indisponibilidade destes comandos em português, creio que seu uso é extremamente limitado em território nacional. Dado que estes comandos apenas controlam a interface do sistema e não permitem controlar os jogos, também cai por terra a qualidade acessível da função.

Apesar disso, existem rumores de que o PlayStation 5 terá um aplicativo companheiro para celulares com inteligência artificial que permite buscar, por voz, dicas para jogos, streams de gameplay e outros.

Mas com grandes expectativas para o futuro

Apesar dos problemas listados até agora, o sistema do PS4 tem mantido sua base de usuários sem grandes problemas. Contanto que o sistema não se torne um empecilho para a principal atividade do console, que é jogar, os usuários se mantêm felizes. Porém isto não significa que não há espaço para melhora, inovação e consertos. No próximo artigo vamos juntar os pontos já apresentados e o feedback dos usuários e os traduzir em rascunhos e mockups da interface, explorando mais soluções.

Nosso trabalho, como designers (projetistas), é promover informação de forma clara, direta e acessível. Promover é dar impulso a algo, fazer propaganda, apoiar e ajudar a alcançar diferentes patamares. Projetar é ter o melhor interesse do receptor dessas informações em nossas mãos e transportar a informação com o maior cuidado possível até ele, removendo barreiras e obstáculos, sejam estes cognitivos ou não.

Hoje, perante ondas devastadoras de notícias falsas, fascismo proclamado e racismo sem véu, o cuidado que devemos ter com a informação é da maior importância. Como designers, é nosso papel coletar a informação verdadeira e a representar de modo que todos possam entender.

É nosso papel traduzir algo complexo em algo simples; é nosso papel organizar dados de difícil alcance em quadros de fácil interpretação; é nosso papel absorver dados e transformá-los em argumentos para justiça social.

Faça cartazes, faça infográficos, faça aplicativos, faça ilustrações, faça textos, faça objetos, faça cartilhas, faça camisetas. Não deixe de informar os demais. Não deixe as informações distorcidas e as mentiras chegarem a eles. Informe o público para o nosso bem, para o nosso futuro.

Não pare de projetar. Não pare de informar.

Não pare de comunicar.

Este artigo faz parte de uma série sobre a interface gráfica do PlayStation 4. Por favor leia as demais partes:

Parte 1 — Introdução à interface gráfica do PlayStation 4
Parte 2 — História do XMB e evolução
Parte 3 — Pesquisa com jogadores
Parte 4 —Hora de deixar o XMB para trás
Parte 5 — Redesenhando a Interface
Parte 6 — Resultados e observações

Pesquisa com jogadores

Para iniciar os estudos das necessidades dos jogadores, fiz uma pesquisa que foi divulgada no Twitter, com mais de 130 participantes. Você pode ver os resultados da pesquisa no Google Forms.

O objetivo da pesquisa é elencar as funcionalidades mais usadas e mais esperadas pelos jogadores. Devido ao já mencionado problema de acúmulo de funcionalidades no PS3 e PS4, minha preocupação inicial era redesenhar a arquitetura de informação do sistema, eliminando funcionalidades desnecessárias e criando uma organização melhor das funções disponíveis. Além disso, era necessário entender quais funcionalidades são populares e impopulares.

Funções mais utilizadas pelos usuários — resultados da pesquisa

Na pesquisa que publiquei em 11/10/2019, com 135 respostas, as funções votadas como mais utilizadas pelos donos de PS3 e PS4 foram “Jogar” (mais de 91%) e “Utilizar aplicativos de streaming de vídeo” (Netflix, Youtube, Amazon Prime, etc., com 7.4%) As demais funções como slideshows de fotos e até a utilização do player de DVD e Blu-ray não tiveram quaisquer votos. Isto é um reflexo do consumo de conteúdos de vídeo no Brasil: primeiramente a facilidade de (e preferência por) piratear filmes, e depois o acesso a serviços como Netflix para aqueles que têm conexão à internet (fixa ou móvel), assim como Youtube.

Poder jogar jogos das gerações anteriores é um ponto muito importante para os jogadores, tanto que 48% dos participantes responderam que têm tanto o PS4 quanto o PS3 — pois o PS4 não pode rodar jogos do PS3. Eles também marcaram que a compatibilidade com a geração anterior é “Muito importante” (51 votos) ou “Essencial” (75) para um console. Neste quesito a Sony fez pouco na geração atual, mas disse já estar trabalhando em modos de permitir que isto aconteça no PlayStation.

“Jogar jogos digitais” também saiu à frente da possibilidade de poder jogar jogos físicos (em disco blu-ray), mas que ainda é considerada “muito importante” ou “essencial” por 129 dos participantes da pesquisa. Nenhum dos participantes disse que download de jogos é pouco importante ou sem importância.

Além desses pontos, os participantes também responderam que assinam a PS Plus — sistema de assinatura mensal da Sony que permite acesso a jogos multiplayer, descontos e dois jogos gratuitos por mês — principalmente pelos jogos “gratuitos” e pelos descontos (39%), mas não tanto para jogar online (31%). Isto é um demonstrativo da dificuldade que a Sony tem tido para “emplacar” a assinatura da PS Plus, especialmente em território nacional. Enquanto os PCs e celulares prometem jogatina gratuita (ou seja, sem pagar alguma mensalidade além da internet/plano de dados), os consoles cobram pelo serviço. Para o jogador, o conteúdo tem mais importância que a disponibilidade deste serviço.

Trocar os temas da interface e personalizar o console é outro ponto bastante requisitado pelos usuários, sendo votado como “muito importante” ou “essencial” mais do que “pouco importante”. Geralmente a Sony lança os consoles sem esta opção, sendo adicionada ou aprimorada mais para o fim do ciclo de vida do console. Esta funcionalidade permite trocar os ícones, telas de fundo e temas musicais da interface do sistema operacional do console, e está disponível no PS3, PS4, PSP e PSVita (os dois últimos são consoles portáteis da Sony que já saíram de linha).

A integração com redes sociais ficou dividida entre poder compartilhar troféus, conquistas e fazer streaming. Os usuários que não se importam com estas funcionalidades e os que a consideram essencial ficaram em quantidade próxima. Falando em amigos, os jogadores participantes quase não utilizam a funcionalidade de Comunidades no PlayStation(9%), com quase metade preferindo participar de comunidades em sites especializados em comunidades como Reddit, Facebook e outros. 27% dos participantes disseram não ter qualquer envolvimento em comunidades sobre jogos, seja no console ou fora dele.

Das funcionalidades que a Sony adicionou ao PS4 nos últimos anos, a menos importante para os usuários foi a de poder seguir outros jogadores e personalidades da indústria de jogos, assim como influenciadores (streamers, jornalistas). Esta é uma funcionalidade bastante promovida pela Sony, mas que não agradou muito ao público.

Fazer campeonatos com amigos teve um peso considerável na pesquisa, com quase metade dos participantes considerando esta funcionalidade essencial ou muito importante, porém foi atribuída não à funcionalidade nativa do console de criar campeonatos com amigos, mas sim a disponibilizar qualquer tipo de modo cooperativo ou competitivo local.

O que deve ter destaque na experiência do usuário?

De acordo com os resultados da pesquisa, o essencial para uma boa experiência no novo console da Sony, ou num redesenho da sua experiência seria:

1. Jogos sempre em destaque — a principal atividade do usuário do PS4 é jogar, outras atividades não devem se sobressair na interface ou atrapalhar o acesso aos jogos.
2. Evidenciar conteúdos das assinaturas — tanto para a PS Plus quanto para serviços de streaming de vídeo. Acesso fácil aos jogos mensais da assinatura PS Plus e os seriados/filmes que tem assistido nos serviços de streaming.
3. Facilitar uso e gerenciamento de jogos digitais — os jogos digitais estão tomando o lugar dos jogos físicos, mas isto requer melhor gerenciamento de espaço em disco, downloads e biblioteca virtual de jogos. Atualmente é difícil de gerenciar a biblioteca de jogos e a organizar na interface do PS4, que mostra os jogos em uma fileira extensa de ícones.
4. Remover funcionalidades duplicadas de outros aparelhos — a maioria dos celulares e televisores hoje em dia têm funcionalidade de ler fotos e vídeos de pen-drive, acessar conteúdos na nuvem ou transmitir de/para PCs. Este tipo de funcionalidade de “centro multimídia” não tem mais lugar em um console em 2020. Até mesmo a possibilidade de reproduzir DVDs que foi um grande ponto de venda para o PlayStation 2 e de blu-rays para o PlayStation 3 não teria o mesmo peso hoje para o PS4 e PS5.
5. Compatibilidade — Seja a possibilidade de executar um jogo em mídia física ou transferir sua biblioteca digital para outro console, os usuários consideram essencial o acesso a conteúdos que já compraram em outras gerações. Se esta for uma solução onde o novo console possa rodar nativamente os jogos anteriores ou que possam comprar os jogos digitalmente, depende da tecnologia disponível e não tanto das intenções desenhadas pelos projetistas de experiência do usuário.

Como traduzir isso para uma interface?

O projeto de uma interface é iniciado pela pesquisa, definindo os objetivos de acordo com o feedback de usuários e dados do mercado. Depois são levantadas hipóteses para curar a lista de funcionalidades. Uma vez que as funcionalidades são elencadas, esboça-se a arquitetura de do sistema: onde vai o quê, como as funcionalidades são organizadas, qual o caminho a ser percorrido até cada uma delas, qual o nome de cada uma, tendo em mente os objetivos comerciais e de usabilidade do sistema. Por fim, é definido um estilo gráfico que será aplicado em conjunto com as características da marca e identidade visual do sistema, e os elementos de interação.

Como este redesenho é um exercício focado na interface gráfica, sem levar em conta possíveis limitações de hardware, orçamento e visões díspares do negócio, a seleção de funcionalidades se baseará nos resultados da pesquisa e no interesse geral pelo melhor funcionamento, usabilidade e acessibilidade do sistema, até considerando modificações na interface de hardware para melhor uso.

O objetivo do redesenho da interface do PS4 — visando seu futuro como PS5 — será aproximar o jogador do seu conteúdo preferido, removendo funcionalidades supérfluas e dando maior acesso às funcionalidades para power-users, melhorando a acessibilidade geral do sistema.

As funcionalidades serão:

• Executar jogos da nova geração e da geração anterior (software do PS5 e retrocompatibilidade com PS4)
• Visualizar e organizar a biblioteca de jogos de maneiras mais eficientes (“como uma Netflix para jogos”)
• Compartilhar conteúdo de jogos (streaming, screenshots, sessões de jogo)
• Acessar rapidamente conteúdo de streaming (música, vídeo, sessões de jogo)
• Ter foco na continuidade — poder continuar sessões de jogos, séries, filmes rapidamente, sem perder tempo com navegação
• Integrar atalhos na interface com o hardware disponível — tornar a navegação entre funcionalidades acessível

No próximo artigo, vamos explorar novas opções para deixar o layout baseado no XMB para trás e trazer inovação sobre os pontos listados acima para a interface do PlayStation 4.

Este artigo faz parte de uma série sobre a interface gráfica do PlayStation 4. Por favor leia as demais partes:

Parte 1 — Introdução à interface gráfica do PlayStation 4
Parte 2 — História do XMB e evolução
Parte 3 — Pesquisa com jogadores
Parte 4 — Hora de deixar o XMB para trás
Parte 5 — Redesenhando a Interface
Parte 6 — Resultados e observações

História do XMB e evolução

Xross Media Bar

O Xross Media Bar (pronuncia-se “Cross Media Bar”), ou XMB, é um modelo de interface gráfica para sistemas multimídia desenvolvido pela Sony Computer Entertainment para permitir acesso rápido a diversas funcionalidades de seus produtos. O modelo tem este nome devido ao seu modo de funcionamento: ícones ficam distribuídos em colunas que representam categorias (fotos, vídeos, jogos, acesso online, etc.) e em cada coluna outros itens verticais exibem um nível de detalhe a mais — por exemplo, na coluna de fotos, os sub-itens seriam álbuns de fotos e aplicativos para importar fotos, ver slideshows ou editar fotos — formando portanto uma cruz (“cross”).

Inicialmente este modelo de interface foi utilizado em aparelhos baseados no PS2 para funcionar como um centro de mídia digital para a sua casa. O Sony PSX (que não deve ser confundido com o PlayStation original, comumente abreviado como “PSX”) era um desses aparelhos, lançado em 2003, que utilizava o XMB como interface. Cabe lembrar que o PS2 foi lançado em 2000 no Japão, e o PS3 em 2007, portanto a Sony já testava o XMB há anos com o PSX, antes da sua estreia oficial no PlayStation 3.

O PlayStation Portable também utilizava o modelo XMB:

Para o PlayStation 3 a Sony utilizou o mesmo sistema do PlayStation Portable e do PSX, apenas adicionando os itens necessários para suportar as funcionalidades extras do PS3 como reprodução de blu-ray, download e reprodução de diversos formatos de mídias e jogos da PlayStation Store e gerenciamento de dados de jogos. Todo o gerenciamento é feito através do XMB usando o paradigma de “cruz”, com navegação horizontal e aprofundamento de fluxo vertical.

Apesar deste sistema em cruz, a navegação no PS3 é, em especial nas mais recentes atualizações do sistema, difícil. Para cada coluna pode haver dezenas de itens, e dentro deles dezenas de configurações. Apesar do intuito de criar um paradigma de interface flexível o suficiente para receber atualizações, a navegação constante em 2 níveis de profundidade no PS3 é cansativa, desnecessária e incapaz de suportar uma grande quantidade de funcionalidades.

Parte do problema é justamente esse: a quantidade de funcionalidades. Com o passar dos anos o PS3 ganhou centenas de funções, cada versão de firmware mais recheada que a anterior, mas raramente alguma das atualizações trazia melhorias de usabilidade.

As funcionalidades multimídia do PS3 foram se tornando irrelevantes e a Sony relutou em as remover do sistema. Um dos exemplos é a possibilidade de imprimir fotos e imagens pelo PS3 caso você o conecte a uma impressora wi-fi. Com o lançamento dos primeiros smartphones no mesmo ano de lançamento do PS3 as funcionalidades de galerias de foto, galerias de vídeo e conteúdo multimídia compartilhado entre diversos aparelhos não fazia mais sentido também. E assim ocorreu com diversas tecnologias tanto de software quanto de hardware que foram embutidas no PS3 na versão de lançamento, sendo gradualmente removidas nas revisões seguintes.

A evolução do XMB no PlayStation 4

Para o PS4 a Sony anunciou mudanças no XMB que permitiram que o sistema ficasse mais direto em certos aspectos e mais profundo em outros, mas isto não impediu que a interface fosse recebida com confusão pelos usuários em seu lançamento. Apesar das melhorias feitas entre 2013 e 2020, a base de navegação do sistema continua confusa, e cada vez mais complicada de navegar devido à adição constante de funcionalidades.

O site Polygon disse, em 2013, no lançamento do PS4, que “o legado da interface do PS3 vive no PS4 em seus menus e sub-menus de hierarquia confusa e itens escondidos” (tradução livre).

Nesta nova interface, desenhada por Yumiko Tanaka, o paradigma do XMB é alterado para que existam fileiras representando itens de níveis diferentes, e que as colunas exibam conteúdo ao invés de mais itens de menu. Os sub-itens de menu são exibidos como tabelas em telas separadas.

Os jogos e aplicativos ganham destaque neste modelo, ficando em uma segunda fileira da interface com ícones grandes, ao invés de ficarem sob uma coluna de “Jogos” como era no PS3.

O site ArsTechnica, em sua completa avaliação do console na semana de lançamento em 2013, diz que “[a interface gráfica] consegue ser um grande salto à frente da ‘Cross-Bar’ da Sony e ao mesmo tempo uma grande decepção”. O autor continua: “Se você está jogando muitos jogos em mídia física, a interface rapidamente entope de ícones inúteis de jogos que você não pode executar sem se levantar e inserir o disco. […] Deveria haver uma opção para esconder estes ícones obstrusivos”.

A primeira fileira de ícones da interface do PS4 se comporta de modo parecido à fileira principal de ícones do PS3: contém os atalhos para funcionalidades do sistema como Configurações, Notificações, Amigos, Troféus, etc. Porém, ao invés de exibir mais ícones em uma lista vertical, estes se tornam botões acionáveis que levam o usuário para listas de configurações:

Apesar de adicionar um nível de navegação ao fluxo, a solução do PS4 permite que as opções de configuração sejam alteradas pela Sony sem ter impacto no menu principal do sistema e sem adicionar poluição visual, problema do qual o PS3 sofria nas últimas atualizações com o crescente número e sub-itens em cada coluna do menu, que era sempre exibido na tela inicial.

Funcionalidades e o Quick Menu

Entre os anos de 2015 e 2020, de acordo com o log de atualizações do PS4, a Sony adicionou cerca de 70 funcionalidades novas ao PlayStation 4, muitas das quais foram inclusas na interface. Torneios, redesenho da interface de notificações, gerenciamento de espaço em HD externo, acesso a redes sociais e aplicativos de streaming, suporte a VR, edição de vídeos e GIFs, grupos e outras. Algumas dessas foram inclusas no Quick Menu, completamente transformado da sua versão do PS3.

No PS3, o Quick Menu servia para finalizar um jogo, acessar opções dos controles e de emulação de jogos de PS2 e PS1. No PS4, este menu serve de hub para dezenas de funcionalidades que, de acordo com a Sony, são essenciais para ficarem na ponta dos dedos do jogador. Este menu é acessado ao segurar o botão “PS” no controle, um dos três modos de evocar a interface do sistema por cima do jogo. Os demais eu explicarei a seguir.

Assim como os menus verticais do XMB no PS3, o Quick Menu do PS4 foi mudando de forma durante os anos para acomodar todo tipo de ação e informação. A quantidade de itens neste menu é tão grande que em um certo ponto foi adicionada a habilidade de customizá-lo, podendo retirar ou adicionar itens para acesso rápido.

“Rápido”, contudo, é tudo que este menu não é. Devido ao gerenciamento de memória do console ser compartilhado entre jogo e sistema, jogos mais recentes exigem mais memória e deixam o menu lento e irresponsivo.

Interface para o Hardware

Uma das outras funcionalidades que têm base no hardware é a do botão “Share”. Ele fica localizado no lado esquerdo do controle e compartilha o mesmo formato do botão “Options”, equivalente ao botão “Start” em outros consoles. O Share permite que o jogador salve uma captura de tela ou um vídeo do jogo que está jogando no momento, mas também pode exibir um menu de opções de compartilhamento por cima da interface do jogo.

No PlayStation 4, este botão não tem um ícone, apenas um nome, e portanto é sempre referenciado deste modo. Como seu formato é o mesmo do Options, não é fácil distinguir via símbolos ou representação gráfica do seu formato qual é o botão referenciado na interface.

No PlayStation 5 a Sony resolveu dar ícones para os botões e com a expansão das funcionalidades trocar seus nomes. Apesar do Options continuar com este nome, o Share foi renomeado para “Create”.

Futuro

Agora que conhecemos a fundo a estrutura do XMB, sua evolução executada no PlayStation 4 e temos dicas de como ela poderá evoluir no PlayStation 5, vamos ouvir dos usuários se esta evolução entregou as funcionalidades que eles necessitavam. Com um olhar de 2020 sobre entretenimento digital, vamos descobrir o que o jogador deseja ter, comparado ao projeto de 2013 da Sony. Será que a visão da empresa para o futuro estava correta?

Introdução

Sobre este estudo

Meu nome é Fernando Lins, sou projetista de interfaces gráficas e apaixonado por mídias interativas. Eu comecei na carreira de design por causa de um PlayStation. Mais especificamente por causa do jogo WipEout XL, mas essa história fica para outro dia. O importante é que eu acompanho videogames há muitos anos e sempre fico maquinando sobre a experiência de uso na minha cabeça. Desenhar interfaces para sites, aplicativos de celular, computadores, e videogames são aventuras de aprendizado e descoberta completamente diferentes, mas é muito raro um designer de interfaces ter a oportunidade de desenhar interface para um jogo, quiçá para o sistema operacional de um console.

Com a chegada do PlayStation 5 em 2020, resolvi olhar para a história do design de interfaces para videogames e estudar mais a fundo as decisões tomadas pelas empresas e seus designers. Como o PlayStation é meu sistema principal, e por saber que é possível melhorar a experiência de uso do seu sistema, resolvi fazer um exercício de redesenho da sua interface baseado na pesquisa que aqui apresento.

Para facilitar a leitura, dividi este estudo em 6 partes. Nesta primeira parte vou contar a história do PlayStation e das suas interfaces, e nas partes seguintes vamos investigar como a interface funciona, o que pode ser melhorado, revisar a pesquisa feita com jogadores e redesenhar o sistema.

Mas primeiro…

O que é um PlayStation?

O PlayStation é atualmente o carro-chefe dos eletrônicos de entretenimento da Sony, uma marca de videogames que começou sua vida em 1991, sendo lançado em 1994. Em 2020 a Sony planeja revelar o quinto console não-portátil da marca PlayStation, sendo a marca responsável pelos maiores volumes de venda de consoles e jogos durante boa parte dos anos 1990 e 2000.

O primeiro PlayStation surgiu não de um projeto da Sony, mas da Nintendo, uma das empresas pioneira em jogos eletrônicos e consoles caseiros. No fim dos anos 1980, vendo o crescimento de outros consoles de videogame utilizando CDs — e não cartuchos — , a Nintendo entrou em contato com algumas empresas para desenvolver uma extensão do seu console SNES para que pudesse rodar jogos vendidos em CD.

Engenheiros da Sony que tinham interesse em desenvolver um console, mas que não conseguiam a aprovação do conselho da empresa para tanto, fecharam acordo com a Nintendo para desenvolver um leitor de CDs para o SNES. O formato “SuperDisc” foi criado especificamente para comportar jogos e evitar pirataria.

Com o uso do formato SuperDisc, a Nintendo precisava ceder à Sony acesso a diversos segredos sobre a produção de jogos, além de refazer boa parte da engenharia dos jogos para que pudessem tomar proveito das capacidades multimídia dos CDs, como áudio digital e execução de filmes, tecnologias de propriedade da Sony. O “Play Station” seria um console híbrido, capaz tanto de rodar jogos em CD (SuperDisc) quanto os cartuchos da Nintendo. O “Game Station” seria o acessório de SNES permitindo acesso aos títulos em CD.

Porém, a Nintendo percebeu que a Sony estava entusiasmada demais com a tecnologia e que detinha uma parte muito grande das patentes do projeto, e temia que a empresa entrasse no mercado de jogos utilizando a mesma tecnologia do SuperDisc e lançasse um console no mercado. No mesmo dia em que a Sony anunciou a parceria com a Nintendo e o formato SuperDisc, a Nintendo anunciou que estava deixando a parceria com a Sony para utilizar um drive de CD feito pela concorrente da Sony, a holandesa Philips, para total surpresa de todos, inclusive dos engenheiros da Sony, na CES de 1991.

A Sony e a Nintendo ainda tentaram entrar em acordos sobre licenciamento de software e hardware, pois a Sony ainda tinha interesse em fazer pelo menos parte dos drives de CD para o SNES, mas um acordo nunca foi firmado. Por fim, a Sony desistiu da parceria e aproveitou todo o trabalho de engenharia de software e hardware para desenvolver um console de próxima geração, que seria lançado 3 anos depois.

A Nintendo não obteve frutos da sua parceria com a Philips, ficando sem drive de CD para o SNES, e amargando fracasso comercial do licenciamento dos seus personagens para o CD-i da Philips, um tocador de CDs interativos que mal vendeu. A empresa japonesa só foi lançar outro console em 1996, dois anos após o lançamento do PlayStation, e ainda utilizava cartuchos. O Nintendo 64 foi sucesso de vendas apesar de totalizar por volta de 1/3 das vendas do PlayStation (32 milhões de unidades e 94 milhões de unidades, respectivamente) e se tornou um console icônico na história do entretenimento eletrônico com diversos jogos clássicos e inovações como o Rumble Pak, que permitia o controle tremer com a ação do jogo. Esta inovação foi copiada pela Sony em 1997, quando ela lançou o controle analógico Dual Shock para o PlayStation.

Nos anos seguintes ao fiasco da parceria entre Sony e Nintendo o PlayStation e o PlayStation 2 (lançado em 2000) se tornaram os consoles mais vendidos do mundo, ganhando concorrência da Microsoft e seu Xbox em 2001. Em 2007 a Sony lançou o PlayStation 3 para um inicial problema de vendas devido ao preço do console e dificuldade de desenvolvimento, mas retomou crescimento de vendas no fim do ciclo de vida do PS3, ficando 4 milhões de unidades abaixo das vendas do Nintendo Wii, o líder da geração.

A Sony lançou uma versão “slim” do PS3 que foi alavancada em vendas pela capacidade de reproduzir filmes em formato Blu-ray, façanha similar à executada pelo PlayStation 2, que teve vendas elevadas pela capacidade de reproduzir filmes em DVD.

Mas e a interface?

É importante notar neste momento que a interface dos PlayStation é geralmente comandada pelo tipo de mídia mais importante na sua estratégia de venda. Enquanto o PS original tinha recursos para CDs, o PS2 para DVDs e o PS3 para Internet e Blu-ray, o PS4 nasce em uma época onde o conteúdo digital mais utilizado não é mais mídia física, e sim streaming ou download. Essa quebra de paradigma do conteúdo e da união do hardware com software teve grande impacto na evolução da interface desses consoles durante as gerações, a ponto do PS3 ter uma das interfaces mais complexas já feitas para um sistema de entretenimento digital, pois existiu nesta transição agridoce entre físico e digital, e a UI do PS4 perdida, quase sem identidade.

O PlayStation original contou com algumas versões diferentes de interface gráfica que era atualizada e remodelada de acordo com revisões de hardware do console e especificações regionais — na época não existia possibilidade de fazer atualização pela internet — , mas as funcionalidades da interface se resumiam a gerenciar arquivos de jogos salvos no Memory Card (cartão de memória) e navegar em CDs de áudio que podiam ser executados no console. Alguns jogos do PlayStation, por usarem CD-ROM como mídia, incluíam sua trilha sonora como trilha executável em tocadores de CD tradicionais.

Já o PlayStation 2 tinha uma interface um pouco mais complexa em funcionalidade, mas que foi unificada entre todos os seus modelos e era uma demonstração do poder gráfico do console, com fundos em 3D, ícones 3D, blur e smoothing de fontes e formas geométricas, e uma sensação futurista que acompanhava o design industrial do console:

Quando o PlayStation 3 foi lançado, o mundo já havia passado pela transformação trazida com a internet e outras evoluções tecnológicas. O sistema operacional do PlayStation passou de “meia-dúzia” de funcionalidades para mais de 100 nos 7 anos que separam o PS2 do PS3. Falarei sobre a interface complexa do PS3 em mais detalhe na parte 2 deste estudo. Por enquanto, basta saber que a Sony desenvolveu para o PS3 um paradigma de interface próprio chamado “Xross Media Bar” (ou XMB), dada a complexidade do sistema e sua possibilidade de evolução.

Na próxima parte do estudo analisarei a interface do PlayStation 3, o XMB, como surgiu, como evoluiu e como ela serviu de base para a interface do PlayStation 4, que irei redesenhar.

At a certain point in my professional path I thought it would be healthy to work at an actual company office, and so I did. I traded long Skype calls for sitting close to developers and users in cubicles, cafés and sometimes large meeting rooms, listening to their problems and sketching out solutions instead of just Photoshopping pretty buttons.

At that time I realized I wasn’t just doing interface design anymore, I was told that I was “already one of those UX guys”, and clients and co-workers liked that change.

It was natural to me, going that path.

But I never learned how to be an UX designer in the academic sense.

Yes, I took courses and workshops, but those mostly taught me about canvases models, design sprints and other design tools.

I simply did what made sense to me. I would sit next to developers, users, managers and listen to them. I craved for feedback, and I was genuinely interested in how people used things, their thought process, their mental models.

I was interested in solving problems, but most times these weren’t my problems. They were mine to solve, but not problems I had experienced myself. What better way to learn than listening?

The difference between listening and being a good listener

I never actually thought this soft skill would be useful for anything other than helping friends through break-ups. Most of us do listen, but being a good listener? That was different. Maybe if I were a psychologist I could make better use of that, but not as a designer, right? Turns out I was wrong.

Users, developers, managers (and friends) appreciate this quality, more than I had ever expected. It’s one of the few things I have been training all of my life without noticing, much longer than designing, than wireframing, than “doing the UX” for something. And without it, I wouldn’t be half the designer I am today (however much that is).

When I’m designing software, sites, games, whatever it is, I don’t do that work alone. I don’t even come up with the best solutions. It’s always about listening to the users and developers, learning what’s best for them and translating it into visual and behavioral language. Sometimes they will have the solution in their minds but are not able to express it, sometimes they do express it but it’s not the best solution. Either way, we work together toward a goal. Designing isn’t about what I want, it’s about creating a connection with the user, their needs, their expectations, being a good listener and knowing the right tools to solve that problem.

For people who aren’t used to working with UX designers, participating in “UX rituals” can feel daunting, as I’ve been told quite a few times. The formality of it all, being recorded and analysed, the pressure of exposing their opinions about a product or idea (“Will I be scolded for saying the truth?”, “Will my manager listen to this?”), having to participate in group dynamics (“What do you mean ‘what do you hear’ at work?”) and other awkward social/professional situations. It all may get in the way of discovering the actual issues if you just follow the lean UX manual without some empathy!

So, this is my advice for up and coming UX designers and some not so green ones who might need it: leave your canvases and post-its for a little bit, engage in conversation with people and just listen.

Ask questions, but let them speak freely. Only then, after you’ve really listened, is that you should open your suitcase of UX tools and start digging. You will already have some of those tools working “in the background” while you listen — it’s just the way our minds work — but don’t let the eagerness for deliverable results get in the way of listening.

Not just a UX Designer; mostly a good listener was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

However, there is a big design problem in Twitter that hasn’t been properly addressed by this large number of designers, and it has become an example of dark pattern in interface design: the timeline view toggle icon.

The timeline view toggle is a feature that allows a user to change between viewing the timeline in chronological order or in an order of relevance curated by Twitter’s algorithms (“highlighted” tweets). This second viewing mode also shows tweets that you might like seeing because your friends liked (“hearted”) them. For some users this meant seeing all the selfies their friends liked, all the Trump tweets their family liked, and all the adult content their co-workers liked, along with promoted content, or content that was simply very popular in the social network — be it actually relevant or fake news spreading fast.

In 2017 this timeline viewing mode became the default for any new Twitter account (or any new install of the app), and users were quite confused by it because there wasn’t a way to turn it off. Twitter provided a feature called “See less of this” that would allow you to hide a certain tweet from your timeline (also hidden under a tweet’s contextual menu). If you marked enough tweets of a certain kind with this, they would eventually disappear until a new Twitter update came out and reset it.

Finally, in 2018, noticing the issue that this behavior brought, Twitter decided to add the timeline view mode toggle. Many users did not notice the change, and many still don’t know that you can go back to the original chronological view without everyone’s likes being thrown at you.

First, let’s consider the user flow of this feature:

1. The user logs in successfully to Twitter
2. They are taken to the Home tab where all the content is sorted by relevance
3. They click or touch an icon button to toggle the timeline between relevance and chronological order
4. They see a modal drawer or pop-up dialog with both options: the current one (highlighted tweets) and the chronological one
5. They click or touch the chronological order button
6. The drawer or dialog closes
7. The timeline refreshes to show the tweets in the selected order
8. A toast notifications tells you what’s changed

Now let’s see how it actually looks:

Did you have any luck finding the timeline icon button?

Here’s what Twitter’s official help has to say about it:

Here’s that icon one more time:

You might be familiar with it, it’s the same design as the “Sparkle” emoji. ✨

This is, by far, one of the worst choices of icon I’ve seen recently, to the point where I believe it has been chosen to keep users from finding the feature and help twitter drive more promoted content to everyone’s timelines. It feels like a dark pattern, more than just a bad design decision.

The sparkle icon does not help the user find the feature, and it doesn’t represent a timeline or a setting at all. It also does not reflect the toggle interaction nor the current status of the timeline, always looking the same under any setting.

Also notice that, even though the title of the timeline says “Most recent tweets”, only the icon button is clickable, so it ends up breaking the expectancy that the icon is related to the title, or that the title is a label to the icon. Both of these things are true, but they’re not designed in a way that this is made clear, since the icon is so hard to relate to “timeline”. Another fault in this case is that when you scroll the timeline (pretty much the first thing any user will do when entering Twitter), the header with the timeline title and the icon button does not stay in sight.

There are many ways this feature could have been exposed to the user:

• A clock icon or something else related to “time”

• A series of itens in a row, representing a “timeline”

• Custom representations of each timeline mode, as in “ordered by date” and “ordered by relevance”

There are plenty of solutions available out there, and you could probably come with something better than Twitter’s weird sparkle emoji icon in under 10 minutes.

Other than the icon itself, this is a rather strange location for this button, because even though it is presented in the context of the timeline, all of the other timeline settings are placed under the Settings tab (which is under the “More…” item in the menu, and in a separate tab inside it).

When you click/touch that sparkle icon, you’ll see this:

This little pop-up contains a much better icon— even if not perfect — to describe the current status and feature: an analog clock and an arrow running around its rim, along with little sparkles — What’s up with the sparkles, Twitter?!

If you do toggle to the next view mode (“highlighted tweets first”), you’ll see the sparkles icon back, indicating the current status, but it only changes inside this pop-up, with the actual icon button on the timeline remaining the same.

As I previously stated, even if you change to the chronological timeline view, you will be taken back to the default relevance view if you don’t log in or open the app for a while.

Ways this feature design could be improved

First of all, the toggle button icon could really work as a toggle button:

• Click/touch the button to toggle between chronological and relevance timeline views (e.g. Most recent/Highlights)
• It could have different labels for each state: “Most Recent” and “Highlights”, for example.
• It could have different icons for each state: Clock and Chart, for instance.
• The title of the timeline and the toggle button could be fixed upon scroll, so that users have a better chance at finding it once they noticed their timeline is not set up as they prefer.

There are other improvements that could be made to the feature as a whole:

• This feature could also be placed in the Settings page, not only on the timeline, along with some better copy and radio buttons:

“View the timeline in chronological order. You will see tweets as they are posted, and you will not see tweets other users have liked.”;
“View highlighted tweets, suggested to you. You will see the most relevant tweets among the users you follow, including those that they liked best”.

• Upon onboarding or coming back to the app/website after a while, users could be taught how to switch back to chronological view.

We’re glad you’re back! While you were away, we switched your timeline back to Highlights view. If you want to, you can switch to the Most Recent view —[ Switch to Most Recent] /[ Leave it as it is].

• If the toggle button works as expected, there would not need to be a pop-up/dialog telling you what is happening. Text label, alt text and the toast notification would suffice.

Text label: “Most Recent”
Alt text: “Viewing most recent tweets. Click to change to Highlights view.”
Toast notification: “Viewing Highlighted tweets and most liked content. [Revert to Most Recent view]”

• Even if the toggle button gets a label, there is an alternative where clicking the title (“Most Recent Tweets”) could also act as a menu button, opening a list of options (“Most Recent” and “Highlights”) for the user to choose from. This would be the most fail-safe option. On hover, the title would highlight the timeline header as a whole, including the icon, so the user notices the relationship between them.

The new user flow would become:

1. The user logs in successfully to Twitter
2. They are taken to the Home tab where all the content is sorted by relevance
3. They click/touch the chart icon labeled “Highlights”
4. The icon changes to a clock, and its label to “Most Recent”
5. The timeline refreshes to update the view
6. A toast notification tells what’s different and how to revert it. Ideally this notifications contains an action link or button to revert to the previous state.

The Twitter design team hasn’t had success finding a proper icon or interaction that is suitable for this feature, yet. The design of a product is always evolving. I am not aware, of course, of all the business decisions made around this feature, and how important it is for twitter’s goal of pushing promoted and relevant (popular?) content, but it is obvious to me that the way it works right now is very close to a dark pattern, unfortunately tricking users into ignoring it so that Twitter can show you whatever content is more important to their success as a social network.

In a time where fake news are all around us, it is important that users can have better control of what is delivered to them. In that sense, it is almost irresponsible to hide such feature, and I hope it’s just an overlook that they can fix soon.

Twitter timeline: the worst icon to ever signify a feature was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.