Tornar o Search SciELO Responsivo

alexxxmendonca commented 5 years ago

Tornar o site Search SciELO responsivo para as diversas interfaces de diferentes dispositivos.

Descrição da nova funcionalidade

Eu, como usuário de smartphone ou dispositivo mobile, gostaria que a interface do site Search SciELO se adequasse ao meu dispositivo para uma melhor navegabillidade, então a interface do Search SciELO deve ser responsiva.

Critérios de aceitação

Responsivo nos principais navegadores e sistemas operacionais de dispositivos móveis.
Responsivo em navegadores desktop ao redimencionar o tamanho da janela.

Anexos

N/A

Referências

N/A

robertatakenaka commented 4 years ago

@alexxxmendonca conseguiria completar este ticket?

paratiuid commented 4 years ago

@gustavofonseca @jamilatta

este ticket está parado pois depende do andamento deste outro: https://github.com/scieloorg/search-journals/issues/455

alexxxmendonca commented 4 years ago

@robertatakenaka completado.

robertatakenaka commented 4 years ago

@alexxxmendonca nós sentimos falta de como ficaria isso visualmente. Pergunto isso porque abri em meu celular e digamos que superficialmente já está responsivo. Então, as questões são:

quais são os elementos que devem aparecer no celular?
como eles devem aparecer?
há algum problema já identificado em algum Sistema Operacional?
etc

alexxxmendonca commented 4 years ago

@robertatakenaka não tenho ideia em como responder esses pontos.

O ticket foi feito para solicitar uma proposta à Parati. O SciELO como cliente aguarda uma proposta da empresa de soluções de design, Parati.

robertatakenaka commented 4 years ago

@alexxxmendonca você quer dizer uma proposta de layout? Proposta de como ficaria as telas?

alexxxmendonca commented 4 years ago

@robertatakenaka sim.

robertatakenaka commented 4 years ago

@paratiuid entregar um Wireframe da lista dos resultados

paratiuid commented 4 years ago

Pessoal, @alexxxmendonca conforme falamos hoje cedo na daily, segue o pdf contendo os wireframes do search mobile.

Nele, incluí 3 versões distintas para a tela de resultados da busca. Aguardo os comentários de vcs.

search-journals-mobile-wireframe-v2.pdf

alexxxmendonca commented 4 years ago

@paratiuid vou analisar com calma na volta do recesso.

Por ora, você saberia indicar se alguma função ou recurso não está disponível na versão responsiva? Ou é seguro afirmar que todas as funções e recursos da versão desktop são, de uma maneira ou de outra, reproduzidas na versão responsiva?

paratiuid commented 4 years ago

@paratiuid vou analisar com calma na volta do recesso.

Por ora, você saberia indicar se alguma função ou recurso não está disponível na versão responsiva? Ou é seguro afirmar que todas as funções e recursos da versão desktop são, de uma maneira ou de outra, reproduzidas na versão responsiva?

Acredito ter conseguido manter todas as funcionalidades contidas na versão desktop, nessa proposta para o mobile.

paratiuid commented 4 years ago

Pessoal, @alexxxmendonca @gustavofonseca

segue o novo pdf com as telas ajustadas conforme solicitado na apresentação dos wireframes: search-journals-mobile-wireframe-aprovados.pdf

alexxxmendonca commented 4 years ago

@paratiuid para mim está ok, mas uma coisa que pensei agora: não teria como a janela de filtros ocupar 3/4 da tela, ao invés da tela toda?

@gustavofonseca por favor dê o seu parecer assim que possível.

paratiuid commented 4 years ago

@paratiuid para mim está ok, mas uma coisa que pensei agora: não teria como a janela de filtros ocupar 3/4 da tela, ao invés da tela toda?

@gustavofonseca por favor dê o seu parecer assim que possível.

Oi @alexxxmendonca

eu não vejo sentido em deixar a janela de filtros menor do que a tela, sendo que temos muitos filtros. Verifiquei a referência que você havia citado, o app do Quinto andar. Ali, pelo que vi os filtros aparecem inicialmente exibindo apenas duas opções, no caso Valor de aluguel e número de quartos. Para o ramo imobiliário, acredito que possa fazer sentido exibir esses dois campos como principais e mais utilizados. Na sua opinião existem campos nos filtros do search que seriam os principais e justificariam aparecer primeiro do que os outros?

alexxxmendonca commented 4 years ago

@paratiuid não sei se me expressei bem, eu quis dizer 3/4 da tela na horizontal. Verticalmente pegaria a tela toda. Seria só para o usuário ter uma noção de "barra lateral", semelhante até ao desktop. Como está atualmente ocupa a tela toda. Até mesmo se o usuário quiser "deslizar o dedo para a esquerda" a barra de filtros poderia sumir.

O exemplo do Quinto Andar foi só mesmo um exemplo, Não acho que vem ao caso escolhermos filtros principais.

paratiuid commented 4 years ago

@alexxxmendonca acho que entendi seu ponto. Mas discordo.

A tela do celular já é bem pequena, e "afinar", "deixar mais estreita" a interface não sei se ajudaria em algum sentido.

Podemos analisar referências, ver casos existentes ...

Pessoalmente, penso em seguir o simples.

alexxxmendonca commented 4 years ago

be5bdb9a-6121-4f0b-bd2b-c352120167a9

No exemplo acima, o usuário pode sair da tela de filtro clicando na área fora, por exemplo.

Quais as opções de "sair" do filtro na proposta de vocês?

paratiuid commented 4 years ago

tela-filtros

No modelo proposto temos a opção 1, em verde, na imagem. Que aplica o filtro e retorna a listagem de resultados filtrados.

E temos a opção 2, em vermelho, na imagem. Que retorna para a tela anterior sem aplicar filtro algum.

Algo semelhante a essa tela abaixo: filtro-olx

alexxxmendonca commented 4 years ago

@paratiuid ok, então a opção de voltar é fixa no scrolling?

paratiuid commented 4 years ago

@paratiuid ok, então a opção de voltar é fixa no scrolling?

Ela é fixa no topo. Toda a página rola, mas ela fica sempre visível. O mesmo ocorre com o botão Filtrar. Enquanto houver rolagem, ele aparece flutuante, fixo na parte inferior da tela. Ao rolar a tela até o fim, o botão filtrar passa a ocupar 100% da largura da tela.

Veja exemplos abaixo:

Tela 01: Nesse caso existe rolagem. Verifique que o botão filtrar está sobre alguns filtros. Portanto ele é flutuante e não ocupa toda a largura da tela. E o botão voltar está fixo no topo. filtro-olx-flutuante

Tela 02: Nesse caso, a pagina foi "scrollada" até o fim. O botão filtrar não está mais sobre nenhum filtro. O botão filtrar passa a ocupar 100% da largura da tela. E o botão voltar permanece fixo e visível no topo. filtro-olx

alexxxmendonca commented 4 years ago

@paratiuid de acordo.

gustavofonseca commented 4 years ago

Estou de acordo também (eu acho) =]

paratiuid commented 4 years ago

@gustavofonseca @alexxxmendonca

Pessoal ,

conforme falamos hoje em nossa daily, precisei fazer uma alteração no wireframe da home do search mobile.

Seguem as imagens abaixo.

O primeiro modelo colocado por mim foi esse. Percebam que ele não contempla a escolha de tipo de índice para a busca: Screen Shot 2020-01-21 at 11 35 37 AM

Atualizei para esse: Screen Shot 2020-01-21 at 11 36 09 AM

gustavofonseca commented 4 years ago

Excelente, @paratiuid. Grato por informar =]

paratiuid commented 4 years ago

@alexxxmendonca @gustavofonseca

Pessoal, conforme comentado hoje na daily, segui os trabalhos na documentação do layout no figma.

Segue o link: https://www.figma.com/proto/M44HZAppE9A5Mc5yXymj5X/Search-Journals-Mobile?node-id=1%3A2&viewport=634%2C472%2C1&scaling=scale-down

gustavofonseca commented 4 years ago

É possível apenas fazer scroll, é isso mesmo?

paratiuid commented 4 years ago

É possível apenas fazer scroll, é isso mesmo?

Sim. Nessa primeira versão, sim.

alexxxmendonca commented 4 years ago

@paratiuid Ok. No aguardo das demais telas (além da home).

paratiuid commented 4 years ago

@alexxxmendonca @gustavofonseca

Segue uma atualização do protótipo.

https://www.figma.com/proto/M44HZAppE9A5Mc5yXymj5X/Search-Journals-Mobile?node-id=1%3A2&viewport=1919%2C-559%2C1&scaling=scale-down

Novas funcionalidades disponíveis:

aviso sobre política de cookies fixado no footer
abrir menu
inserir novo campo de busca
ver histórico de busca
incluir item na busca
editar expressão
limpar lista

alexxxmendonca commented 4 years ago

@paratiuid está ficando bom

Achei o tamanho da fonte da página de "Histórico de busca" um pouco pequena. Pensei que pudesse ser por que estava vendo no desktop, mas abri em meu smartphone e também tive a mesma impressão.

Consegue aumentar um pouco?

paratiuid commented 4 years ago

@paratiuid está ficando bom

Achei o tamanho da fonte da página de "Histórico de busca" um pouco pequena. Pensei que pudesse ser por que estava vendo no desktop, mas abri em meu smartphone e também tive a mesma impressão.

Consegue aumentar um pouco?

@alexxxmendonca

segue a correção: https://www.figma.com/proto/M44HZAppE9A5Mc5yXymj5X/Search-Journals-Mobile?node-id=43%3A20&viewport=928%2C-43%2C0.5&scaling=scale-down

alexxxmendonca commented 4 years ago

Ficou melhor!

paratiuid commented 4 years ago

@alexxxmendonca

segue a evolução do protótipo:

https://www.figma.com/proto/M44HZAppE9A5Mc5yXymj5X/Search-Journals-Mobile?node-id=1%3A2&viewport=461%2C394%2C0.5&scaling=scale-down

foi feito conforme o wireframe.
não me agradou o link do documento aparecer somente no detalhe.
aumentei o espaço de toque do menu principal

alexxxmendonca commented 4 years ago

@paratiuid conforme conversamos, por favor faça uma versão com a área toda do resultado sensível ao toque, eliminando a seta, atendendo a esta observação:

não me agradou o link do documento aparecer somente no detalhe.

paratiuid commented 4 years ago

@paratiuid conforme conversamos, por favor faça uma versão com a área toda do resultado sensível ao toque, eliminando a seta, atendendo a esta observação:

não me agradou o link do documento aparecer somente no detalhe.

Veja @alexxxmendonca https://www.figma.com/proto/M44HZAppE9A5Mc5yXymj5X/Search-Journals-Mobile?node-id=134%3A31&viewport=-1491%2C-1645%2C1&scaling=scale-down

Ainda tenho minhas dúvidas se estará claro as seguintes possibilidades:

acessar os detalhes do item, ou seja, ver os links para resumo, etc
acessar o documento do link Penso que ainda possa haver confusão. Principalmente na hora de fechar e voltar para a lista inicial.

Outra questão: Nas interfaces da SciELO, o azul é cor de link. Porém ele aparece também no cabeçalho da tabela. Penso que também possa gerar confusão.

paratiuid commented 4 years ago

@alexxxmendonca

conforme conversamos, seguem as imagens que explicam de forma visual a interação com o resultado da busca.

search-mobile-comportamento-v1

search-mobile-comportamento-v2

alexxxmendonca commented 4 years ago

@paratiuid estou de acordo com a solução proposta com base nas justificativas apresentadas.

Aproveito para solicitar alteração na forma de exibição do DOI.

De acordo com as orientações mais recentes do Crossref:

Display Crossref DOI as a full link Crossref DOIs should always be displayed as a full URL link in the form https://doi.org/10.xxxx/xxxxx and should not be preceded by doi: or DOI:. Example: https://doi.org/10.5468/ogs.2016.59.1.1

Fonte: https://www.crossref.org/display-guidelines/

Essa prática está sendo alterada em todas as instâncias onde o DOI é exibido em todos os sites SciELO.

paratiuid commented 4 years ago

@alexxxmendonca @gustavofonseca

Seguem atualizações no protótipo: https://www.figma.com/proto/M44HZAppE9A5Mc5yXymj5X/Search-Journals-Mobile?node-id=1%3A2&viewport=-379%2C-588%2C0.5&scaling=scale-down

Incluído:

filtros
resumo
lista com filtros

alexxxmendonca commented 4 years ago

@paratiuid está ficando bom!

Uma dúvida: os clusters são da cor cinza na interface desktop e aqui são brancos. Algum motivo específico para isso?

paratiuid commented 4 years ago

@paratiuid está ficando bom!

Uma dúvida: os clusters são da cor azul na interface desktop e aqui são brancos. Algum motivo específico para isso?

Oi @alexxxmendonca

a idéia foi manter o padrão utilizado também no scielo.org, onde os accordions compoem a interface mobile.

Fundo branco, com setas cinzas. Veja a imagem abaixo:

alexxxmendonca commented 4 years ago

@paratiuid ok, de acordo!

Com isso, podemos seguir para a fase de codificação.

paratiuid commented 4 years ago

@alexxxmendonca @gustavofonseca @jamilatta

Pessoal, conforme conversado agora na daily, verifiquei ontem que não foi desenhada a interação de seleção de um item de busca.

Vou retornar a essa fase do protótipo apenas para ter tudo desenhado e acordado. Assim que finalizado, colo o link para acesso aqui.

paratiuid commented 4 years ago

@alexxxmendonca @gustavofonseca @jamilatta

Conforme comentado anteriormente, foi feita a tela que ilustra a interação com os itens da busca.

Agora é possível selecionar todos os itens, ou selecionar um item individual. Ao fazer, é exibida uma barra flutuante que contém os componentes que possibilitam efetuar ações com os ítens selecionados.

https://www.figma.com/proto/M44HZAppE9A5Mc5yXymj5X/Search-Journals-Mobile?node-id=134%3A31&viewport=-3295%2C-7130%2C2&scaling=scale-down

gustavofonseca commented 4 years ago

@alexxxmendonca, este ticket também é difícil de mensurar e avaliar o avanço. Podemos fechá-lo e quem sabe conduzir esta atividade em outro ticket/quadro?

paratiuid commented 4 years ago

@gustavofonseca realmente esta atividade é praticamente um projeto. Não dá para seguir o mesmo fluxo e SLA de um ticket normal. (PS: É o Caramez)

gustavofonseca commented 4 years ago

@gustavofonseca realmente esta atividade é praticamente um projeto. Não dá para seguir o mesmo fluxo e SLA de um ticket normal. (PS: É o Caramez)

Perfeito, @paratiuid. Criei um quadro de kanban (privado) exclusivamente para este projeto e inclui seu usuário como colaborador.

scieloorg / search-journals